refactor: replace with lucide icon, dropped v-calendar

apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue

@@ -5,8 +5,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/registry/new-york/ui/tooltip'
-import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
 import { useClipboard } from '@vueuse/core'
+import { Check, Clipboard } from 'lucide-vue-next'
 import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -29,8 +29,8 @@ const { copy, copied } = useClipboard({ source: code })
         @click="copy()"
       >
         <span class="sr-only">Copy</span>
-        <CheckIcon v-if="copied" />
-        <ClipboardIcon v-else />
+        <Check v-if="copied" />
+        <Clipboard v-else />
       </Button>
     </TooltipTrigger>
     <TooltipContent>Copy code</TooltipContent>

apps/www/__registry__/index.ts

@@ -2051,25 +2051,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/new-york/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/new-york/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -4965,111 +4946,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -7895,25 +7771,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/new-york/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/new-york/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -10809,111 +10666,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -13755,25 +13507,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/default/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/default/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -16669,111 +16402,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/default/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -19599,25 +19227,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/default/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/default/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -22513,111 +22122,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/default/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",

apps/www/package.json

@@ -35,7 +35,6 @@
     "magic-string": "^0.30.13",
     "reka-ui": "catalog:",
     "tailwindcss-animate": "^1.0.7",
-    "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
     "vue": "^3.5.13",

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

@@ -7,12 +7,6 @@ primitive: https://www.reka-ui.com/docs/components/calendar.html
 
 <ComponentPreview name="CalendarDemo" />
 
-<Callout class="text-base mt-12">
-
-If you're looking for **previous** Calendar implementation, checkout to <span class="font-bold underline">[VCalendar](/docs/components/v-calendar)</span> component
-
-</Callout>
-
 ## About
 
 The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/docs/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.

apps/www/src/content/docs/components/v-calendar.md

@@ -1,91 +0,0 @@
----
-title: VCalendar
-description: A date field component that allows users to enter and edit date.
-source: apps/www/registry/default/ui/calendar
-primitive: https://vcalendar.io/
----
-
-<ComponentPreview name="VCalendarDemo" />
-
-## About
-
-The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/getting-started/installation.html).
-
-## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
-
-```bash
-npx shadcn-vue@latest add v-calendar
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency
-
-```bash
-npm install v-calendar
-```
-
-### Copy and paste the following code into your project
-
-<<< @/registry/default/ui/v-calendar/Calendar.vue
-
-</Steps>
-
-</template>
-</TabPreview>
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/v-calendar'
-</script>
-
-<template>
-  <Calendar />
-</template>
-```
-
-The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
-
-### Slots
-
-The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
-
-- `day-content`
-- `day-popover`
-- `dp-footer`
-- `footer`
-- `header-title-wrapper`
-- `header-title`
-- `header-prev-button`
-- `header-next-button`
-- `nav`
-- `nav-prev-button`
-- `nav-next-button`
-- `page`
-- `time-header`
-
-Example using the `day-content` slot:
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/v-calendar'
-</script>
-
-<template>
-  <Calendar>
-    <template #day-content="{ day, dayProps, dayEvents }">
-      <div v-bind="dayProps" v-on="dayEvents">
-        {{ day.label }}
-      </div>
-    </template>
-  </Calendar>
-</template>
-```

apps/www/src/content/docs/components/v-date-picker.md

@@ -1,79 +0,0 @@
----
-title: VCalendar Date Picker
-description: A date picker component with range and presets.
----
-
-<ComponentPreview name="VDatePickerDemo"  />
-
-## Installation
-
-The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
-
-See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-
-import { Calendar } from '@/components/ui/v-calendar'
-import { cn } from '@/lib/utils'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>
-```
-
-## Examples
-
-### Date Picker
-
-<ComponentPreview name="VDatePickerDemo"  />
-
-### Date Range Picker
-
-<ComponentPreview name="VDatePickerWithRange"  />
-
-### Date Time Picker
-
-<ComponentPreview name="VDateTimePickerDemo"  />
-
-### With Presets
-
-<ComponentPreview name="VDatePickerWithPresets"  />
-
-### With Slot
-
-<ComponentPreview name="VRangePickerWithSlot"  />
-
-### Form
-
-<ComponentPreview name="VDatePickerForm"  />

apps/www/src/examples/forms/components/AppearanceForm.vue

@@ -6,8 +6,8 @@ import { Button, buttonVariants } from '@/registry/new-york/ui/button'
 
 import { Separator } from '@/registry/new-york/ui/separator'
 import { toast } from '@/registry/new-york/ui/toast'
-import { ChevronDownIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { ChevronDown } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
 import * as z from 'zod'
@@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
               </option>
             </select>
           </FormControl>
-          <ChevronDownIcon class="pointer-events-none absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+          <ChevronDown class="pointer-events-none absolute right-3 top-2.5 h-4 w-4 opacity-50" />
         </div>
         <FormDescription>
           Set the font you want to use in the dashboard.

apps/www/src/examples/forms/components/ProfileForm.vue

@@ -15,7 +15,6 @@ import { Separator } from '@/registry/new-york/ui/separator'
 
 import { Textarea } from '@/registry/new-york/ui/textarea'
 import { toast } from '@/registry/new-york/ui/toast'
-import { Cross1Icon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { FieldArray, useForm } from 'vee-validate'
 import { h, ref } from 'vue'
@@ -129,7 +128,7 @@ const onSubmit = handleSubmit((values) => {
     </FormField>
 
     <div>
-      <FieldArray v-slot="{ fields, push, remove }" name="urls">
+      <FieldArray v-slot="{ fields, push }" name="urls">
         <div v-for="(field, index) in fields" :key="`urls-${field.key}`">
           <FormField v-slot="{ componentField }" :name="`urls[${index}].value`">
             <FormItem>
@@ -143,9 +142,6 @@ const onSubmit = handleSubmit((values) => {
                 <FormControl>
                   <Input type="url" v-bind="componentField" />
                 </FormControl>
-                <button type="button" class="absolute py-2 pe-3 end-0 text-muted-foreground" @click="remove(index)">
-                  <Cross1Icon class="w-3" />
-                </button>
               </div>
               <FormMessage />
             </FormItem>

apps/www/src/public/r/icons/index.json

@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}

apps/www/src/public/r/index.json

@@ -2122,28 +2122,6 @@
       }
     ]
   },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "type": "registry:ui"
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "type": "registry:ui"
-      }
-    ]
-  },
   {
     "name": "accordion",
     "type": "registry:ui",
@@ -4266,27 +4244,5 @@
         "type": "registry:ui"
       }
     ]
-  },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "type": "registry:ui"
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "type": "registry:ui"
-      }
-    ]
   }
 ]

apps/www/src/public/r/styles/new-york/AlertDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/AlertDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { Rocket } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Rocket class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/AlertDestructiveDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/BreadcrumbDropdown.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/BreadcrumbSeparatorDemo.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ButtonIconDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonIconDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonLoadingDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonWithIconDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { MailOpen } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <MailOpen class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/CalendarForm.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/CalendarForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/CardDemo.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/CardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { Bell, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <Bell />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/CollapsibleDemo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/CollapsibleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ComboboxDemo.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "example/ComboboxDropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ComboboxForm.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/CommandDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/CommandDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/DataTableDemoColumn.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DatePickerDemo.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/DatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DatePickerForm.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/DatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "example/DatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DatePickerWithRange.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/DatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/DialogCustomCloseButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/DrawerDemo.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "example/DrawerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/HoverCardDemo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "example/HoverCardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/InputWithIcon.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/InputWithIcon.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/StepperHorizental.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/StepperHorizental.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/StepperVertical.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/StepperVertical.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleDisabledDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupDisabledDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupLargeDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupOutlineDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupSingleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupSmallDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleItalicDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleItalicWithTextDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleLargeDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleSmallDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/src/public/r/styles/new-york/accordion.json

@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/accordion/AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/auto-form.json

@@ -50,7 +50,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -62,7 +62,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Trash } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <Trash />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/breadcrumb.json

@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/calendar.json

@@ -71,13 +71,13 @@
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/carousel.json

@@ -30,13 +30,13 @@
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/checkbox.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/checkbox/Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/command.json

@@ -35,7 +35,7 @@
     },
     {
       "path": "ui/command/CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/context-menu.json

@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -58,7 +58,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -88,7 +88,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/dialog.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/dialog/DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/dialog/DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/dropdown-menu.json

@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -52,7 +52,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -82,7 +82,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/menubar.json

@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/menubar/MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -58,7 +58,7 @@
     },
     {
       "path": "ui/menubar/MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -88,7 +88,7 @@
     },
     {
       "path": "ui/menubar/MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      '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',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/navigation-menu.json

@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/pagination.json

@@ -11,31 +11,31 @@
   "files": [
     {
       "path": "ui/pagination/PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/pin-input.json

@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/pin-input/PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Minus } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Minus class=\"w-2\" />\n    </slot>\n  </primitive>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/radio-group.json

@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/radio-group/RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/range-calendar.json

@@ -71,13 +71,13 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/resizable.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/resizable/ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/select.json

@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/select/SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,13 +46,13 @@
     },
     {
       "path": "ui/select/SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/select/SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -64,7 +64,7 @@
     },
     {
       "path": "ui/select/SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/sheet.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/sheet/SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n      >\n        <X class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/tags-input.json

@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/tags-input/TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/public/r/styles/new-york/toast.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/toast/ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },

apps/www/src/registry/crawl-content.ts

@@ -11,16 +11,15 @@ const DEPENDENCIES = new Map<string, string[]>([
   ['@vueuse/core', []],
   ['vue-sonner', []],
   ['vaul-vue', []],
-  ['v-calendar', []],
   ['@tanstack/vue-table', []],
   ['@unovis/vue', ['@unovis/ts']],
   ['embla-carousel-vue', []],
   ['vee-validate', ['@vee-validate/zod', 'zod']],
 ])
 // Some dependencies latest tag were not compatible with Vue3.
-const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
-  ['v-calendar', 'v-calendar@next'],
-])
+// const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
+//   ['v-calendar', 'v-calendar@next'],
+// ])
 const REGISTRY_DEPENDENCY = '@/'
 
 type ArrayItem<T> = T extends Array<infer X> ? X : never
@@ -283,12 +282,12 @@ async function getFileDependencies(filename: string, sourceCode: string) {
 
   const populateDeps = (source: string) => {
     const peerDeps = DEPENDENCIES.get(source)
-    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
+    // const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
     if (peerDeps !== undefined) {
-      if (taggedDeps !== undefined)
-        dependencies.add(taggedDeps)
-      else
-        dependencies.add(source)
+      // if (taggedDeps !== undefined)
+      //   dependencies.add(taggedDeps)
+      // else
+      dependencies.add(source)
       peerDeps.forEach(dep => dependencies.add(dep))
     }
 

apps/www/src/registry/default/example/VCalendarDemo.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { ref } from 'vue'
-
-const date = ref(new Date())
-</script>
-
-<template>
-  <Calendar v-model="date" class="rounded-md border" />
-</template>

apps/www/src/registry/default/example/VDatePickerDemo.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>

apps/www/src/registry/default/example/VDatePickerForm.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/registry/default/ui/form'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { toast } from '@/registry/default/ui/toast'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-
-import { toTypedSchema } from '@vee-validate/zod'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { useForm } from 'vee-validate'
-
-import { h } from 'vue'
-import * as z from 'zod'
-
-const formSchema = toTypedSchema(z.object({
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
-}))
-
-const { handleSubmit } = useForm({
-  validationSchema: formSchema,
-})
-
-const onSubmit = handleSubmit((values) => {
-  toast({
-    title: 'You submitted the following values:',
-    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
-  })
-})
-</script>
-
-<template>
-  <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField, value }" name="dob">
-      <FormItem class="flex flex-col">
-        <FormLabel>Date of birth</FormLabel>
-        <Popover>
-          <PopoverTrigger as-child>
-            <FormControl>
-              <Button
-                variant="outline" :class="cn(
-                  'w-[240px] ps-3 text-start font-normal',
-                  !value && 'text-muted-foreground',
-                )"
-              >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
-                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
-              </Button>
-            </FormControl>
-          </PopoverTrigger>
-          <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
-          </PopoverContent>
-        </Popover>
-        <FormDescription>
-          Your date of birth is used to calculate your age.
-        </FormDescription>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-    <Button type="submit">
-      Submit
-    </Button>
-  </Form>
-</template>

apps/www/src/registry/default/example/VDatePickerWithPresets.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/registry/default/ui/select'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <template v-if="date">
-          {{ format(date, "PPP") }}
-        </template>
-        <template v-else>
-          <span>Pick a date</span>
-        </template>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
-      <Select
-        @update:model-value="(value) => {
-          date = addDays(new Date(), parseInt(value))
-        }"
-      >
-        <SelectTrigger>
-          <SelectValue placeholder="Select" />
-        </SelectTrigger>
-        <SelectContent position="popper">
-          <SelectItem value="0">
-            Today
-          </SelectItem>
-          <SelectItem value="1">
-            Tomorrow
-          </SelectItem>
-          <SelectItem value="3">
-            In 3 days
-          </SelectItem>
-          <SelectItem value="7">
-            In a week
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="rounded-md border">
-        <Calendar v-model="date" mode="single" />
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>

apps/www/src/registry/default/example/VDatePickerWithRange.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
-        />
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>

apps/www/src/registry/default/example/VDateTimePickerDemo.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" mode="datetime" />
-    </PopoverContent>
-  </Popover>
-</template>

apps/www/src/registry/default/example/VRangePickerWithSlot.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          mode="date"
-          :columns="2"
-        >
-          <template #footer>
-            <div class="w-full px-3 pb-3">
-              Entry time
-              <Calendar
-                v-model="date.start"
-                mode="time"
-                hide-time-header
-              />
-              Exit time
-              <Calendar
-                v-model="date.end"
-                mode="time"
-                hide-time-header
-              />
-            </div>
-          </template>
-        </Calendar>
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>

apps/www/src/registry/default/ui/v-calendar/Calendar.vue

@@ -1,343 +0,0 @@
-<script setup lang="ts">
-import type { Calendar } from 'v-calendar'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/registry/default/ui/button'
-import { useVModel } from '@vueuse/core'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { DatePicker } from 'v-calendar'
-import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
-
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-const props = withDefaults(defineProps< {
-  modelValue?: string | number | Date | DatePickerModel
-  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()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter(name => isVCalendarSlot(name))
-    .reduce((obj: Record<string, any>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <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-bind="$attrs"
-      v-model="modelValue"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-
-      <template #nav-prev-button>
-        <ChevronLeft />
-      </template>
-
-      <template #nav-next-button>
-        <ChevronRight />
-      </template>
-    </DatePicker>
-  </div>
-</template>
-
-<style lang="css">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4 max-sm:!grid-cols-1;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium relative z-20;
-}
-.vc-popover-content-wrapper .vc-popover-content {
-  @apply mt-3 rounded-md max-w-xs border bg-background;
-}
-.vc-popover-content-wrapper .vc-nav-header {
-  @apply flex justify-between items-center p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items {
-  @apply grid grid-cols-4 gap-2 p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
-  @apply rounded-md px-2 py-1;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
-  @apply text-muted-foreground bg-muted;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
-  @apply bg-primary text-primary-foreground;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply justify-items-center;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md 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 first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
-  @apply bg-secondary text-primary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
-  @apply rounded-md;
-}
-.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 hover: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-9 w-9 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;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply w-full relative;
-}
-:root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
-}
-
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
-}
-
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
-}
-
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-	opacity: 0;
-}
-
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-t border-solid border-secondary mt-2;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
-}
-.vc-time-select-group {
-  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
-}
-.vc-time-select-group select {
-  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>

apps/www/src/registry/default/ui/v-calendar/index.ts

@@ -1,22 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
-
-export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
-  const validSlots: CalendarSlotName[] = [
-    'day-content',
-    'day-popover',
-    'dp-footer',
-    'footer',
-    'header-title-wrapper',
-    'header-title',
-    'header-prev-button',
-    'header-next-button',
-    'nav',
-    'nav-prev-button',
-    'nav-next-button',
-    'page',
-    'time-header',
-  ]
-
-  return validSlots.includes(slotName as CalendarSlotName)
-}

apps/www/src/registry/new-york/example/AlertDemo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
-import { RocketIcon } from '@radix-icons/vue'
+import { Rocket } from 'lucide-vue-next'
 </script>
 
 <template>
   <Alert>
-    <RocketIcon class="h-4 w-4" />
+    <Rocket class="h-4 w-4" />
     <AlertTitle>Heads up!</AlertTitle>
     <AlertDescription>
       You can add components to your app using the cli.

apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
-import { ExclamationTriangleIcon } from '@radix-icons/vue'
+import { AlertCircle } from 'lucide-vue-next'
 </script>
 
 <template>
   <Alert variant="destructive">
-    <ExclamationTriangleIcon class="w-4 h-4" />
+    <AlertCircle class="w-4 h-4" />
     <AlertTitle>Error</AlertTitle>
     <AlertDescription>
       Your session has expired. Please log in again.

apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue

@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/registry/new-york/ui/dropdown-menu'
-import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
+import { ChevronDown, Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -25,13 +25,13 @@ import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <DropdownMenu>
           <DropdownMenuTrigger class="flex items-center gap-1">
             Components
-            <ChevronDownIcon class="h-4 w-4" />
+            <ChevronDown class="h-4 w-4" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
             <DropdownMenuItem>Documentation</DropdownMenuItem>

apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue

@@ -7,7 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/registry/new-york/ui/breadcrumb'
-import { SlashIcon } from '@radix-icons/vue'
+import { Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -19,7 +19,7 @@ import { SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbLink href="/docs/components/accordion.html">
@@ -27,7 +27,7 @@ import { SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>

apps/www/src/registry/new-york/example/ButtonIconDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRightIcon class="w-4 h-4" />
+    <ChevronRight class="w-4 h-4" />
   </Button>
 </template>

apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { ReloadIcon } from '@radix-icons/vue'
+import { Loader2 } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button disabled>
-    <ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
+    <Loader2 class="w-4 h-4 mr-2 animate-spin" />
     Please wait
   </Button>
 </template>

apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { EnvelopeOpenIcon } from '@radix-icons/vue'
+import { MailOpen } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button>
-    <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
+    <MailOpen class="w-4 h-4 mr-2" /> Login with Email
   </Button>
 </template>

apps/www/src/registry/new-york/example/CalendarForm.vue

@@ -13,8 +13,8 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { CalendarIcon } from 'lucide-vue-next'
 import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'

apps/www/src/registry/new-york/example/CardChat.vue

@@ -18,7 +18,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/registry/new-york/ui/tooltip'
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
+import { Check, Plus, Send } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
 const input = ref('')
@@ -89,7 +89,7 @@ const selectedUsers = ref<User[]>([])
               class="rounded-full p-2.5 flex items-center justify-center"
               @click="open = true"
             >
-              <PlusIcon class="w-4 h-4" />
+              <Plus class="w-4 h-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent :side-offset="10">
@@ -125,7 +125,7 @@ const selectedUsers = ref<User[]>([])
       >
         <Input v-model="input" placeholder="Type a message..." class="flex-1" />
         <Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
-          <PaperPlaneIcon class="w-4 h-4" />
+          <Send class="w-4 h-4" />
           <span class="sr-only">Send</span>
         </Button>
       </form>
@@ -173,7 +173,7 @@ const selectedUsers = ref<User[]>([])
                   {{ user.email }}
                 </p>
               </div>
-              <CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
+              <Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
             </CommandItem>
           </CommandGroup>
         </CommandList>

apps/www/src/registry/new-york/example/CardDemo.vue

@@ -10,7 +10,7 @@ import {
   CardTitle,
 } from '@/registry/new-york/ui/card'
 import { Switch } from '@/registry/new-york/ui/switch'
-import { BellIcon, CheckIcon } from '@radix-icons/vue'
+import { Bell, Check } from 'lucide-vue-next'
 
 const notifications = [
   {
@@ -36,7 +36,7 @@ const notifications = [
     </CardHeader>
     <CardContent class="grid gap-4">
       <div class=" flex items-center space-x-4 rounded-md border p-4">
-        <BellIcon />
+        <Bell />
         <div class="flex-1 space-y-1">
           <p class="text-sm font-medium leading-none">
             Push Notifications
@@ -66,7 +66,7 @@ const notifications = [
     </CardContent>
     <CardFooter>
       <Button class="w-full">
-        <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
+        <Check class="mr-2 h-4 w-4" /> Mark all as read
       </Button>
     </CardFooter>
   </Card>

apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue

@@ -8,8 +8,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/new-york/ui/card'
-import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Minus, Plus } from 'lucide-vue-next'
 
 import { ref } from 'vue'
 
@@ -50,7 +50,7 @@ const data = [
           :disabled="goal <= 200"
           @click="goal -= 10"
         >
-          <MinusIcon class="h-4 w-4" />
+          <Minus class="h-4 w-4" />
           <span class="sr-only">Decrease</span>
         </Button>
         <div class="flex-1 text-center">
@@ -68,7 +68,7 @@ const data = [
           :disabled="goal >= 400"
           @click="goal += 10 "
         >
-          <PlusIcon class="h-4 w-4" />
+          <Plus class="h-4 w-4" />
           <span class="sr-only">Increase</span>
         </Button>
       </div>

apps/www/src/registry/new-york/example/Cards/DataTable.vue

@@ -25,7 +25,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/registry/new-york/ui/table'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
   getCoreRowModel,
@@ -34,6 +33,7 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
 
@@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -179,7 +179,7 @@ const table = useVueTable({
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
               <Button variant="outline" class="ml-auto">
-                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+                Columns <ChevronDown class="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">

apps/www/src/registry/new-york/example/CollapsibleDemo.vue

@@ -6,7 +6,7 @@ import {
   CollapsibleTrigger,
 } from '@/registry/new-york/ui/collapsible'
 
-import { CaretSortIcon } from '@radix-icons/vue'
+import { ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const isOpen = ref(false)
@@ -23,7 +23,7 @@ const isOpen = ref(false)
       </h4>
       <CollapsibleTrigger as-child>
         <Button variant="ghost" size="sm" class="w-9 p-0">
-          <CaretSortIcon class="h-4 w-4" />
+          <ChevronsUpDown class="h-4 w-4" />
           <span class="sr-only">Toggle</span>
         </Button>
       </CollapsibleTrigger>

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

@@ -15,7 +15,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/registry/new-york/ui/popover'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const frameworks = [
@@ -42,7 +42,7 @@ const value = ref('')
         {{ value
           ? frameworks.find((framework) => framework.value === value)?.label
           : "Select framework..." }}
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -63,7 +63,7 @@ const value = ref('')
               }"
             >
               {{ framework.label }}
-              <CheckIcon
+              <Check
                 :class="cn(
                   'ml-auto h-4 w-4',
                   value === framework.value ? 'opacity-100' : 'opacity-0',

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

@@ -22,7 +22,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/registry/new-york/ui/dropdown-menu'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const labels = [
@@ -50,7 +50,7 @@ const open = ref(false)
     <DropdownMenu v-model:open="open">
       <DropdownMenuTrigger as-child>
         <Button variant="ghost" size="sm">
-          <DotsHorizontalIcon />
+          <MoreHorizontal />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" class="w-[200px]">

apps/www/src/registry/new-york/example/ComboboxForm.vue

@@ -24,8 +24,8 @@ import {
   PopoverTrigger,
 } from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
 import * as z from 'zod'
@@ -79,7 +79,7 @@ const onSubmit = handleSubmit((values) => {
                 {{ values.language ? languages.find(
                   (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
-                <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
             </FormControl>
           </PopoverTrigger>
@@ -98,7 +98,7 @@ const onSubmit = handleSubmit((values) => {
                     }"
                   >
                     {{ language.label }}
-                    <CheckIcon
+                    <Check
                       :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                     />
                   </CommandItem>