feat: add new-york style components (#27)

* feat: add new-york style components

* feat: add missing new-york style components

* feat: add menubar

* feat: add avatar, context-menu, dropdown-menu and select components

* feat: complete components in new-york style

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+} from 'radix-vue'
+import { useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+</script>
+
+<template>
+  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
+    <slot />
+  </AccordionRoot>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="props"
+    :class="
+      cn(
+        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        props.class,
+      )
+    "
+  >
+    <div class="pb-4 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { AccordionItem, type AccordionItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="props"
+    :class="cn('border-b', props.class ?? '')"
+  >
+    <slot />
+  </AccordionItem>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'radix-vue'
+import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionHeader class="flex" as="div">
+    <AccordionTrigger
+      v-bind="props"
+      :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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <RadixIconsChevronDown
+        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

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

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

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<AlertDialogActionProps>()
+</script>
+
+<template>
+  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
+    <slot />
+  </AlertDialogAction>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<AlertDialogCancelProps>()
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
+    <slot />
+  </AlertDialogCancel>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: string }>()
+
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</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"
+    />
+    <AlertDialogContent
+      v-bind="{ ...props, ...emitsAsProps }"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogDescription
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

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

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

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

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

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogTitle
+    :as-child="props.asChild"
+    :class="cn('text-lg text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

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

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

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

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'

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

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

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
+    <slot />
+  </h5>
+</template>

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

@@ -0,0 +1,21 @@
+import { 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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)

apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue

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

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

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { AvatarRoot } from 'radix-vue'
+import { 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>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>

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

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

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full aspect-square" />
+</template>

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

@@ -0,0 +1,22 @@
+import { 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-foregorund select-none shrink-0 bg-muted overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)

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

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

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

@@ -0,0 +1,23 @@
+import { 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',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  as?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

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

@@ -0,0 +1,33 @@
+import { 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',
+  {
+    variants: {
+      variant: {
+        default:
+            'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+            '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',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)

apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import type { Calendar } from 'v-calendar'
+import { DatePicker } from 'v-calendar'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '../button'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps< {
+  modelValue?: string | number | Date | Partial<{
+    start: Date
+    end: Date
+  }>
+  modelModifiers?: object
+  columns?: number
+  type?: 'single' | 'range'
+}>(), {
+  type: 'single',
+  columns: 1,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value)
+    return
+
+  if (direction === 'prev')
+    calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div class="absolute top-3 flex justify-between w-full px-4">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+        <ChevronLeft class="w-4 h-4" />
+      </button>
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+        <ChevronRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <DatePicker ref="datePicker" v-model="modelValue" :model-modifiers="modelModifiers" class="calendar" trim-weeks :transition="'none'" :columns="columns" />
+  </div>
+</template>
+
+<style lang="postcss">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4;
+}
+.calendar .vc-title {
+  @apply text-sm font-medium pointer-events-none;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply flex;
+}
+.calendar .vc-weekday {
+  @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];
+}
+.calendar .vc-weeks {
+  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
+}
+.calendar .vc-day-content  {
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent text-accent-foreground;
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as Calendar } from './Calendar.vue'

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-xl border bg-card text-card-foreground shadow',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

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

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
+import RadixIconsCheck from '~icons/radix-icons/check'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<CheckboxRootProps>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="{ ...props, ...emitsAsProps }"
+    :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 ?? '')"
+  >
+    <CheckboxIndicator class="flex items-center justify-center text-current">
+      <RadixIconsCheck class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { CollapsibleRoot } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...useEmitAsProps(emits) }">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'

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

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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  ContextMenuCheckboxItem,
+  type ContextMenuCheckboxItemEmits,
+  type ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicator,
+} from 'radix-vue'
+import RadixIconsCheck from '~icons/radix-icons/check'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="{ ...props, ...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,
+      ),
+    ]"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator
+        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
+      >
+        <RadixIconsCheck class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  ContextMenuContent,
+  type ContextMenuContentEmits,
+  type ContextMenuContentProps,
+  ContextMenuPortal,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<ContextMenuContentProps & { class?: string }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      :align-offset="props.alignOffset"
+      :class="[
+        cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        ),
+      ]"
+      v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

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

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

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ContextMenuItem,
+  type ContextMenuItemEmits,
+  type ContextMenuItemProps,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="{ ...props, ...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',
+        inset && 'pl-8',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="props"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class ?? '',
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupEmits,
+  type ContextMenuRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+</script>
+
+<template>
+  <ContextMenuRadioGroup
+    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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  type ContextMenuRadioItemEmits,
+  type ContextMenuRadioItemProps,
+} from 'radix-vue'
+import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="{ ...props, ...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,
+      ),
+    ]"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import {
+  ContextMenuSeparator,
+  type ContextMenuSeparatorProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuSeparatorProps>()
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="props" :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')" />
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+    <slot />
+  </span>
+</template>

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

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

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {
+  ContextMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="{ ...props, ...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',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+} from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="props"
+    :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',
+        inset && 'pl-8',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>

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

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

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

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DialogRoot } from 'radix-vue'
+</script>
+
+<template>
+  <DialogRoot>
+    <slot />
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+} from 'radix-vue'
+import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: string }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</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"
+    />
+    <DialogContent
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class,
+        )
+      "
+      v-bind="{ ...props, ...emitsAsProps }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+      >
+        <RadixIconsCross2 class="w-4 h-4" />
+        <span className="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="props"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

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

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

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="props"
+    :class="
+      cn(
+        'text-lg text-foreground font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>

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

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

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

@@ -0,0 +1,7 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogFooter } from './DialogFooter.vue'

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

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

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+} from 'radix-vue'
+import RadixIconsCheck from '~icons/radix-icons/check'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="{ ...props, ...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,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <RadixIconsCheck class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: string }>(),
+  {
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      :loop="props.loop"
+      :as-child="props.asChild"
+      :side-offset="props.sideOffset"
+      :side="props.side"
+      :align="props.align"
+      :align-offset="props.alignOffset"
+      :class="[
+        cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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,
+        ),
+      ]"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

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

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

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="props"
+    :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',
+        inset && 'pl-8',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuLabelProps & {
+  inset?: boolean
+  class?: string
+}>()
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="props"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold',
+         inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+} from 'radix-vue'
+import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="cn(
+      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+      props.class,
+    )"
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+
+      <DropdownMenuItemIndicator>
+        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSeparatorProps>()
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')">
+    <slot />
+  </span>
+</template>

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="{ ...props, ...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', $attrs.class ?? '')"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+} from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="props"
+    :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',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

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

@@ -0,0 +1,16 @@
+export { DropdownMenuPortal } from 'radix-vue'
+
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'

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

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

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  HoverCardContent,
+  type HoverCardContentProps,
+  HoverCardPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: string }>(),
+  {
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="props"
+      :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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

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

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

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

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" type="text" :class="cn(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', $attrs.class ?? ''))">
+</template>

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

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

apps/www/src/lib/registry/new-york/ui/label/Label.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: string }>()
+</script>
+
+<template>
+  <Label
+    v-bind="props"
+    :class="
+      cn(
+        'block text-sm tracking-tight font-medium text-foreground text-left',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

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

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  MenubarRoot,
+  type MenubarRootEmits,
+  type MenubarRootProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarRootProps & { class?: string }>()
+
+const emits = defineEmits<MenubarRootEmits>()
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="props"
+    :class="
+      cn(
+        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        props.class,
+      )
+    "
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </MenubarRoot>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  MenubarCheckboxItem,
+  type MenubarCheckboxItemEmits,
+  type MenubarCheckboxItemProps,
+  MenubarItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
+
+const emit = defineEmits<MenubarCheckboxItemEmits>()
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="props"
+    :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"
+    >
+      <RadixIconsCheck class="w-4 h-4" />
+    </MenubarItemIndicator>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  MenubarContent,
+  type MenubarContentProps,
+  MenubarPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: string }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      :loop="props.loop"
+      :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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

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

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

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  MenubarItem,
+  type MenubarItemEmits,
+  type MenubarItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="props"
+    :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',
+        inset && 'pl-8',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </MenubarItem>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()
+</script>
+
+<template>
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarLabel>
+</template>

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  MenubarRadioGroup,
+  type MenubarRadioGroupEmits,
+  type MenubarRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+</script>
+
+<template>
+  <MenubarRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </MenubarRadioGroup>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  type MenubarRadioItemEmits,
+  type MenubarRadioItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+
+const props = defineProps<MenubarRadioItemProps & { class?: string }>()
+
+const emits = defineEmits<MenubarRadioItemEmits>()
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="props"
+    :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"
+    >
+      <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+    </MenubarItemIndicator>
+
+    <slot />
+  </MenubarRadioItem>
+</template>