diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 629cbeca..b24d3ade 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -51,12 +51,12 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/BadgeDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/BadgeDemo.vue'],
     },
-    BadgeSecondaryDemo: {
-      name: 'BadgeSecondaryDemo',
+    BadgeDestructiveDemo: {
+      name: 'BadgeDestructiveDemo',
       type: 'components:example',
       registryDependencies: ['badge'],
-      component: () => import('../src/lib/registry/default/example/BadgeSecondaryDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/BadgeSecondaryDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/BadgeDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeDestructiveDemo.vue'],
     },
     BadgeOutlineDemo: {
       name: 'BadgeOutlineDemo',
@@ -65,12 +65,19 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/BadgeOutlineDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/BadgeOutlineDemo.vue'],
     },
-    BadgeDestructiveDemo: {
-      name: 'BadgeDestructiveDemo',
+    BadgeSecondaryDemo: {
+      name: 'BadgeSecondaryDemo',
       type: 'components:example',
       registryDependencies: ['badge'],
-      component: () => import('../src/lib/registry/default/example/BadgeDestructiveDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/BadgeDestructiveDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/BadgeSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeSecondaryDemo.vue'],
+    },
+    ButtonAsChildDemo: {
+      name: 'ButtonAsChildDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonAsChildDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonAsChildDemo.vue'],
     },
     ButtonDemo: {
       name: 'ButtonDemo',
@@ -79,13 +86,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonDemo.vue'],
     },
-    ButtonSecondaryDemo: {
-      name: 'ButtonSecondaryDemo',
-      type: 'components:example',
-      registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/default/example/ButtonSecondaryDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ButtonSecondaryDemo.vue'],
-    },
     ButtonDestructiveDemo: {
       name: 'ButtonDestructiveDemo',
       type: 'components:example',
@@ -93,13 +93,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonDestructiveDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonDestructiveDemo.vue'],
     },
-    ButtonOutlineDemo: {
-      name: 'ButtonOutlineDemo',
-      type: 'components:example',
-      registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/default/example/ButtonOutlineDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ButtonOutlineDemo.vue'],
-    },
     ButtonGhostDemo: {
       name: 'ButtonGhostDemo',
       type: 'components:example',
@@ -107,13 +100,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonGhostDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonGhostDemo.vue'],
     },
-    ButtonLinkDemo: {
-      name: 'ButtonLinkDemo',
-      type: 'components:example',
-      registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/default/example/ButtonLinkDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ButtonLinkDemo.vue'],
-    },
     ButtonIconDemo: {
       name: 'ButtonIconDemo',
       type: 'components:example',
@@ -121,12 +107,12 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonIconDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonIconDemo.vue'],
     },
-    ButtonWithIconDemo: {
-      name: 'ButtonWithIconDemo',
+    ButtonLinkDemo: {
+      name: 'ButtonLinkDemo',
       type: 'components:example',
       registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/default/example/ButtonWithIconDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ButtonWithIconDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/ButtonLinkDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonLinkDemo.vue'],
     },
     ButtonLoadingDemo: {
       name: 'ButtonLoadingDemo',
@@ -135,12 +121,26 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonLoadingDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonLoadingDemo.vue'],
     },
-    ButtonAsChildDemo: {
-      name: 'ButtonAsChildDemo',
+    ButtonOutlineDemo: {
+      name: 'ButtonOutlineDemo',
       type: 'components:example',
       registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/default/example/ButtonAsChildDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ButtonAsChildDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/ButtonOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonOutlineDemo.vue'],
+    },
+    ButtonSecondaryDemo: {
+      name: 'ButtonSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonSecondaryDemo.vue'],
+    },
+    ButtonWithIconDemo: {
+      name: 'ButtonWithIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonWithIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonWithIconDemo.vue'],
     },
     CalendarDemo: {
       name: 'CalendarDemo',
@@ -166,7 +166,7 @@ export const Index = {
     CardFormDemo: {
       name: 'CardFormDemo',
       type: 'components:example',
-      registryDependencies: ['button', 'card', 'switch', 'utils'],
+      registryDependencies: ['card', 'select', 'input', 'label', 'button'],
       component: () => import('../src/lib/registry/default/example/CardFormDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardFormDemo.vue'],
     },
@@ -317,13 +317,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DatePickerWithRange.vue'],
     },
-    DialogDemo: {
-      name: 'DialogDemo',
-      type: 'components:example',
-      registryDependencies: ['button', 'dialog', 'input', 'label'],
-      component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/DialogDemo.vue'],
-    },
     DialogCustomCloseButton: {
       name: 'DialogCustomCloseButton',
       type: 'components:example',
@@ -331,6 +324,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DialogCustomCloseButton.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DialogCustomCloseButton.vue'],
     },
+    DialogDemo: {
+      name: 'DialogDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DialogDemo.vue'],
+    },
     DropdownMenuDemo: {
       name: 'DropdownMenuDemo',
       type: 'components:example',
@@ -467,7 +467,7 @@ export const Index = {
     ScrollAreaHorizontalDemo: {
       name: 'ScrollAreaHorizontalDemo',
       type: 'components:example',
-      registryDependencies: ['scroll-area', 'separator'],
+      registryDependencies: ['scroll-area'],
       component: () => import('../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue'],
     },
@@ -632,6 +632,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleDemo.vue'],
     },
+    ToggleDisabledDemo: {
+      name: 'ToggleDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
+    },
     ToggleItalicDemo: {
       name: 'ToggleItalicDemo',
       type: 'components:example',
@@ -646,13 +653,6 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
     },
-    ToggleSmallDemo: {
-      name: 'ToggleSmallDemo',
-      type: 'components:example',
-      registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
-    },
     ToggleLargeDemo: {
       name: 'ToggleLargeDemo',
       type: 'components:example',
@@ -660,12 +660,12 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
     },
-    ToggleDisabledDemo: {
-      name: 'ToggleDisabledDemo',
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
       type: 'components:example',
       registryDependencies: ['toggle'],
-      component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
     },
     TooltipDemo: {
       name: 'TooltipDemo',
@@ -851,7 +851,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue'],
     },
-
     BadgeOutlineDemo: {
       name: 'BadgeOutlineDemo',
       type: 'components:example',
@@ -859,7 +858,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/BadgeOutlineDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/BadgeOutlineDemo.vue'],
     },
-
     BadgeSecondaryDemo: {
       name: 'BadgeSecondaryDemo',
       type: 'components:example',
@@ -867,13 +865,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue'],
     },
-    ButtonDemo: {
-      name: 'ButtonDemo',
-      type: 'components:example',
-      registryDependencies: ['button'],
-      component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
-    },
     ButtonAsChildDemo: {
       name: 'ButtonAsChildDemo',
       type: 'components:example',
@@ -881,6 +872,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonAsChildDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonAsChildDemo.vue'],
     },
+    ButtonDemo: {
+      name: 'ButtonDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
+    },
     ButtonDestructiveDemo: {
       name: 'ButtonDestructiveDemo',
       type: 'components:example',
@@ -895,7 +893,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonGhostDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonGhostDemo.vue'],
     },
-
     ButtonIconDemo: {
       name: 'ButtonIconDemo',
       type: 'components:example',
@@ -903,7 +900,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonIconDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonIconDemo.vue'],
     },
-
     ButtonLinkDemo: {
       name: 'ButtonLinkDemo',
       type: 'components:example',
@@ -911,7 +907,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonLinkDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonLinkDemo.vue'],
     },
-
     ButtonLoadingDemo: {
       name: 'ButtonLoadingDemo',
       type: 'components:example',
@@ -926,7 +921,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonOutlineDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonOutlineDemo.vue'],
     },
-
     ButtonSecondaryDemo: {
       name: 'ButtonSecondaryDemo',
       type: 'components:example',
@@ -934,7 +928,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue'],
     },
-
     ButtonWithIconDemo: {
       name: 'ButtonWithIconDemo',
       type: 'components:example',
@@ -966,7 +959,7 @@ export const Index = {
     CardFormDemo: {
       name: 'CardFormDemo',
       type: 'components:example',
-      registryDependencies: ['button', 'card', 'switch', 'utils'],
+      registryDependencies: ['card', 'select', 'input', 'label', 'button'],
       component: () => import('../src/lib/registry/new-york/example/CardFormDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CardFormDemo.vue'],
     },
@@ -1267,7 +1260,7 @@ export const Index = {
     ScrollAreaHorizontalDemo: {
       name: 'ScrollAreaHorizontalDemo',
       type: 'components:example',
-      registryDependencies: ['scroll-area', 'separator'],
+      registryDependencies: ['scroll-area'],
       component: () => import('../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue'],
     },
@@ -1439,7 +1432,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
     },
-
     ToggleItalicDemo: {
       name: 'ToggleItalicDemo',
       type: 'components:example',
@@ -1447,7 +1439,6 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
     },
-
     ToggleItalicWithTextDemo: {
       name: 'ToggleItalicWithTextDemo',
       type: 'components:example',
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index f2905f30..e4f6c9a9 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -14,7 +14,7 @@
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n    <DialogContent class=\"p-0 overflow-hidden shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index 586e88c4..27a991e5 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, disabled, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
index f2eb55b0..1eb10d7f 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",