refactor: default style finish

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue

@@ -13,8 +13,6 @@ import { cn } from '@/lib/utils'
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
-
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
@@ -28,7 +26,7 @@ const delegatedProps = computed(() => {
       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="{ ...delegatedProps, ...emitsAsProps }"
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
       :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',

apps/www/src/lib/registry/default/ui/alert/Alert.vue

@@ -3,16 +3,14 @@ import type { HTMLAttributes } from 'vue'
 import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  variant?: AlertVariants['variant']
+const props = defineProps<{
   class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
+  variant?: AlertVariants['variant']
+}>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant: props.variant }), props.class)">
+  <div :class="cn(alertVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/default/ui/avatar/Avatar.vue

@@ -4,13 +4,11 @@ import { AvatarRoot } from 'radix-vue'
 import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
   size?: AvatarVariants['size']
   shape?: AvatarVariants['shape']
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   size: 'sm',
   shape: 'circle',
 })

apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue

@@ -8,8 +8,6 @@ import { cn } from '@/lib/utils'
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const emitAsProps = useEmitAsProps(emits)
-
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
   <CheckboxRoot
     v-bind="{
       ...delegatedProps,
-      emitAsProps,
+      ...useEmitAsProps(emits),
     }"
     :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',

apps/www/src/lib/registry/default/ui/command/Command.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
@@ -15,15 +15,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ComboboxRoot
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >

apps/www/src/lib/registry/default/ui/command/CommandGroup.vue

@@ -5,8 +5,8 @@ import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
-  heading?: string
   class?: HTMLAttributes['class']
+  heading?: string
 }>()
 
 const delegatedProps = computed(() => {

apps/www/src/lib/registry/default/ui/command/CommandItem.vue

@@ -7,8 +7,6 @@ import { cn } from '@/lib/utils'
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
-
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
@@ -18,7 +16,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <ComboboxItem
-    v-bind="{ ...delegatedProps, ...emitsAsProps }"
+    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 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
     @select.prevent
   >

apps/www/src/lib/registry/default/ui/command/CommandList.vue

@@ -12,12 +12,10 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="{ ...delegatedProps, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ComboboxContent v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>

apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue

@@ -17,8 +17,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
@@ -26,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
     <ContextMenuContent
       v-bind="{
         ...delegatedProps,
-        ...emitsAsProps,
+        ...useEmitAsProps(emits),
       }"
       :class="[
         cn(

apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue

@@ -18,15 +18,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="[
       cn(

apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue

@@ -16,15 +16,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <ContextMenuSubContent
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="
       cn(

apps/www/src/lib/registry/default/ui/dialog/Dialog.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { DialogRoot } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot>
+  <DialogRoot v-bind="forwarded">
     <slot />
   </DialogRoot>
 </template>

apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue

@@ -20,8 +20,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
@@ -30,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"
     />
     <DialogContent
-      v-bind="{ ...delegatedProps, ...emitsAsProps }"
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
       :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',

apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue

@@ -22,8 +22,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
@@ -31,7 +29,7 @@ const emitsAsProps = useEmitAsProps(emits)
     <DropdownMenuContent
       v-bind="{
         ...delegatedProps,
-        ...emitsAsProps,
+        ...useEmitAsProps(emits),
       }"
       :class="[
         cn(

apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -16,15 +16,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <DropdownMenuSubContent
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :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)"
   >

apps/www/src/lib/registry/default/ui/menubar/Menubar.vue

@@ -16,15 +16,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarRoot
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="
       cn(

apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue

@@ -19,15 +19,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarCheckboxItem
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="[
       cn(

apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue

@@ -17,15 +17,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarItem
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="[
       cn(

apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue

@@ -11,7 +11,6 @@ import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
-
 const emits = defineEmits<MenubarRadioItemEmits>()
 
 const delegatedProps = computed(() => {
@@ -19,15 +18,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <MenubarRadioItem
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="[
       cn(

apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue

@@ -24,8 +24,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
@@ -33,7 +31,7 @@ const emitsAsProps = useEmitAsProps(emits)
     <MenubarSubContent
       v-bind="{
         ...delegatedProps,
-        ...emitsAsProps,
+        ...useEmitAsProps(emits),
       }"
       :class="
         cn(

apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue

@@ -18,15 +18,13 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <NavigationMenuRoot
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
     :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
   >

apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue

@@ -26,14 +26,12 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <PopoverPortal>
     <PopoverContent
-      v-bind="{ ...delegatedProps, ...emitsAsProps, ...$attrs }"
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits), ...$attrs }"
       :class="
         cn(
           'z-50 w-72 rounded-md border bg-popover p-4 text-popover-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',

apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue

@@ -11,8 +11,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
@@ -20,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
     :class="cn('grid gap-2', props.class)"
     v-bind="{
       ...delegatedProps,
-      ...emitsAsProps,
+      ...useEmitAsProps(emits),
     }"
   >
     <slot />

apps/www/src/lib/registry/default/ui/select/SelectContent.vue

@@ -27,14 +27,12 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...delegatedProps, ...emitsAsProps, ...$attrs }" :class="cn(
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits), ...$attrs }" :class="cn(
         'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',

apps/www/src/lib/registry/default/ui/select/SelectLabel.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: string }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>

apps/www/src/lib/registry/default/ui/separator/Separator.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: string }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>

apps/www/src/lib/registry/default/ui/sheet/Sheet.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { DialogRoot } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot>
+  <DialogRoot v-bind="forwarded">
     <slot />
   </DialogRoot>
 </template>

apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -14,15 +15,12 @@ import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
   side?: 'left' | 'right' | 'top' | 'bottom'
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SheetContentProps>()
-
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
-
 const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
@@ -41,6 +39,12 @@ const sheetVariants = cva(
     },
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -49,8 +53,8 @@ const sheetVariants = cva(
       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
-      :class="cn(sheetVariants({ side: props.side }), props.class)"
-      v-bind="{ ...props, ...emitsAsProps }"
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     >
       <slot />
 

apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue

@@ -1,14 +1,21 @@
 <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
     :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogDescription>

apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue

@@ -1,7 +1,8 @@
 <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>

apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue

@@ -1,7 +1,8 @@
 <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>

apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue

@@ -1,14 +1,21 @@
 <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
     :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogTitle>

apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SkeletonProps>()

apps/www/src/lib/registry/default/ui/slider/Slider.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SliderRootProps>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SliderRoot
     :class="cn(
       'relative flex w-full touch-none select-none items-center',
-      $attrs.class ?? '',
+      props.class,
     )"
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
   >
     <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderRange class="absolute h-full bg-primary" />

apps/www/src/lib/registry/default/ui/switch/Switch.vue

@@ -1,22 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SwitchRoot,
   type SwitchRootEmits,
   type SwitchRootProps,
   SwitchThumb,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SwitchRootProps & { class?: string }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SwitchRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SwitchRoot
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
     :class="
       cn(
         'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',

apps/www/src/lib/registry/default/ui/table/Table.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableBody.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableCaption.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableCell.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableEmpty.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import TableRow from './TableRow.vue'
 import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  class?: string
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
   colspan?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
+}>(), {
   colspan: 1,
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
           props.class,
         )
       "
-      :colspan="props.colspan"
+      v-bind="delegatedProps"
     >
       <div class="flex items-center justify-center py-10">
         <slot />

apps/www/src/lib/registry/default/ui/table/TableFooter.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableHead.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableHeader.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/table/TableRow.vue

@@ -1,7 +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>

apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsContentProps & { class?: string }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsContent
     :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </TabsContent>

apps/www/src/lib/registry/default/ui/tabs/TabsList.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsListProps & { class?: string }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsList
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',

apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsTriggerProps & { class?: string }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',

apps/www/src/lib/registry/default/ui/textarea/Textarea.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
+  class?: HTMLAttributes['class']
   defaultValue?: string | number
   modelValue?: string | number
 }>()
@@ -18,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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', $attrs.class ?? '')" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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>

apps/www/src/lib/registry/default/ui/toast/Toast.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
 
 interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
 
 export interface ToastProps extends ToastRootProps {
-  class?: string
+  class?: HTMLAttributes['class']
   variant?: ToastVariantProps['variant']
   'onOpenChange'?: ((value: boolean) => void) | undefined
 };
@@ -19,12 +20,18 @@ import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
 const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ToastRoot
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="cn(toastVariants({ variant: props.variant }), props.class)"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
+    :class="cn(toastVariants({ variant }), props.class)"
     @update:open="onOpenChange"
   >
     <slot />

apps/www/src/lib/registry/default/ui/toast/ToastAction.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastActionProps & { class?: string }>()
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastAction v-bind="props" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
     <slot />
   </ToastAction>
 </template>

apps/www/src/lib/registry/default/ui/toast/ToastClose.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import { ToastClose } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
 import { XIcon } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: string
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastClose v-bind="props" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
     <XIcon class="h-4 w-4" />
   </ToastClose>
 </template>

apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastDescriptionProps & { class?: string }>()
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>

apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastTitleProps & { class?: string }>()
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
     <slot />
   </ToastTitle>
 </template>

apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastViewportProps & { class?: string }>()
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastViewport v-bind="props" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>

apps/www/src/lib/registry/default/ui/toggle/Toggle.vue

@@ -1,23 +1,20 @@
 <script setup lang="ts">
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import { Toggle, useEmitAsProps } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed, useAttrs } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
 
 interface Props extends ToggleProps {
+  class?: HTMLAttributes['class']
   variant?: ToggleVariantProps['variant']
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -25,24 +22,20 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emits = defineEmits<ToggleEmits>()
 
-const toggleProps = computed(() => {
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, disabled, ...otherProps } = props
-  return otherProps
-})
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
 
-const { class: className, ...rest } = useAttrs()
-const forwarded = useForwardPropsEmits(toggleProps.value, emits)
+  return delegated
+})
 </script>
 
 <template>
   <Toggle
     v-bind="{
-      ...forwarded,
-      ...rest,
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
     }"
-    :class="cn(toggleVariants({ variant, size }), className ?? '')"
-    :disabled="props.disabled"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
   >
     <slot />
   </Toggle>

apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<TooltipContentProps>(), {
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
   sideOffset: 4,
 })
+
 const emits = defineEmits<TooltipContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TooltipPortal>
-    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
+    <TooltipContent v-bind="{ ...delegatedProps, ...useEmitAsProps(emits), ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
       <slot />
     </TooltipContent>
   </TooltipPortal>