feat: complete components in new-york style

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/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/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/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/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/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/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/navigation-menu/NavigationMenu.vue

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+} from 'radix-vue'
+import { navigationMenuTriggerStyle } from '.'
+import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+    v-bind="props"
+  >
+    <slot />
+    <RadixIconsChevronDown
+      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: string }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...props, ...emitsAsProps, $attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

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

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

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import ScrollBar from './ScrollBar.vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<
+    ScrollAreaRootProps & { class?: string }
+  >(),
+  {
+    class: '',
+    orientation: 'vertical',
+  },
+)
+</script>
+
+<template>
+  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full  rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+  orientation: 'vertical',
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="props"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+         orientation === 'horizontal'
+           && 'h-2.5 border-t border-t-transparent p-[1px]',
+         $attrs.class ?? '')"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

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

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

apps/www/src/lib/registry/new-york/ui/separator/Separator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: string }>()
+</script>
+
+<template>
+  <Separator
+    :class="[
+      cn('shrink-0 bg-secondary', props.class),
+      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+    ]"
+  />
+</template>

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

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

apps/www/src/lib/registry/new-york/ui/sheet/Sheet.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/sheet/SheetClose.vue

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

apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+} from 'radix-vue'
+import { cva } from 'class-variance-authority'
+import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+interface SheetContentProps extends DialogContentProps {
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  class?: string
+}
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+</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(sheetVariants({ side: props.side }), 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 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.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
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </DialogDescription>
+</template>

apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue

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

apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</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/sheet/SheetTitle.vue

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

apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.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/sheet/index.ts

@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'

apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  class?: string
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
+</template>

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

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