refactor: update

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue

@@ -1,16 +1,23 @@
 <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 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
         props.class,
       )
     "

apps/www/src/lib/registry/new-york/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"
+    v-bind="delegatedProps"
-    :class="cn('border-b', props.class ?? '')"
+    :class="cn('border-b', props.class)"
   >
     <slot />
   </AccordionItem>

apps/www/src/lib/registry/new-york/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 { ChevronDownIcon } from '@radix-icons/vue'
 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 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',

apps/www/src/lib/registry/new-york/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/new-york/ui/button'
+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>

apps/www/src/lib/registry/new-york/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/new-york/ui/button'
+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>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -9,23 +10,26 @@ 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>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      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"
+      class="fixed inset-0 z-50 bg-black/80 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, ...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',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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',
           props.class,
         )
       "

apps/www/src/lib/registry/new-york/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
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
-    :as-child="props.asChild"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </AlertDialogDescription>

apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "

apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>

apps/www/src/lib/registry/new-york/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 />

apps/www/src/lib/registry/new-york/ui/alert/Alert.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { alertVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
+const props = defineProps<{
-  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
+  class?: HTMLAttributes['class']
-  class?: string
+  variant?: AlertVariants['variant']
-}
+}>()
-
-const props = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="cn(alertVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/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({
+const props = defineProps<{
-  class: String,
+  class?: HTMLAttributes['class']
-})
+}>()
 </script>
 
 <template>

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/ui/alert/index.ts

@@ -1,11 +1,11 @@
-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'
 export { default as AlertDescription } from './AlertDescription.vue'
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {
@@ -19,3 +19,5 @@ export const alertVariants = cva(
     },
   },
 )
+
+export type AlertVariants = VariantProps<typeof alertVariants>

apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue

@@ -1,15 +1,14 @@
 <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 {
+const props = withDefaults(defineProps<{
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
+  class?: HTMLAttributes['class']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
+  size?: AvatarVariants['size']
-  class?: string
+  shape?: AvatarVariants['shape']
-}
+}>(), {
-
-const props = withDefaults(defineProps<Props>(), {
   size: 'sm',
   shape: 'circle',
 })

apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue

@@ -5,5 +5,5 @@ const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full aspect-square" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
 </template>

apps/www/src/lib/registry/new-york/ui/avatar/index.ts

@@ -1,11 +1,11 @@
-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'
 export { default as AvatarFallback } from './AvatarFallback.vue'
 
 export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-muted overflow-hidden',
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
   {
     variants: {
       size: {
@@ -20,3 +20,5 @@ export const avatarVariant = cva(
     },
   },
 )
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>

apps/www/src/lib/registry/new-york/ui/badge/Badge.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
-import { badgeVariants } from '.'
+import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
+const props = defineProps<{
-
+  variant?: BadgeVariants['variant']
-interface Props {
+  class?: HTMLAttributes['class']
-  variant?: BadgeVariantProps['variant']
+}>()
-}
-defineProps<Props>()
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/badge/index.ts

@@ -1,9 +1,9 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -21,3 +21,5 @@ export const badgeVariants = cva(
     },
   },
 )
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

apps/www/src/lib/registry/new-york/ui/button/Button.vue

@@ -1,15 +1,17 @@
 <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']
+  variant?: ButtonVariants['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  size?: ButtonVariants['size']
   as?: string
+  class?: HTMLAttributes['class']
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   as: 'button',
 })
 </script>
@@ -18,7 +20,7 @@ withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
   >
     <slot />
   </Primitive>

apps/www/src/lib/registry/new-york/ui/button/index.ts

@@ -1,18 +1,17 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-            'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
@@ -31,3 +30,5 @@ export const buttonVariants = cva(
     },
   },
 )
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

apps/www/src/lib/registry/new-york/ui/card/Card.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'rounded-lg border bg-card text-card-foreground shadow',
+        'rounded-xl border bg-card text-card-foreground shadow',
         props.class,
       )
     "

apps/www/src/lib/registry/new-york/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({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>

apps/www/src/lib/registry/new-york/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({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>

apps/www/src/lib/registry/new-york/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({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>

apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/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({
+const props = defineProps<{
-  class: {
+  class?: HTMLAttributes['class']
-    type: String,
+}>()
-    default: '',
-  },
-})
 </script>
 
 <template>

apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue

@@ -1,21 +1,29 @@
 <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 { CheckIcon } from '@radix-icons/vue'
 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 delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...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',
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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">
       <CheckIcon class="h-4 w-4" />

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/ui/command/Command.vue

@@ -1,19 +1,29 @@
 <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 } 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
+})
 </script>
 
 <template>
   <ComboboxRoot
-    v-bind="forwarded"
+    v-bind="{
-    :open="true"
+      ...delegatedProps,
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
+      ...useEmitAsProps(emits),
+    }"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
   </ComboboxRoot>

apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { useEmitAsProps } from 'radix-vue'
 import Command from './Command.vue'
-import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
+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="overflow-hidden p-0 shadow-lg">
+    <DialogContent class="overflow-hidden p-0">
       <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 />
       </Command>

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/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 & {
+  class?: HTMLAttributes['class']
   heading?: string
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxGroup
-    v-bind="props"
+    v-bind="delegatedProps"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}

apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue

@@ -1,24 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
 import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxInputProps>()
+defineOptions({
-</script>
-
-<script lang="ts">
-export default {
   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>
     <MagnifyingGlassIcon 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-10 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-10 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>

apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue

@@ -1,18 +1,23 @@
 <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 }"
+    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', $attrs.class ?? '')"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
     @select.prevent
   >
     <slot />

apps/www/src/lib/registry/new-york/ui/command/CommandList.vue

@@ -1,16 +1,21 @@
 <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
+})
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.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/new-york/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"
+    v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/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 { CheckIcon } from '@radix-icons/vue'
 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',

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

@@ -1,30 +1,37 @@
 <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
+})
 </script>
 
 <template>
   <ContextMenuPortal>
     <ContextMenuContent
-      :align-offset="props.alignOffset"
+      v-bind="{
+        ...delegatedProps,
+        ...useEmitAsProps(emits),
+      }"
       :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',
+          '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 />
     </ContextMenuContent>

apps/www/src/lib/registry/new-york/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',

apps/www/src/lib/registry/new-york/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 />

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

@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { DotFilledIcon } from '@radix-icons/vue'
 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
+})
 </script>
 
 <template>
   <ContextMenuRadioItem
-    v-bind="forwarded"
+    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',

apps/www/src/lib/registry/new-york/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>

apps/www/src/lib/registry/new-york/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>

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

@@ -1,21 +1,29 @@
 <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
+})
 </script>
 
 <template>
   <ContextMenuSubContent
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
     :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',

apps/www/src/lib/registry/new-york/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 { ChevronRightIcon } from '@radix-icons/vue'
 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',

apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -11,30 +12,33 @@ import {
 import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogContentProps & { class?: string }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      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"
+      class="fixed inset-0 z-50 bg-black/80  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, ...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',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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',
           props.class,
-        )
+        )"
-      "
-      v-bind="{ ...props, ...emitsAsProps }"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
         <Cross2Icon class="w-4 h-4" />
         <span class="sr-only">Close</span>

apps/www/src/lib/registry/new-york/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 />

apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogFooterProps {
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-  class?: string
-}
-
-const props = defineProps<DialogFooterProps>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "

apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogHeaderProps {
+const props = defineProps<{
-  class?: string
+  class?: HTMLAttributes['class']
-}
+}>()
-
-const props = defineProps<DialogHeaderProps>()
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>

apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue

@@ -1,16 +1,23 @@
 <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',
+        'text-lg font-semibold leading-none tracking-tight',
         props.class,
       )
     "

apps/www/src/lib/registry/new-york/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 { CheckIcon } from '@radix-icons/vue'
 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,

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

@@ -1,34 +1,43 @@
 <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
+})
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
+      v-bind="{
+        ...delegatedProps,
+        ...useEmitAsProps(emits),
+      }"
       :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',
+          '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>

apps/www/src/lib/registry/new-york/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',

apps/www/src/lib/registry/new-york/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 & {
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
-  inset?: boolean
+
-  class?: string
+const delegatedProps = computed(() => {
-}>()
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuLabel
-    v-bind="props"
+    v-bind="delegatedProps"
-    :class="
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
-      cn('px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>

apps/www/src/lib/registry/new-york/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
+  <DropdownMenuRadioGroup v-bind="forwarded">
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
     <slot />
   </DropdownMenuRadioGroup>
 </template>

apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -9,16 +10,22 @@ import {
 import { DotFilledIcon } from '@radix-icons/vue'
 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',
+      '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,
     )"
   >

apps/www/src/lib/registry/new-york/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>

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

@@ -1,22 +1,30 @@
 <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
+})
 </script>
 
 <template>
   <DropdownMenuSubContent
-    v-bind="forwarded"
+    v-bind="{
-    :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 ?? '')"
+      ...delegatedProps,
+      ...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)"
   >
     <slot />
   </DropdownMenuSubContent>

apps/www/src/lib/registry/new-york/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 { ChevronRightIcon } from '@radix-icons/vue'
 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',

apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
 const { formDescriptionId } = useFormField()
 </script>
 
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')"
+    :class="cn('text-[0.8rem] text-muted-foreground', props.class)"
   >
     <slot />
   </p>

apps/www/src/lib/registry/new-york/ui/form/FormItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type InjectionKey } from 'vue'
+import type { HTMLAttributes, InjectionKey } from 'vue'
 
 export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
@@ -10,12 +10,16 @@ import { provide } from 'vue'
 import { useId } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
 const id = useId()
 provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>
-  <div :class="cn('space-y-2', $attrs.class ?? '')">
+  <div :class="cn('space-y-2', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<LabelProps>()
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const { error, formItemId } = useFormField()
 </script>
@@ -13,7 +17,7 @@ const { error, formItemId } = useFormField()
     :class="cn(
       'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
-      $attrs.class ?? '',
+      props.class,
     )"
     :for="formItemId"
   >

apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue

@@ -11,6 +11,6 @@ const { name, formMessageId } = useFormField()
     :id="formMessageId"
     as="p"
     :name="toValue(name)"
-    class="text-[0.8rem] font-medium text-destructive"
+    class="text-sm font-medium text-destructive"
   />
 </template>

apps/www/src/lib/registry/new-york/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',

apps/www/src/lib/registry/new-york/ui/input/Input.vue

@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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>

apps/www/src/lib/registry/new-york/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',

apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue

@@ -1,26 +1,35 @@
 <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
+})
 </script>
 
 <template>
   <MenubarRoot
-    v-bind="props"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
     :class="
       cn(
-        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        '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>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue

@@ -1,34 +1,43 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
+  useEmitAsProps,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/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
+})
 </script>
 
 <template>
   <MenubarCheckboxItem
-    v-bind="props"
+    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',
         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"
     >
-      <CheckIcon class="w-4 h-4" />
+      <Check class="w-4 h-4" />
     </MenubarItemIndicator>
     <slot />
   </MenubarCheckboxItem>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
-  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<MenubarContentProps & { class?: string }>(),
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     align: 'start',
     alignOffset: -4,
     sideOffset: 8,
   },
 )
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarContent
-      v-bind="forwarded"
+      v-bind="delegatedProps"
       :class="
         cn(
           'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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/new-york/ui/menubar/MenubarItem.vue

@@ -1,19 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 
 const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarItem
-    v-bind="props"
+    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',
@@ -21,7 +32,6 @@ const emits = defineEmits<MenubarItemEmits>()
         props.class,
       ),
     ]"
-    @select="emits('select', $event)"
   >
     <slot />
   </MenubarItem>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue

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

apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue

@@ -3,18 +3,18 @@ import {
   MenubarRadioGroup,
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<MenubarRadioGroupProps>()
 
 const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <MenubarRadioGroup
+  <MenubarRadioGroup v-bind="forwarded">
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
     <slot />
   </MenubarRadioGroup>
 </template>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue

@@ -1,33 +1,42 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
+  useEmitAsProps,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRadioItemProps & { class?: string }>()
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
-
 const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarRadioItem
-    v-bind="props"
+    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',
         props.class,
       ),
     ]"
-    @select="emits('select', $event)"
   >
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
     >
-      <DotFilledIcon class="h-4 w-4 fill-current" />
+      <Circle class="h-2 w-2 fill-curren" />
     </MenubarItemIndicator>
 
     <slot />

apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSeparatorProps>()
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')" v-bind="props" />
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', props.class)" v-bind="delegatedProps" />
 </template>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.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('text-xs ml-auto tracking-widest opacity-50', $attrs.class ?? '')">
+  <span :class="cn('text-xxs ml-auto tracking-widest opacity-50', props.class)">
     <slot />
   </span>
 </template>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarPortal,
   MenubarSubContent,
   type MenubarSubContentEmits,
   type MenubarSubContentProps,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<MenubarSubContentProps & { class?: string }>(),
+  defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 2,
     alignOffset: 0,
@@ -16,17 +18,21 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarSubContent
-      :loop="props.loop"
+      v-bind="{
-      :as-child="props.asChild"
+        ...delegatedProps,
-      :side-offset="props.sideOffset"
+        ...useEmitAsProps(emits),
-      :side="props.side"
+      }"
-      :align="props.align"
-      :align-offset="props.alignOffset"
       :class="
         cn(
           'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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/new-york/ui/menubar/MenubarSubTrigger.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarSubTrigger
-    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',
@@ -18,6 +25,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
     ]"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </MenubarSubTrigger>
 </template>

apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarTriggerProps & { class?: string }>()
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <MenubarTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         props.class,
       )
     "

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

@@ -1,22 +1,32 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
+  useEmitAsProps,
 } from 'radix-vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuRootProps & { class?: string }>()
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <NavigationMenuRoot
-    v-bind="props"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
     :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
     <NavigationMenuViewport />

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuContent,
   type NavigationMenuContentEmits,
@@ -7,14 +8,20 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuContentProps & { class?: string }>()
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <NavigationMenuContent
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     :class="
       cn(
         'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuIndicatorProps>()
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <NavigationMenuIndicator
-    v-bind="props"
+    v-bind="delegatedProps"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
   >
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue

@@ -3,15 +3,17 @@ import {
   NavigationMenuLink,
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<NavigationMenuLinkProps>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <NavigationMenuLink v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <NavigationMenuLink v-bind="forwarded">
     <slot />
   </NavigationMenuLink>
 </template>

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuListProps & { class?: string }>()
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <NavigationMenuList
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'group flex flex-1 list-none items-center justify-center space-x-1',

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -1,22 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
 } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import { navigationMenuTriggerStyle } from '.'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <NavigationMenuTrigger
+    v-bind="delegatedProps"
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-    v-bind="props"
   >
     <slot />
-    <ChevronDownIcon
+    <ChevronDown
       class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />

apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuViewportProps>()
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <div class="absolute left-0 top-full flex justify-center">
     <NavigationMenuViewport
-      v-bind="props"
+      v-bind="delegatedProps"
       :class="
         cn(
           'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-          $attrs.class ?? '',
+          props.class,
         )
       "
     />

apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts

@@ -8,5 +8,5 @@ export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
 export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
 
 export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 )

apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-defineOptions({
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
-  inheritAttrs: false,
-})
 
-const props = defineProps<PaginationEllipsisProps>()
+const delegatedProps = computed(() => {
-const forwarded = useForwardProps(props)
+  const { class: _, ...delegated } = props
-const { class: className, ...rest } = useAttrs()
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationEllipsis :class="cn('w-9 h-9 flex items-center justify-center', className ?? '')" v-bind="{ ...forwarded, ...rest }">
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
-      <DotsHorizontalIcon />
+      <MoreHorizontal />
     </slot>
   </PaginationEllipsis>
 </template>

apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
-import { DoubleArrowLeftIcon } from '@radix-icons/vue'
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
+import { ChevronsLeft } from 'lucide-vue-next'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
+} from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationFirstProps>(), {
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationFirst v-bind="forwarded">
+  <PaginationFirst v-bind="delegatedProps">
-    <Button class="w-9 h-9 p-0" variant="outline">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowLeftIcon />
+        <ChevronsLeft class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationFirst>

apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'
-import { DoubleArrowRightIcon } from '@radix-icons/vue'
+import { ChevronsRight } from 'lucide-vue-next'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
+} from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationLastProps>(), {
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationLast v-bind="forwarded">
+  <PaginationLast v-bind="delegatedProps">
-    <Button class="w-9 h-9 p-0" variant="outline">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowRightIcon />
+        <ChevronsRight class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationLast>

apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { PaginationNext, type PaginationNextProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
+} from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationNextProps>(), {
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationNext v-bind="forwarded">
+  <PaginationNext v-bind="delegatedProps">
-    <Button class="w-9 h-9 p-0" variant="outline">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRightIcon />
+        <ChevronRight class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationNext>

apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
+} from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationPrevProps>(), {
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationPrev v-bind="forwarded">
+  <PaginationPrev v-bind="delegatedProps">
-    <Button class="w-9 h-9 p-0" variant="outline">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeftIcon />
+        <ChevronLeft class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationPrev>

apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue

@@ -1,28 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   PopoverContent,
   type PopoverContentEmits,
   type PopoverContentProps,
   PopoverPortal,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: string }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 const emits = defineEmits<PopoverContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <PopoverPortal>
     <PopoverContent
-      v-bind="{ ...forwarded, ...$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/new-york/ui/popover/PopoverTrigger.vue

@@ -5,7 +5,7 @@ const props = defineProps<PopoverTriggerProps>()
 </script>
 
 <template>
-  <PopoverTrigger v-bind="props" class="">
+  <PopoverTrigger v-bind="props">
     <slot />
   </PopoverTrigger>
 </template>

apps/www/src/lib/registry/new-york/ui/progress/Progress.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ProgressIndicator,
   ProgressRoot,
@@ -7,31 +8,32 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: string }>(),
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
   {
     class: '',
     modelValue: 0,
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ProgressRoot
+    v-bind="delegatedProps"
     :class="
       cn(
-        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
         props.class,
       )
     "
-    v-bind="props"
   >
     <ProgressIndicator
-      :class="
+      class="h-full w-full flex-1 duration-300 bg-foreground transition-all"
-        cn(
-          'h-full w-full flex-1 bg-primary transition-all',
-          props.class,
-        )
-      "
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>

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

@@ -1,15 +1,26 @@
 <script setup lang="ts">
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupRootProps & { class?: string }>()
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
+  >
     <slot />
   </RadioGroupRoot>
 </template>

apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue

@@ -1,29 +1,36 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   type RadioGroupItemProps,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupItemProps & { class?: string }>()
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <RadioGroupItem
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
   >
     <RadioGroupIndicator
-      :class="cn('flex items-center justify-center', props.class)"
+      class="flex items-center justify-center"
     >
-      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
+      <Circle class="w-2.5 h-2.5 text-foreground" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>

apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -8,19 +9,17 @@ import {
 import ScrollBar from './ScrollBar.vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
-  defineProps<
+
-    ScrollAreaRootProps & { class?: string }
+const delegatedProps = computed(() => {
-  >(),
+  const { class: _, ...delegated } = props
-  {
+
-    class: '',
+  return delegated
-    orientation: 'vertical',
+})
-  },
-)
 </script>
 
 <template>
-  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>