refactor: apply all v1 changes

apps/www/src/content/docs/components/combobox.md

@@ -96,9 +96,9 @@ const value = ref({})
 
 <ComponentPreview name="ComboboxPopover" />
 
-<!-- ### Dropdown menu
+### Dropdown menu
 
-<ComponentPreview name="ComboboxDropdownMenu" /> -->
+<ComponentPreview name="ComboboxDropdownMenu" />
 
 ### Form
 

apps/www/src/lib/registry/default/example/ComboboxDemo.vue

@@ -45,7 +45,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
-      <Command v-model="value" :filter-function="filterFunction">
+      <Command :filter-function="filterFunction">
         <CommandInput placeholder="Search framework..." />
         <CommandEmpty>No framework found.</CommandEmpty>
         <CommandGroup>
@@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
             v-for="framework in frameworks"
             :key="framework.value"
             :value="framework"
-            @select="open = false"
+            @select="(ev) => {
+              value = ev.detail.value as typeof framework
+              open = false
+            }"
           >
             <Check
               :class="cn(

apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue

@@ -47,7 +47,7 @@ const open = ref(false)
       </span>
       <span class="text-muted-foreground">Create a new project</span>
     </p>
-    <DropdownMenu :open="open">
+    <DropdownMenu v-model:open="open">
       <DropdownMenuTrigger as-child>
         <Button variant="ghost" size="sm">
           <MoreHorizontal />
@@ -83,8 +83,8 @@ const open = ref(false)
                       v-for="label in labels"
                       :key="label"
                       :value="label"
-                      @select="(value) => {
+                      @select="(ev) => {
-                        labelRef = value as string
+                        labelRef = ev.detail.value as string
                         open = false
                       }"
                     >

apps/www/src/lib/registry/default/example/ContextMenuDemo.vue

@@ -56,7 +56,7 @@ import {
       </ContextMenuCheckboxItem>
       <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
       <ContextMenuSeparator />
-      <ContextMenuRadioGroup value="pedro">
+      <ContextMenuRadioGroup model-value="pedro">
         <ContextMenuLabel inset>
           People
         </ContextMenuLabel>

apps/www/src/lib/registry/default/example/DialogDemo.vue

@@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/default/ui/label'
         Edit Profile
       </Button>
     </DialogTrigger>
-    <DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
+    <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Edit profile</DialogTitle>
         <DialogDescription>

apps/www/src/lib/registry/default/ui/accordion/Accordion.vue

@@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
+  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
     <slot />
   </AccordionRoot>
 </template>

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }">
+  <AlertDialogRoot v-bind="forwarded">
     <slot />
   </AlertDialogRoot>
 </template>

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

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="forwarded"
     :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 ?? '')"

apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue

@@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
 </script>
 
 <template>
-  <CollapsibleContent v-bind="props">
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
     <slot />
   </CollapsibleContent>
 </template>

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxRootProps>()
 const emits = defineEmits<ComboboxRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <ComboboxRoot
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="forwarded"
     :open="true"
     :model-value="''"
     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"

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

@@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
   <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 ?? '')"
+    @select.prevent
   >
     <slot />
   </ComboboxItem>

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ContextMenuRoot, useEmitAsProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <ContextMenuRoot v-bind="forwarded">
     <slot />
   </ContextMenuRoot>
 </template>

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

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

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

@@ -4,18 +4,20 @@ import {
   ContextMenuRadioItem,
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',

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

@@ -3,15 +3,17 @@ import {
   ContextMenuSub,
   type ContextMenuSubEmits,
   type ContextMenuSubProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<ContextMenuSubProps>()
-
 const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+  <ContextMenuSub v-bind="forwarded">
     <slot />
   </ContextMenuSub>
 </template>

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <DropdownMenuRoot v-bind="forwarded">
     <slot />
   </DropdownMenuRoot>
 </template>

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

@@ -3,15 +3,17 @@ import {
   DropdownMenuSub,
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuSubProps>()
-
 const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+  <DropdownMenuSub v-bind="forwarded">
     <slot />
   </DropdownMenuSub>
 </template>

apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'
+import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<HoverCardRootProps>()
+const forwarded = useForwardProps(props)
 </script>
 
 <template>
-  <HoverCardRoot v-bind="props">
+  <HoverCardRoot v-bind="forwarded">
     <slot />
   </HoverCardRoot>
 </template>

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

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import {
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
-  MenubarSub,
-  type MenubarSubEmits,
-} from 'radix-vue'
 
 interface MenubarSubRootProps {
   defaultOpen?: boolean
@@ -10,12 +7,13 @@ interface MenubarSubRootProps {
 }
 
 const props = defineProps<MenubarSubRootProps>()
-
 const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <MenubarSub v-bind="props" @update:open="emits('update:open', $event)">
+  <MenubarSub v-bind="forwarded">
     <slot />
   </MenubarSub>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
@@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
     ]"
   >
     <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </MenubarSubTrigger>
 </template>

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { PopoverRoot, useEmitAsProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <PopoverRoot v-bind="{ ...props, ...emitsAsProps }">
+  <PopoverRoot v-bind="forwarded">
     <slot />
   </PopoverRoot>
 </template>

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

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

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useEmitAsProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <SelectRoot v-bind="forwarded">
     <slot />
   </SelectRoot>
 </template>

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

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useEmitAsProps } from 'radix-vue'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
 import { computed } from 'vue'
 import { toggleVariants } from '.'
@@ -23,11 +23,13 @@ const toggleProps = computed(() => {
   const { variant, size, ...otherProps } = props
   return otherProps
 })
+
+const forwarded = useForwardPropsEmits(toggleProps, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
   >
     <slot />

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <TooltipRoot v-bind="{ ...props, ...emitsAsProps }">
+  <TooltipRoot v-bind="forwarded">
     <slot />
   </TooltipRoot>
 </template>

apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue

@@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
             v-for="framework in frameworks"
             :key="framework.value"
             :value="framework"
-            @select="open = false"
+            @select="(ev) => {
+              value = ev.detail.value as typeof framework
+              open = false
+            }"
           >
             {{ framework.label }}
             <CheckIcon

apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue

@@ -47,7 +47,7 @@ const open = ref(false)
       </span>
       <span class="text-muted-foreground">Create a new project</span>
     </p>
-    <DropdownMenu :open="open">
+    <DropdownMenu v-model:open="open">
       <DropdownMenuTrigger as-child>
         <Button variant="ghost" size="sm">
           <DotsHorizontalIcon />
@@ -80,8 +80,8 @@ const open = ref(false)
                       v-for="label in labels"
                       :key="label"
                       :value="label"
-                      @select="(value) => {
+                      @select="(ev) => {
-                        labelRef = value as string
+                        labelRef = ev.detail.value as string
                         open = false
                       }"
                     >

apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue

@@ -56,7 +56,7 @@ import {
       </ContextMenuCheckboxItem>
       <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
       <ContextMenuSeparator />
-      <ContextMenuRadioGroup value="pedro">
+      <ContextMenuRadioGroup model-value="pedro">
         <ContextMenuLabel inset>
           People
         </ContextMenuLabel>

apps/www/src/lib/registry/new-york/example/DialogDemo.vue

@@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
         Edit Profile
       </Button>
     </DialogTrigger>
-    <DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
+    <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Edit profile</DialogTitle>
         <DialogDescription>

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

@@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
+  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
     <slot />
   </AccordionRoot>
 </template>

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }">
+  <AlertDialogRoot v-bind="forwarded">
     <slot />
   </AlertDialogRoot>
 </template>

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

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="forwarded"
     :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 ?? '')"

apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue

@@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
 </script>
 
 <template>
-  <CollapsibleContent v-bind="props">
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
     <slot />
   </CollapsibleContent>
 </template>

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
+import { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxRootProps>()
 const emits = defineEmits<ComboboxRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <ComboboxRoot
-    v-bind="{ ...props, ...emitsAsProps }"
+    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 ?? '')"
   >

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

@@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
   <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 ?? '')"
+    @select.prevent
   >
     <slot />
   </ComboboxItem>

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ContextMenuRoot, useEmitAsProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <ContextMenuRoot v-bind="forwarded">
     <slot />
   </ContextMenuRoot>
 </template>

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

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

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

@@ -4,18 +4,20 @@ import {
   ContextMenuRadioItem,
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="[
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',

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

@@ -3,15 +3,17 @@ import {
   ContextMenuSub,
   type ContextMenuSubEmits,
   type ContextMenuSubProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<ContextMenuSubProps>()
-
 const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+  <ContextMenuSub v-bind="forwarded">
     <slot />
   </ContextMenuSub>
 </template>

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <DropdownMenuRoot v-bind="forwarded">
     <slot />
   </DropdownMenuRoot>
 </template>

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

@@ -3,15 +3,17 @@ import {
   DropdownMenuSub,
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuSubProps>()
-
 const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+  <DropdownMenuSub v-bind="forwarded">
     <slot />
   </DropdownMenuSub>
 </template>

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'
+import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<HoverCardRootProps>()
+const forwarded = useForwardProps(props)
 </script>
 
 <template>
-  <HoverCardRoot v-bind="props">
+  <HoverCardRoot v-bind="forwarded">
     <slot />
   </HoverCardRoot>
 </template>

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

@@ -3,6 +3,7 @@ import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
+  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
@@ -14,17 +15,13 @@ const props = withDefaults(
     sideOffset: 8,
   },
 )
+const forwarded = useForwardProps(props)
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarContent
-      :loop="props.loop"
+      v-bind="forwarded"
-      :as-child="props.asChild"
-      :side-offset="props.sideOffset"
-      :side="props.side"
-      :align="props.align"
-      :align-offset="props.alignOffset"
       :class="
         cn(
           'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

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

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import {
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
-  MenubarSub,
-  type MenubarSubEmits,
-} from 'radix-vue'
 
 interface MenubarSubRootProps {
   defaultOpen?: boolean
@@ -10,12 +7,13 @@ interface MenubarSubRootProps {
 }
 
 const props = defineProps<MenubarSubRootProps>()
-
 const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <MenubarSub v-bind="props" @update:open="emits('update:open', $event)">
+  <MenubarSub v-bind="forwarded">
     <slot />
   </MenubarSub>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
@@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
     ]"
   >
     <slot />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
   </MenubarSubTrigger>
 </template>

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { PopoverRoot, useEmitAsProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <PopoverRoot v-bind="{ ...props, ...emitsAsProps }">
+  <PopoverRoot v-bind="forwarded">
     <slot />
   </PopoverRoot>
 </template>

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

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

apps/www/src/lib/registry/new-york/ui/select/Select.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useEmitAsProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <SelectRoot v-bind="forwarded">
     <slot />
   </SelectRoot>
 </template>

apps/www/src/lib/registry/new-york/ui/switch/Switch.vue

@@ -4,24 +4,25 @@ import {
   type SwitchRootEmits,
   type SwitchRootProps,
   SwitchThumb,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<SwitchRootProps & { class?: string }>()
-
 const emits = defineEmits<SwitchRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <SwitchRoot
-    v-bind="props"
+    v-bind="forwarded"
     :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',
         props.class,
       )
     "
-    @update:checked="emits('update:checked', $event)"
   >
     <SwitchThumb
       :class="

apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useEmitAsProps } from 'radix-vue'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
 import { computed } from 'vue'
 import { toggleVariants } from '.'
@@ -23,11 +23,13 @@ const toggleProps = computed(() => {
   const { variant, size, ...otherProps } = props
   return otherProps
 })
+
+const forwarded = useForwardPropsEmits(toggleProps, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
   >
     <slot />

apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <TooltipRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <TooltipRoot v-bind="forwarded">
     <slot />
   </TooltipRoot>
 </template>