From 66254fade7351d4ca02be151e0b443d10e8f4588 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Wed, 3 Jan 2024 12:07:53 +0330
Subject: [PATCH] refactor: use `class` as prop to prevent class duplication

---
 .../default/ui/accordion/Accordion.vue        |  6 +++--
 .../default/ui/accordion/AccordionContent.vue | 11 ++++++--
 .../default/ui/accordion/AccordionItem.vue    | 13 +++++++---
 .../default/ui/accordion/AccordionTrigger.vue | 11 ++++++--
 .../ui/alert-dialog/AlertDialogAction.vue     | 11 ++++++--
 .../ui/alert-dialog/AlertDialogCancel.vue     | 11 ++++++--
 .../ui/alert-dialog/AlertDialogContent.vue    | 11 ++++++--
 .../alert-dialog/AlertDialogDescription.vue   | 11 ++++++--
 .../ui/alert-dialog/AlertDialogFooter.vue     | 10 +++-----
 .../ui/alert-dialog/AlertDialogHeader.vue     | 10 +++-----
 .../ui/alert-dialog/AlertDialogTitle.vue      | 11 ++++++--
 .../lib/registry/default/ui/alert/Alert.vue   |  9 ++++---
 .../default/ui/alert/AlertDescription.vue     |  7 +++---
 .../registry/default/ui/alert/AlertTitle.vue  |  7 +++++-
 .../lib/registry/default/ui/alert/index.ts    |  4 ++-
 .../lib/registry/default/ui/avatar/Avatar.vue |  9 ++++---
 .../lib/registry/default/ui/avatar/index.ts   |  4 ++-
 .../lib/registry/default/ui/badge/Badge.vue   | 16 ++++++------
 .../lib/registry/default/ui/badge/index.ts    |  4 ++-
 .../lib/registry/default/ui/button/Button.vue |  8 +++---
 .../lib/registry/default/ui/button/index.ts   |  4 ++-
 .../src/lib/registry/default/ui/card/Card.vue | 10 +++-----
 .../registry/default/ui/card/CardContent.vue  | 10 +++-----
 .../default/ui/card/CardDescription.vue       | 10 +++-----
 .../registry/default/ui/card/CardFooter.vue   | 10 +++-----
 .../registry/default/ui/card/CardHeader.vue   | 10 +++-----
 .../registry/default/ui/card/CardTitle.vue    | 10 +++-----
 .../registry/default/ui/checkbox/Checkbox.vue | 20 +++++++++++----
 .../default/ui/collapsible/Collapsible.vue    |  6 +++--
 .../registry/default/ui/command/Command.vue   | 25 +++++++++++++------
 .../default/ui/command/CommandDialog.vue      |  6 ++---
 .../default/ui/command/CommandEmpty.vue       | 11 ++++++--
 .../default/ui/command/CommandGroup.vue       | 12 +++++++--
 .../default/ui/command/CommandInput.vue       | 23 +++++++++++------
 .../default/ui/command/CommandItem.vue        | 13 +++++++---
 .../default/ui/command/CommandList.vue        | 15 ++++++++---
 .../default/ui/command/CommandSeparator.vue   | 13 +++++++---
 .../default/ui/command/CommandShortcut.vue    |  7 +++++-
 .../context-menu/ContextMenuCheckboxItem.vue  | 11 ++++++--
 .../ui/context-menu/ContextMenuContent.vue    | 19 ++++++++++----
 .../ui/context-menu/ContextMenuItem.vue       | 11 ++++++--
 .../ui/context-menu/ContextMenuLabel.vue      | 13 +++++++---
 .../ui/context-menu/ContextMenuRadioItem.vue  | 18 ++++++++++---
 .../ui/context-menu/ContextMenuSeparator.vue  | 11 ++++++--
 .../ui/context-menu/ContextMenuShortcut.vue   |  7 +++++-
 .../ui/context-menu/ContextMenuSubContent.vue | 18 ++++++++++---
 .../ui/context-menu/ContextMenuSubTrigger.vue | 11 ++++++--
 .../default/ui/dialog/DialogContent.vue       | 14 ++++++++---
 .../default/ui/dialog/DialogDescription.vue   | 11 ++++++--
 .../default/ui/dialog/DialogFooter.vue        |  7 ++----
 .../default/ui/dialog/DialogHeader.vue        |  9 +++----
 .../default/ui/dialog/DialogTitle.vue         | 11 ++++++--
 .../DropdownMenuCheckboxItem.vue              | 11 ++++++--
 .../ui/dropdown-menu/DropdownMenuContent.vue  | 18 ++++++++++---
 .../ui/dropdown-menu/DropdownMenuItem.vue     | 11 ++++++--
 .../ui/dropdown-menu/DropdownMenuLabel.vue    | 18 +++++++------
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  9 +++----
 .../dropdown-menu/DropdownMenuRadioItem.vue   | 11 ++++++--
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |  7 +++++-
 .../dropdown-menu/DropdownMenuSubContent.vue  | 20 +++++++++++----
 .../dropdown-menu/DropdownMenuSubTrigger.vue  | 11 ++++++--
 .../default/ui/form/FormDescription.vue       | 12 ++++-----
 .../lib/registry/default/ui/form/FormItem.vue | 14 +++++------
 .../registry/default/ui/form/FormLabel.vue    |  8 +++---
 .../ui/hover-card/HoverCardContent.vue        | 12 ++++++---
 .../lib/registry/default/ui/input/Input.vue   |  2 +-
 .../lib/registry/default/ui/label/Label.vue   | 11 ++++++--
 .../registry/default/ui/menubar/Menubar.vue   | 19 +++++++++++---
 .../ui/menubar/MenubarCheckboxItem.vue        | 21 ++++++++++++----
 69 files changed, 540 insertions(+), 245 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
index 1bfac8de..8ce8571b 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -3,15 +3,17 @@ import {
   AccordionRoot,
   type AccordionRootEmits,
   type AccordionRootProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <AccordionRoot v-bind="forwarded">
     <slot />
   </AccordionRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
index 740f4e66..2178ff4b 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AccordionContent, type AccordionContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionContentProps & { class?: string }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AccordionContent
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
index c78bf5aa..9cfa7e0f 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AccordionItem, type AccordionItemProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionItemProps & { class?: string }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AccordionItem
-    v-bind="props"
-    :class="cn('border-b', props.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('border-b', props.class)"
   >
     <slot />
   </AccordionItem>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
index 512a8fdf..c9efb167 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AccordionHeader,
   AccordionTrigger,
@@ -7,13 +8,19 @@ import {
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionTriggerProps & { class?: string }>()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AccordionHeader class="flex" as="div">
     <AccordionTrigger
-      v-bind="props"
+      v-bind="delegatedProps"
       :class="
         cn(
           'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
index 8ebf7157..cd87a927 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 
-const props = defineProps<AlertDialogActionProps>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
     <slot />
   </AlertDialogAction>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
index fe3531b3..d42179c4 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 
-const props = defineProps<AlertDialogCancelProps>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
     <slot />
   </AlertDialogCancel>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 8af818b9..7f01e5a4 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -9,10 +10,16 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogContentProps & { class?: string }>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -21,7 +28,7 @@ const emitsAsProps = useEmitAsProps(emits)
       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
-      v-bind="{ ...props, ...emitsAsProps }"
+      v-bind="{ ...delegatedProps, ...emitsAsProps }"
       :class="
         cn(
           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
index 7ff155e6..c7d3feeb 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogDescription
+    v-bind="delegatedProps"
     :class="cn('text-muted-foreground text-sm', props.class)"
-    :as-child="props.asChild"
   >
     <slot />
   </AlertDialogDescription>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
index de4af93b..60e8c76c 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..bc13a210 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
index 9b6491f2..cb5d9fb8 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogTitle
-    :as-child="props.asChild"
+    v-bind="delegatedProps"
     :class="cn('text-lg text-foreground font-semibold', props.class)"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
index b95d5c89..b23ae1f0 100644
--- a/apps/www/src/lib/registry/default/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { alertVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface Props {
-  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
-  class?: string
+  variant?: AlertVariants['variant']
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="cn(alertVariants({ variant: props.variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
index a539b631..2971a877 100644
--- a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: String,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
index c5dd22c2..e28dd37e 100644
--- a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
     <slot />
   </h5>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts
index 5ca03a7f..765f704d 100644
--- a/apps/www/src/lib/registry/default/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/default/ui/alert/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
@@ -19,3 +19,5 @@ export const alertVariants = cva(
     },
   },
 )
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
index 39f71b65..6864bbec 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { AvatarRoot } from 'radix-vue'
-import { avatarVariant } from '.'
+import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
 
 interface Props {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/src/lib/registry/default/ui/avatar/index.ts
index 6e53cdc8..c4af1a66 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/avatar/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
 export { default as AvatarImage } from './AvatarImage.vue'
@@ -20,3 +20,5 @@ export const avatarVariant = cva(
     },
   },
 )
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
index b459c145..2e8bdffa 100644
--- a/apps/www/src/lib/registry/default/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
-
-interface Props {
-  variant?: BadgeVariantProps['variant']
-}
-defineProps<Props>()
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/src/lib/registry/default/ui/badge/index.ts
index 771c75f1..d90c2ef4 100644
--- a/apps/www/src/lib/registry/default/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/default/ui/badge/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
@@ -21,3 +21,5 @@ export const badgeVariants = cva(
     },
   },
 )
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/src/lib/registry/default/ui/button/Button.vue
index 5a34b1b8..8cb54be4 100644
--- a/apps/www/src/lib/registry/default/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { buttonVariants } from '.'
+import { type ButtonVariants, buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
   as?: string
+  class?: HTMLAttributes['class']
 }
 
 withDefaults(defineProps<Props>(), {
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/src/lib/registry/default/ui/button/index.ts
index 382c4f4f..34ed003b 100644
--- a/apps/www/src/lib/registry/default/ui/button/index.ts
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
@@ -30,3 +30,5 @@ export const buttonVariants = cva(
     },
   },
 )
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/www/src/lib/registry/default/ui/card/Card.vue b/apps/www/src/lib/registry/default/ui/card/Card.vue
index 3f5e10c7..12dd5ec7 100644
--- a/apps/www/src/lib/registry/default/ui/card/Card.vue
+++ b/apps/www/src/lib/registry/default/ui/card/Card.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardContent.vue b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
index 9dc5a661..785913a1 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardContent.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
index 6f1fc0ee..d5faedd5 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
index 9dc5a661..785913a1 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
index 7422a5ad..03329293 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
index 34f898d6..b93fbea7 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
index 900ca771..3991d00e 100644
--- a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<CheckboxRootProps>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const emitAsProps = useEmitAsProps(emits)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      emitAsProps,
+    }"
     :class="
       cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         $attrs.class ?? '')"
+         props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <Check class="h-4 w-4" />
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
index a0fd96c4..52bff5f2 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { CollapsibleRoot, useEmitAsProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
     <slot :open="open" />
   </CollapsibleRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/Command.vue b/apps/www/src/lib/registry/default/ui/command/Command.vue
index e72cd7cc..b9ae7c71 100644
--- a/apps/www/src/lib/registry/default/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/default/ui/command/Command.vue
@@ -1,20 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxRootProps>()
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
 const emits = defineEmits<ComboboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ComboboxRoot
-    v-bind="forwarded"
-    :open="true"
-    :model-value="''"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
   </ComboboxRoot>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
index ff7747fe..5a3387fa 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEmitAsProps } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
@@ -7,11 +7,11 @@ import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <Dialog v-bind="{ ...props, ...emitsAsProps }">
+  <Dialog v-bind="forwarded">
     <DialogContent class="p-0 overflow-hidden shadow-lg">
       <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">
         <slot />
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
index da609fc5..1295d2a0 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxEmptyProps } from 'radix-vue'
 import { ComboboxEmpty } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxEmptyProps>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="props" :class="cn('py-6 text-center text-sm', $attrs.class ?? '')">
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
   </ComboboxEmpty>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
index 1d994b9a..f5212beb 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxGroupProps } from 'radix-vue'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
   heading?: string
+  class?: HTMLAttributes['class']
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxGroup
-    v-bind="props"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
index 9aef2ae7..4d1a8389 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
@@ -1,24 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Search } from 'lucide-vue-next'
 import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxInputProps>()
-</script>
-
-<script lang="ts">
-export default {
+defineOptions({
   inheritAttrs: false,
-}
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
-      v-bind="{ ...props, ...$attrs }"
+      v-bind="{ ...delegatedProps, ...$attrs }"
       auto-focus
-      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')"
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
index 6d2167be..58641d26 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
 import { ComboboxItem, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxItemProps>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxItem
-    v-bind="{ ...props, ...emitsAsProps }"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
+    v-bind="{ ...delegatedProps, ...emitsAsProps }"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
     @select.prevent
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index be8a46f9..ae901085 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxContent, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxContentProps>()
+const props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
+  <ComboboxContent v-bind="{ ...delegatedProps, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
index 6219e585..477799cc 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxSeparatorProps } from 'radix-vue'
 import { ComboboxSeparator } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxSeparatorProps>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxSeparator
-    v-bind="props"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
index 5ff539ad..cf8ed668 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -9,13 +10,19 @@ import {
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
index 4e201ff0..109aceb1 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -1,30 +1,39 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
   type ContextMenuContentProps,
   ContextMenuPortal,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuContentProps & { class?: string }>()
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ContextMenuPortal>
     <ContextMenuContent
-      :align-offset="props.alignOffset"
+      v-bind="{
+        ...delegatedProps,
+        ...emitsAsProps,
+      }"
       :class="[
         cn(
           'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         ),
       ]"
-      v-bind="forwarded"
     >
       <slot />
     </ContextMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
index 0071251c..d16de420 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
@@ -7,13 +8,19 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
index 3702f395..a10aef12 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuLabel
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class ?? '',
+         inset && 'pl-8', props.class,
       )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
index 67309f09..445016c9 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,23 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
index bf1eca8b..ae55f3a4 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSeparatorProps>()
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ContextMenuSeparator v-bind="props" :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')" />
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index bfdf27bf..40b7a14d 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ContextMenuSubContent
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
     :class="
       cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
index 258a6df7..3afb6668 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
@@ -6,12 +7,18 @@ import {
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuSubTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="[
       cn(
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index c8b64caa..8d3f4f35 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -11,9 +12,15 @@ import {
 import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogContentProps & { class?: string }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
 
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
 const emitsAsProps = useEmitAsProps(emits)
 </script>
 
@@ -23,13 +30,12 @@ const emitsAsProps = useEmitAsProps(emits)
       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
+      v-bind="{ ...delegatedProps, ...emitsAsProps }"
       :class="
         cn(
           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
           props.class,
-        )
-      "
-      v-bind="{ ...props, ...emitsAsProps }"
+        )"
     >
       <slot />
 
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
index 05018228..3887ad03 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogDescription
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
index 734623f2..d297cff6 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogFooterProps {
-  class?: string
-}
-
-const props = defineProps<DialogFooterProps>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
index ad3340bd..bc13a210 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogHeaderProps {
-  class?: string
-}
-
-const props = defineProps<DialogHeaderProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
index 5e748aae..dc5ac5e8 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogTitle
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'text-lg text-foreground font-semibold leading-none tracking-tight',
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index fc815348..9204c8b4 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -9,13 +10,19 @@ import {
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     :class=" cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
index 71e9a9a5..1f667051 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,34 +1,44 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
   DropdownMenuPortal,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: string }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
+      v-bind="{
+        ...delegatedProps,
+        ...emitsAsProps,
+      }"
       :class="[
         cn(
           'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         ),
       ]"
-      v-bind="forwarded"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
index b632e09f..9d9ac60b 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuItem
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
index c94782d7..aae6b269 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & {
-  inset?: boolean
-  class?: string
-}>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuLabel
-    v-bind="props"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 5bdc41f7..4a727904 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -3,18 +3,17 @@ import {
   DropdownMenuRadioGroup,
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
-
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <DropdownMenuRadioGroup v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
index fa031895..f4ba1984 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -9,14 +10,20 @@ import {
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuRadioItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     :class="cn(
       'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
       props.class,
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
index 008520cb..abaeda64 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
index c5dc686c..199e225d 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,22 +1,32 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <DropdownMenuSubContent
-    v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
+    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index e4a77f47..d8059fad 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
@@ -6,12 +7,18 @@ import {
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuSubTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="[
       cn(
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
diff --git a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
index 070c9064..6085f76c 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
@@ -1,21 +1,19 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const { formDescriptionId } = useFormField()
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', className ?? '')"
-    v-bind="rest"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index 6bccf027..ad120be9 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,27 +1,25 @@
 <script lang="ts">
-import { type InjectionKey } from 'vue'
+import type { HTMLAttributes, InjectionKey } from 'vue'
 
 export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
 </script>
 
 <script lang="ts" setup>
-import { provide, useAttrs } from 'vue'
+import { provide } from 'vue'
 import { useId } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const id = useId()
 provide(FORM_ITEM_INJECTION_KEY, id)
-
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
-  <div :class="cn('space-y-2', className ?? '')" v-bind="rest">
+  <div :class="cn('space-y-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
index a85dbc09..31fecdb5 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
@@ -7,10 +7,9 @@ import { cn } from '@/lib/utils'
 defineOptions({
   inheritAttrs: false,
 })
-const props = defineProps<LabelProps>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const { error, formItemId } = useFormField()
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
@@ -18,10 +17,9 @@ const { class: className, ...rest } = useAttrs()
     :class="cn(
       'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
-      className ?? '',
+      props.class,
     )"
     :for="formItemId"
-    v-bind="rest"
   >
     <slot />
   </Label>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
index 2a109d6c..1eca7c5c 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
@@ -1,26 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   HoverCardContent,
   type HoverCardContentProps,
   HoverCardPortal,
-  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: string }>(),
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 
-const forwarded = useForwardProps(props)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <HoverCardPortal>
     <HoverCardContent
-      v-bind="forwarded"
+      v-bind="delegatedProps"
       :class="
         cn(
           'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/src/lib/registry/default/ui/input/Input.vue
index fdaa54eb..39c9cee6 100644
--- a/apps/www/src/lib/registry/default/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/default/ui/input/Input.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')">
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/src/lib/registry/default/ui/label/Label.vue
index e44d139e..b1c9385c 100644
--- a/apps/www/src/lib/registry/default/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<LabelProps & { class?: string }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Label
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'block text-sm tracking-tight font-medium text-foreground text-left',
diff --git a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
index fec5208e..8932f540 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
@@ -1,26 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRootProps & { class?: string }>()
-
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarRoot
-    v-bind="props"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
     :class="
       cn(
         'flex h-10 items-center space-x-1 rounded-md border border-border p-1',
         props.class,
       )
     "
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
   </MenubarRoot>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
index b0274d9b..3f9f1b86 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -1,29 +1,40 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
+  useEmitAsProps,
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 
-const emit = defineEmits<MenubarCheckboxItemEmits>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarCheckboxItem
-    v-bind="props"
+    v-bind="{
+      ...delegatedProps,
+      ...emitsAsProps,
+    }"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       ),
     ]"
-    @update:checked="emit('update:checked', $event)"
-    @select="emit('select', $event)"
   >
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"