From 71e6b9c1c893a922ed2a305e33099ef3d1fba348 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Fri, 12 Jan 2024 01:24:55 +0330
Subject: [PATCH] refactor: update

---
 .../new-york/ui/accordion/Accordion.vue       |  6 ++--
 .../ui/accordion/AccordionContent.vue         | 13 +++++--
 .../new-york/ui/accordion/AccordionItem.vue   | 13 +++++--
 .../ui/accordion/AccordionTrigger.vue         | 11 ++++--
 .../ui/alert-dialog/AlertDialogAction.vue     | 13 +++++--
 .../ui/alert-dialog/AlertDialogCancel.vue     | 13 +++++--
 .../ui/alert-dialog/AlertDialogContent.vue    | 16 +++++----
 .../alert-dialog/AlertDialogDescription.vue   | 13 +++++--
 .../ui/alert-dialog/AlertDialogFooter.vue     | 12 +++----
 .../ui/alert-dialog/AlertDialogHeader.vue     | 12 +++----
 .../ui/alert-dialog/AlertDialogTitle.vue      | 11 ++++--
 .../lib/registry/new-york/ui/alert/Alert.vue  | 15 ++++----
 .../new-york/ui/alert/AlertDescription.vue    |  7 ++--
 .../registry/new-york/ui/alert/AlertTitle.vue |  7 +++-
 .../lib/registry/new-york/ui/alert/index.ts   |  6 ++--
 .../registry/new-york/ui/avatar/Avatar.vue    | 15 ++++----
 .../new-york/ui/avatar/AvatarImage.vue        |  2 +-
 .../lib/registry/new-york/ui/avatar/index.ts  |  6 ++--
 .../lib/registry/new-york/ui/badge/Badge.vue  | 16 ++++-----
 .../lib/registry/new-york/ui/badge/index.ts   |  6 ++--
 .../registry/new-york/ui/button/Button.vue    | 12 ++++---
 .../lib/registry/new-york/ui/button/index.ts  | 15 ++++----
 .../lib/registry/new-york/ui/card/Card.vue    | 12 +++----
 .../registry/new-york/ui/card/CardContent.vue | 10 +++---
 .../new-york/ui/card/CardDescription.vue      | 10 +++---
 .../registry/new-york/ui/card/CardFooter.vue  | 10 +++---
 .../registry/new-york/ui/card/CardHeader.vue  | 12 +++----
 .../registry/new-york/ui/card/CardTitle.vue   | 10 +++---
 .../new-york/ui/checkbox/Checkbox.vue         | 20 +++++++----
 .../new-york/ui/collapsible/Collapsible.vue   |  6 ++--
 .../registry/new-york/ui/command/Command.vue  | 22 ++++++++----
 .../new-york/ui/command/CommandDialog.vue     | 10 +++---
 .../new-york/ui/command/CommandEmpty.vue      | 11 ++++--
 .../new-york/ui/command/CommandGroup.vue      | 12 +++++--
 .../new-york/ui/command/CommandInput.vue      | 23 +++++++-----
 .../new-york/ui/command/CommandItem.vue       | 13 ++++---
 .../new-york/ui/command/CommandList.vue       | 13 ++++---
 .../new-york/ui/command/CommandSeparator.vue  | 13 +++++--
 .../new-york/ui/command/CommandShortcut.vue   |  7 +++-
 .../context-menu/ContextMenuCheckboxItem.vue  | 11 ++++--
 .../ui/context-menu/ContextMenuContent.vue    | 19 ++++++----
 .../ui/context-menu/ContextMenuItem.vue       | 11 ++++--
 .../ui/context-menu/ContextMenuLabel.vue      | 13 +++++--
 .../ui/context-menu/ContextMenuRadioItem.vue  | 16 ++++++---
 .../ui/context-menu/ContextMenuSeparator.vue  | 11 ++++--
 .../ui/context-menu/ContextMenuShortcut.vue   |  7 +++-
 .../ui/context-menu/ContextMenuSubContent.vue | 16 ++++++---
 .../ui/context-menu/ContextMenuSubTrigger.vue | 11 ++++--
 .../new-york/ui/dialog/DialogContent.vue      | 20 ++++++-----
 .../new-york/ui/dialog/DialogDescription.vue  | 11 ++++--
 .../new-york/ui/dialog/DialogFooter.vue       |  9 ++---
 .../new-york/ui/dialog/DialogHeader.vue       | 11 +++---
 .../new-york/ui/dialog/DialogTitle.vue        | 13 +++++--
 .../DropdownMenuCheckboxItem.vue              | 11 ++++--
 .../ui/dropdown-menu/DropdownMenuContent.vue  | 19 +++++++---
 .../ui/dropdown-menu/DropdownMenuItem.vue     | 11 ++++--
 .../ui/dropdown-menu/DropdownMenuLabel.vue    | 18 +++++-----
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  9 +++--
 .../dropdown-menu/DropdownMenuRadioItem.vue   | 13 +++++--
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |  7 +++-
 .../dropdown-menu/DropdownMenuSubContent.vue  | 18 +++++++---
 .../dropdown-menu/DropdownMenuSubTrigger.vue  | 11 ++++--
 .../new-york/ui/form/FormDescription.vue      |  7 +++-
 .../registry/new-york/ui/form/FormItem.vue    |  8 +++--
 .../registry/new-york/ui/form/FormLabel.vue   |  8 +++--
 .../registry/new-york/ui/form/FormMessage.vue |  2 +-
 .../ui/hover-card/HoverCardContent.vue        | 12 ++++---
 .../lib/registry/new-york/ui/input/Input.vue  |  2 +-
 .../lib/registry/new-york/ui/label/Label.vue  | 11 ++++--
 .../registry/new-york/ui/menubar/Menubar.vue  | 19 +++++++---
 .../ui/menubar/MenubarCheckboxItem.vue        | 23 ++++++++----
 .../new-york/ui/menubar/MenubarContent.vue    | 13 ++++---
 .../new-york/ui/menubar/MenubarItem.vue       | 16 +++++++--
 .../new-york/ui/menubar/MenubarLabel.vue      |  3 +-
 .../new-york/ui/menubar/MenubarRadioGroup.vue |  8 ++---
 .../new-york/ui/menubar/MenubarRadioItem.vue  | 21 +++++++----
 .../new-york/ui/menubar/MenubarSeparator.vue  | 11 ++++--
 .../new-york/ui/menubar/MenubarShortcut.vue   |  7 +++-
 .../new-york/ui/menubar/MenubarSubContent.vue | 20 +++++++----
 .../new-york/ui/menubar/MenubarSubTrigger.vue | 15 +++++---
 .../new-york/ui/menubar/MenubarTrigger.vue    | 13 +++++--
 .../ui/navigation-menu/NavigationMenu.vue     | 16 +++++++--
 .../navigation-menu/NavigationMenuContent.vue | 11 ++++--
 .../NavigationMenuIndicator.vue               | 13 +++++--
 .../ui/navigation-menu/NavigationMenuLink.vue |  6 ++--
 .../ui/navigation-menu/NavigationMenuList.vue | 11 ++++--
 .../navigation-menu/NavigationMenuTrigger.vue | 15 +++++---
 .../NavigationMenuViewport.vue                | 13 +++++--
 .../new-york/ui/navigation-menu/index.ts      |  2 +-
 .../ui/pagination/PaginationEllipsis.vue      | 22 ++++++------
 .../ui/pagination/PaginationFirst.vue         | 23 +++++++-----
 .../new-york/ui/pagination/PaginationLast.vue | 21 +++++++----
 .../new-york/ui/pagination/PaginationNext.vue | 23 +++++++-----
 .../new-york/ui/pagination/PaginationPrev.vue | 23 +++++++-----
 .../new-york/ui/popover/PopoverContent.vue    | 17 ++++++---
 .../new-york/ui/popover/PopoverTrigger.vue    |  2 +-
 .../new-york/ui/progress/Progress.vue         | 20 ++++++-----
 .../new-york/ui/radio-group/RadioGroup.vue    | 19 +++++++---
 .../ui/radio-group/RadioGroupItem.vue         | 19 ++++++----
 .../new-york/ui/scroll-area/ScrollArea.vue    | 21 ++++++-----
 .../new-york/ui/scroll-area/ScrollBar.vue     | 13 +++++--
 .../new-york/ui/select/SelectContent.vue      | 36 +++++++++++--------
 .../new-york/ui/select/SelectGroup.vue        | 11 ++++--
 .../new-york/ui/select/SelectItem.vue         | 15 +++++---
 .../new-york/ui/select/SelectLabel.vue        |  3 +-
 .../new-york/ui/select/SelectSeparator.vue    | 11 ++++--
 .../new-york/ui/select/SelectTrigger.vue      | 17 ++++++---
 .../new-york/ui/separator/Separator.vue       |  3 +-
 .../lib/registry/new-york/ui/sheet/Sheet.vue  |  9 +++--
 .../new-york/ui/sheet/SheetContent.vue        | 20 ++++++-----
 .../new-york/ui/sheet/SheetDescription.vue    | 11 ++++--
 .../new-york/ui/sheet/SheetFooter.vue         |  3 +-
 .../new-york/ui/sheet/SheetHeader.vue         |  3 +-
 .../registry/new-york/ui/sheet/SheetTitle.vue | 11 ++++--
 .../new-york/ui/skeleton/Skeleton.vue         |  3 +-
 .../registry/new-york/ui/slider/Slider.vue    | 17 ++++++---
 .../registry/new-york/ui/switch/Switch.vue    | 20 +++++++----
 .../lib/registry/new-york/ui/table/Table.vue  |  5 ++-
 .../registry/new-york/ui/table/TableBody.vue  |  5 ++-
 .../new-york/ui/table/TableCaption.vue        |  5 ++-
 .../registry/new-york/ui/table/TableCell.vue  |  7 ++--
 .../registry/new-york/ui/table/TableEmpty.vue | 18 ++++++----
 .../new-york/ui/table/TableFooter.vue         |  5 ++-
 .../registry/new-york/ui/table/TableHead.vue  |  7 ++--
 .../new-york/ui/table/TableHeader.vue         |  5 ++-
 .../registry/new-york/ui/table/TableRow.vue   |  5 ++-
 .../registry/new-york/ui/tabs/TabsContent.vue | 11 ++++--
 .../registry/new-york/ui/tabs/TabsList.vue    | 13 +++++--
 .../registry/new-york/ui/tabs/TabsTrigger.vue | 13 +++++--
 .../new-york/ui/textarea/Textarea.vue         |  4 ++-
 .../lib/registry/new-york/ui/toast/Toast.vue  | 13 +++++--
 .../new-york/ui/toast/ToastAction.vue         | 11 ++++--
 .../registry/new-york/ui/toast/ToastClose.vue | 19 ++++++----
 .../new-york/ui/toast/ToastDescription.vue    | 11 ++++--
 .../registry/new-york/ui/toast/ToastTitle.vue | 11 ++++--
 .../new-york/ui/toast/ToastViewport.vue       | 11 ++++--
 .../registry/new-york/ui/toggle/Toggle.vue    | 27 ++++++--------
 .../lib/registry/new-york/ui/toggle/index.ts  | 10 +++---
 .../new-york/ui/tooltip/TooltipContent.vue    | 18 +++++++---
 .../new-york/ui/tooltip/TooltipTrigger.vue    |  2 +-
 140 files changed, 1166 insertions(+), 542 deletions(-)

diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
index 1bfac8de..8ce8571b 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
index 10703dec..2178ff4b 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
+++ b/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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
index c78bf5aa..9cfa7e0f 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
+++ b/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"
-    :class="cn('border-b', props.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('border-b', props.class)"
   >
     <slot />
   </AccordionItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
index 264aa7f6..ad9851eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
index b7898320..cd87a927 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
index 33305f27..d42179c4 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index 54d1f4e0..261ead70 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/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,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
index 7ff155e6..9682cbb1 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
+++ b/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)"
-    :as-child="props.asChild"
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </AlertDialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
index de4af93b..55d0a0eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..c61c4495 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
index 9b6491f2..cb5d9fb8 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
+++ b/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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
index b95d5c89..ae96548d 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
+++ b/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 {
-  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
-  class?: string
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="cn(alertVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
index a539b631..2971a877 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
+++ b/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({
-  class: String,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
index c5dd22c2..e28dd37e 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
index 499ee68a..765f704d 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/index.ts
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
index 39f71b65..5b7b9fbf 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
+++ b/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 {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
   size: 'sm',
   shape: 'circle',
 })
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
index 28861feb..43499fa2 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts b/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
index 147e9d2a..c4af1a66 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue b/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
index b459c145..2e8bdffa 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
+++ b/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 { badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
-
-interface Props {
-  variant?: BadgeVariantProps['variant']
-}
-defineProps<Props>()
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/index.ts b/apps/www/src/lib/registry/new-york/ui/badge/index.ts
index 6bcca9b1..7c61fc64 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/index.ts
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/Button.vue b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
index 5a34b1b8..a7641026 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/Button.vue
+++ b/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']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariants['variant']
+  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>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
index aa543186..cf3d4741 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -1,20 +1,19 @@
-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:
-            'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
-            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          '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',
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
@@ -31,3 +30,5 @@ export const buttonVariants = cva(
     },
   },
 )
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/Card.vue b/apps/www/src/lib/registry/new-york/ui/card/Card.vue
index d39baad7..94b69033 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/Card.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue b/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
index 9dc5a661..785913a1 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue b/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
index 6f1fc0ee..d5faedd5 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue b/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
index fb1205b9..1ed2efe5 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue b/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
index 7422a5ad..951d227e 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </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>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue b/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
index b5c27b34..fc302e25 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
+++ b/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({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
index 33d498cc..e4b3b104 100644
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/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',
-         $attrs.class ?? '')"
+      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',
+         props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <CheckIcon class="h-4 w-4" />
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
index a0fd96c4..52bff5f2 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/Command.vue b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
index 632ee8d9..c335ee48 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/Command.vue
+++ b/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"
-    :open="true"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
   </ComboboxRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
index 7a5e3ff8..ae9c468d 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
+++ b/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 }">
-    <DialogContent class="overflow-hidden p-0 shadow-lg">
+  <Dialog v-bind="forwarded">
+    <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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
index da609fc5..1295d2a0 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
index 1d994b9a..ba6433e5 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
+++ b/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"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :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 }}
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
index e8a809fd..00693540 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
+++ b/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>()
-</script>
-
-<script lang="ts">
-export default {
+defineOptions({
   inheritAttrs: false,
-}
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
index 6d2167be..c4ad755f 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
+++ b/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 }"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
+    :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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index be8a46f9..f3854c9e 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
index 6219e585..477799cc 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
+++ b/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"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index aca044cf..79ee6b40 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index 4e201ff0..710f5dbd 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
index 0071251c..d16de420 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
index 3702f395..a10aef12 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
+++ b/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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index 298e6f77..e89e32ed 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
index bf1eca8b..ae55f3a4 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index bfdf27bf..33e8e483 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 6469f5f2..423f46f7 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index 5ca33e38..f3cddbe5 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
index 05018228..3887ad03 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
+++ b/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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
index 734623f2..ac2d0c18 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
+++ b/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 {
-  class?: string
-}
-
-const props = defineProps<DialogFooterProps>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
index ad3340bd..b2c9085d 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
+++ b/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 {
-  class?: string
-}
-
-const props = defineProps<DialogHeaderProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </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>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
index 5e748aae..649f90a3 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
+++ b/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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 9fe6e511..08576545 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/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,
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 71e9a9a5..e44102d6 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
index b632e09f..9d9ac60b 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
index c94782d7..aae6b269 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/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 & {
-  inset?: boolean
-  class?: string
-}>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DropdownMenuLabel
-    v-bind="props"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 5bdc41f7..4a727904 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/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
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <DropdownMenuRadioGroup v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c37cf67a..52378d49 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/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,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
index 008520cb..abaeda64 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index c5dc686c..61e26044 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/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"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
+    v-bind="{
+      ...delegatedProps,
+      ...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>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 9dfe76d5..c5b73456 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
index fed2ca34..3df871c2 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index 2e5feaf1..ad120be9 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
index 84f95ae4..31fecdb5 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
+++ b/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"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue b/apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue
index 7d6cbc92..308755e4 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
index 2a109d6c..1eca7c5c 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/input/Input.vue b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
index a0e7654e..39c9cee6 100644
--- a/apps/www/src/lib/registry/new-york/ui/input/Input.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
index e44d139e..b1c9385c 100644
--- a/apps/www/src/lib/registry/new-york/ui/label/Label.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
index 515cad4c..f4d70cbe 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index 53d1ceb2..8147e5e7 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index 59d6a66a..9add5a36 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
index 279dd243..0e9c7633 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
index 04296b44..168df904 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
index 29ec574a..60a8cd1d 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
+++ b/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
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <MenubarRadioGroup v-bind="forwarded">
     <slot />
   </MenubarRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index 2c832661..46bb0e86 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
index 1198dd94..aec95b7c 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
index 31bc729b..79861117 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index cd52f2f0..a646bd4c 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/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"
-      :as-child="props.asChild"
-      :side-offset="props.sideOffset"
-      :side="props.side"
-      :align="props.align"
-      :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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index 10023836..b595c993 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
index 824e0a6b..2a9d9d4e 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
+++ b/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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
index 39d79fb2..5ec1d55f 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
+++ b/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 />
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
index 87718859..b4dc0712 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
+++ b/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 ',
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
index 1a64e069..b83161a3 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/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"
-    :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 ?? '')"
+    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', props.class)"
   >
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
index 598bde48..30c91c61 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
index c30dcde3..03f43e22 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 29ac7207..527c16f7 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/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"
     />
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 40f1f7b0..5531b976 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/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,
         )
       "
     />
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts b/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
index 70d4443b..1aca4227 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
+++ b/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',
 )
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
index cc5a6eed..09ffa359 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
-const props = defineProps<PaginationEllipsisProps>()
-const forwarded = useForwardProps(props)
-const { class: className, ...rest } = useAttrs()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  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>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
index 03e489c7..cd3a0d29 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/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 { DoubleArrowLeftIcon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from '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">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowLeftIcon />
+        <ChevronsLeft class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationFirst>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
index de2aff1d..b7d6cb06 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/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">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowRightIcon />
+        <ChevronsRight class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationLast>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
index 897e47b5..360cb43d 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/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 { ChevronRightIcon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from '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">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRightIcon />
+        <ChevronRight class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
index 12eb8be0..e37aeb64 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/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 { ChevronLeftIcon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from '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">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeftIcon />
+        <ChevronLeft class="h-4 w-4" />
       </slot>
     </Button>
   </PaginationPrev>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
index bfcf1980..a85b9330 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
+++ b/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',
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
index 202ebdf8..22f4772a 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
index 947f1b36..cc11182d 100644
--- a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
+++ b/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="
-        cn(
-          'h-full w-full flex-1 bg-primary transition-all',
-          props.class,
-        )
-      "
+      class="h-full w-full flex-1 duration-300 bg-foreground transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
index 2835f72d..7fb1f8af 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 4780263a..ec9d1d07 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
index c56cf87d..8f501cce 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
+++ b/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,20 +9,18 @@ import {
 import ScrollBar from './ScrollBar.vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<
-    ScrollAreaRootProps & { class?: string }
-  >(),
-  {
-    class: '',
-    orientation: 'vertical',
-  },
-)
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full  rounded-[inherit]">
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar />
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index 9ba2cb09..033c02ba 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -1,22 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ScrollAreaScrollbar
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
            && 'h-2.5 border-t border-t-transparent p-[1px]',
-         $attrs.class ?? '')"
+         props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index aa03538e..9b1f96a8 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -1,43 +1,49 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectContent,
   type SelectContentEmits,
   type SelectContentProps,
   SelectPortal,
   SelectViewport,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: string }>(), {
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
     sideOffset: 4,
   },
 )
 const emits = defineEmits<SelectContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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',
-          position === 'popper'
-            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          props.class,
-        )
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits), ...$attrs }" :class="cn(
+        'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
       "
     >
       <SelectViewport
-        :class="
-          cn('p-0',
-             position === 'popper'
-               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
+        :class="cn('p-1',
+                   position === 'popper'
+                     && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
       >
         <slot />
       </SelectViewport>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
index e31301c7..407d8ad3 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectGroupProps & { class?: string }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
     <slot />
   </SelectGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index e5c533c3..5f929f63 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectItemProps & { class?: string }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SelectItem
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
         'relative flex w-full 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',
@@ -23,7 +30,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </SelectItemIndicator>
     </span>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
index 9674ccb1..3d45cdb6 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: string }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
index b1473cb4..5ae593d2 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectSeparatorProps & { class?: string }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 15219cd1..e617befc 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class']; invalid?: boolean }>(),
   {
     class: '',
     invalid: false,
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, invalid, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SelectTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="[
       cn(
-        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       ),
       props.invalid
@@ -27,7 +34,7 @@ const props = withDefaults(
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDownIcon class="w-4 h-4 opacity-50" />
+      <ChevronDown class="w-4 h-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
index 1e6b3f3f..3ac677a7 100644
--- a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: string }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
index 65d92c86..a04c0262 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { DialogRoot } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot>
+  <DialogRoot v-bind="forwarded">
     <slot />
   </DialogRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index a9a0a5fa..14db1351 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -8,21 +9,18 @@ import {
   DialogPortal,
   useEmitAsProps,
 } from 'radix-vue'
+import { X } from 'lucide-vue-next'
 import { cva } from 'class-variance-authority'
-import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
   side?: 'left' | 'right' | 'top' | 'bottom'
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SheetContentProps>()
-
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
-
 const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
@@ -41,6 +39,12 @@ const sheetVariants = cva(
     },
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -49,15 +53,15 @@ const sheetVariants = cva(
       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
-      :class="cn(sheetVariants({ side: props.side }), props.class)"
-      v-bind="{ ...props, ...emitsAsProps }"
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
     >
       <slot />
 
       <DialogClose
         class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
       >
-        <Cross2Icon class="w-4 h-4 text-muted-foreground" />
+        <X class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
index 9f166647..842cd08a 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogDescription
     :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
index 72e1e2e7..625d3ae8 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index d2eb9b23..9ad879b9 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
index 9a47c633..2ca0c543 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogTitle
     :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogTitle>
diff --git a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
index bf3b943a..c85c59b4 100644
--- a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SkeletonProps>()
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
index fbc62a21..271996b3 100644
--- a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SliderRootProps>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SliderRoot
     :class="cn(
       'relative flex w-full touch-none select-none items-center',
-      $attrs.class ?? '',
+      props.class,
     )"
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
   >
-    <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+    <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderRange class="absolute h-full bg-primary" />
     </SliderTrack>
-    <SliderThumb class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderThumb class="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
   </SliderRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
index 2814d323..7f323f97 100644
--- a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
@@ -1,25 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SwitchRoot,
   type SwitchRootEmits,
   type SwitchRootProps,
   SwitchThumb,
-  useForwardPropsEmits,
+  useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SwitchRootProps & { class?: string }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SwitchRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SwitchRoot
-    v-bind="forwarded"
+    v-bind="{
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
+    }"
     :class="
       cn(
-        'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
         props.class,
       )
     "
@@ -27,7 +35,7 @@ const forwarded = useForwardPropsEmits(props, emits)
     <SwitchThumb
       :class="
         cn(
-          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
         )
       "
     />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/Table.vue b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
index e64c4516..3b079f63 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/Table.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue b/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
index eb0f663a..ab7a937d 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
index 513caa7e..3904c563 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
index eb2e18fb..4a4da400 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <td
     :class="
       cn(
-        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
index 7e60756f..43fe7e0c 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import TableRow from './TableRow.vue'
 import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  class?: string
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
   colspan?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
+}>(), {
   colspan: 1,
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
           props.class,
         )
       "
-      :colspan="props.colspan"
+      v-bind="delegatedProps"
     >
       <div class="flex items-center justify-center py-10">
         <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
index 6e34e4c6..fa04d9d4 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index c5528062..e882b608 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
index 3af2117f..220352f6 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue b/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
index f752f46f..5b9e8749 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
index a39a666b..c0aa0f35 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsContentProps & { class?: string }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsContent
     :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </TabsContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
index 0486a244..eb77b8fb 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsListProps & { class?: string }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsList
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
index 2be5601d..511cf572 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsTriggerProps & { class?: string }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsTrigger
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
index 326d2509..ddf8dd01 100644
--- a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
+  class?: HTMLAttributes['class']
   defaultValue?: string | number
   modelValue?: string | number
 }>()
@@ -18,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
index 980f2fb4..db8ef445 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
 
 interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
 
 export interface ToastProps extends ToastRootProps {
-  class?: string
+  class?: HTMLAttributes['class']
   variant?: ToastVariantProps['variant']
   'onOpenChange'?: ((value: boolean) => void) | undefined
 };
@@ -19,12 +20,18 @@ import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
 const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ToastRoot
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="cn(toastVariants({ variant: props.variant }), props.class)"
+    v-bind="{ ...delegatedProps, ...useEmitAsProps(emits) }"
+    :class="cn(toastVariants({ variant }), props.class)"
     @update:open="onOpenChange"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
index 20747e70..28ca8c8e 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastActionProps & { class?: string }>()
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastAction v-bind="props" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
     <slot />
   </ToastAction>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
index e1686592..653d7437 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import { ToastClose } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { XIcon } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: string
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastClose v-bind="props" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
-    <Cross2Icon class="h-4 w-4" />
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <XIcon class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
index 5f71b1a8..58520378 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastDescriptionProps & { class?: string }>()
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
index 0230bd31..0a1dffbe 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastTitleProps & { class?: string }>()
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
     <slot />
   </ToastTitle>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
index 5f2f2b95..57deec81 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastViewportProps & { class?: string }>()
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastViewport v-bind="props" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
index bb15d616..70e3c682 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import { Toggle, useEmitAsProps } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed, useAttrs } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
 
 interface Props extends ToggleProps {
+  class?: HTMLAttributes['class']
   variant?: ToggleVariantProps['variant']
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -25,24 +22,20 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emits = defineEmits<ToggleEmits>()
 
-const toggleProps = computed(() => {
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, disabled, ...otherProps } = props
-  return otherProps
-})
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
 
-const { class: className, ...rest } = useAttrs()
-const forwarded = useForwardPropsEmits(toggleProps.value, emits)
+  return delegated
+})
 </script>
 
 <template>
   <Toggle
     v-bind="{
-      ...forwarded,
-      ...rest,
+      ...delegatedProps,
+      ...useEmitAsProps(emits),
     }"
-    :class="cn(toggleVariants({ variant, size }), className ?? '')"
-    :disabled="props.disabled"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
   >
     <slot />
   </Toggle>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
index f3093fac..ad34b648 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
@@ -3,18 +3,18 @@ import { cva } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
-        sm: 'h-8 px-2',
-        lg: 'h-10 px-3',
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
index 6252db72..8eb06228 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
@@ -1,18 +1,28 @@
 <script setup lang="ts">
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useEmitAsProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<TooltipContentProps>(), {
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
   sideOffset: 4,
 })
+
 const emits = defineEmits<TooltipContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TooltipPortal>
-    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
+    <TooltipContent v-bind="{ ...delegatedProps, ...useEmitAsProps(emits), ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
       <slot />
     </TooltipContent>
   </TooltipPortal>
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
index f47721bd..f5b0e57f 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
@@ -5,7 +5,7 @@ const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-  <TooltipTrigger v-bind="props" class="">
+  <TooltipTrigger v-bind="props">
     <slot />
   </TooltipTrigger>
 </template>