diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index cf5e676e..77b9a373 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -7,12 +7,6 @@ primitive: https://www.reka-ui.com/docs/components/calendar.html
 
 <ComponentPreview name="DatePickerDemo" />
 
-<Callout class="text-base mt-12">
-
-If you're looking for **previous** Date Picker implementation, checkout to <span class="font-bold underline">[VCalendar Datepicker](/docs/components/v-date-picker)</span> component
-
-</Callout>
-
 ## Installation
 
 The Date Picker is built using a composition of the `<Popover />` and either the `<Calendar />` or `<RangeCalendar />` components.
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
deleted file mode 100644
index ebd3e5fa..00000000
--- a/apps/www/src/public/r/styles/default/VCalendarDemo.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "VCalendarDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VCalendarDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
deleted file mode 100644
index 3b97c7b0..00000000
--- a/apps/www/src/public/r/styles/default/VDatePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
deleted file mode 100644
index 14b92857..00000000
--- a/apps/www/src/public/r/styles/default/VDatePickerForm.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "VDatePickerForm",
-  "type": "registry:example",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "form",
-    "popover",
-    "toast",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\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 v-slot=\"{ componentField, value }\" 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 ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\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": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
deleted file mode 100644
index 71d802a9..00000000
--- a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "VDatePickerWithPresets",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "select",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
deleted file mode 100644
index 73dab0a4..00000000
--- a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerWithRange",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
deleted file mode 100644
index 45cbd2e1..00000000
--- a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDateTimePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
deleted file mode 100644
index cf4db136..00000000
--- a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VRangePickerWithSlot",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/v-calendar.json b/apps/www/src/public/r/styles/default/v-calendar.json
deleted file mode 100644
index 4841ce37..00000000
--- a/apps/www/src/public/r/styles/default/v-calendar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "v-calendar",
-  "type": "registry:ui",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-      "type": "registry:ui",
-      "target": ""
-    },
-    {
-      "path": "ui/v-calendar/index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-      "type": "registry:ui",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index c4c682c7..d07a4b31 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/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 { 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",
+      "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        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index e66ac2e3..daa79266 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/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  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",
+      "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 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          <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": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
deleted file mode 100644
index e9167d70..00000000
--- a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "VCalendarDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VCalendarDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
deleted file mode 100644
index 9af09140..00000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
deleted file mode 100644
index a803d856..00000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "VDatePickerForm",
-  "type": "registry:example",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "form",
-    "popover",
-    "toast",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\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 v-slot=\"{ componentField, value }\" 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 ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\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": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
deleted file mode 100644
index 32796580..00000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "VDatePickerWithPresets",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "select",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
deleted file mode 100644
index e7c10d2e..00000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerWithRange",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
deleted file mode 100644
index 35431428..00000000
--- a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDateTimePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\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          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
deleted file mode 100644
index 15fa7b80..00000000
--- a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VRangePickerWithSlot",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 1ffda214..37ea9efb 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -41,7 +41,7 @@
     },
     {
       "path": "ui/command/CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/v-calendar.json b/apps/www/src/public/r/styles/new-york/v-calendar.json
deleted file mode 100644
index 27c19cda..00000000
--- a/apps/www/src/public/r/styles/new-york/v-calendar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "v-calendar",
-  "type": "registry:ui",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-      "type": "registry:ui",
-      "target": ""
-    },
-    {
-      "path": "ui/v-calendar/index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-      "type": "registry:ui",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index fea589d4..8f66d78c 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -1089,7 +1089,7 @@
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -3467,7 +3467,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 { 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",
+        "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        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4212,7 +4212,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  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",
+        "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 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          <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": ""
       }
diff --git a/apps/www/src/public/registry/colors/gray.json b/apps/www/src/public/registry/colors/gray.json
deleted file mode 100644
index b57a3f18..00000000
--- a/apps/www/src/public/registry/colors/gray.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "gray-950",
-      "card": "white",
-      "card-foreground": "gray-950",
-      "popover": "white",
-      "popover-foreground": "gray-950",
-      "primary": "gray-900",
-      "primary-foreground": "gray-50",
-      "secondary": "gray-100",
-      "secondary-foreground": "gray-900",
-      "muted": "gray-100",
-      "muted-foreground": "gray-500",
-      "accent": "gray-100",
-      "accent-foreground": "gray-900",
-      "destructive": "red-500",
-      "destructive-foreground": "gray-50",
-      "border": "gray-200",
-      "input": "gray-200",
-      "ring": "gray-950"
-    },
-    "dark": {
-      "background": "gray-950",
-      "foreground": "gray-50",
-      "card": "gray-950",
-      "card-foreground": "gray-50",
-      "popover": "gray-950",
-      "popover-foreground": "gray-50",
-      "primary": "gray-50",
-      "primary-foreground": "gray-900",
-      "secondary": "gray-800",
-      "secondary-foreground": "gray-50",
-      "muted": "gray-800",
-      "muted-foreground": "gray-400",
-      "accent": "gray-800",
-      "accent-foreground": "gray-50",
-      "destructive": "red-900",
-      "destructive-foreground": "gray-50",
-      "border": "gray-800",
-      "input": "gray-800",
-      "ring": "gray-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "224 71.4% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "primary": "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      "secondary": "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "accent": "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
-      "ring": "224 71.4% 4.1%"
-    },
-    "dark": {
-      "background": "224 71.4% 4.1%",
-      "foreground": "210 20% 98%",
-      "card": "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "primary": "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      "secondary": "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "accent": "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
-      "ring": "216 12.2% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n\n    --ring: 224 71.4% 4.1%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n\n    --ring: 216 12.2% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/index.json b/apps/www/src/public/registry/colors/index.json
deleted file mode 100644
index 6b70773e..00000000
--- a/apps/www/src/public/registry/colors/index.json
+++ /dev/null
@@ -1,1999 +0,0 @@
-{
-  "inherit": "inherit",
-  "current": "currentColor",
-  "transparent": "transparent",
-  "black": {
-    "hex": "#000000",
-    "rgb": "rgb(0,0,0)",
-    "hsl": "hsl(0,0%,0%)",
-    "rgbChannel": "0 0 0",
-    "hslChannel": "0 0% 0%"
-  },
-  "white": {
-    "hex": "#ffffff",
-    "rgb": "rgb(255,255,255)",
-    "hsl": "hsl(0,0%,100%)",
-    "rgbChannel": "255 255 255",
-    "hslChannel": "0 0% 100%"
-  },
-  "slate": [
-    {
-      "scale": 50,
-      "hex": "#f8fafc",
-      "rgb": "rgb(248,250,252)",
-      "hsl": "hsl(210,40%,98%)",
-      "rgbChannel": "248 250 252",
-      "hslChannel": "210 40% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f1f5f9",
-      "rgb": "rgb(241,245,249)",
-      "hsl": "hsl(210,40%,96.1%)",
-      "rgbChannel": "241 245 249",
-      "hslChannel": "210 40% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e2e8f0",
-      "rgb": "rgb(226,232,240)",
-      "hsl": "hsl(214.3,31.8%,91.4%)",
-      "rgbChannel": "226 232 240",
-      "hslChannel": "214.3 31.8% 91.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#cbd5e1",
-      "rgb": "rgb(203,213,225)",
-      "hsl": "hsl(212.7,26.8%,83.9%)",
-      "rgbChannel": "203 213 225",
-      "hslChannel": "212.7 26.8% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#94a3b8",
-      "rgb": "rgb(148,163,184)",
-      "hsl": "hsl(215,20.2%,65.1%)",
-      "rgbChannel": "148 163 184",
-      "hslChannel": "215 20.2% 65.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#64748b",
-      "rgb": "rgb(100,116,139)",
-      "hsl": "hsl(215.4,16.3%,46.9%)",
-      "rgbChannel": "100 116 139",
-      "hslChannel": "215.4 16.3% 46.9%"
-    },
-    {
-      "scale": 600,
-      "hex": "#475569",
-      "rgb": "rgb(71,85,105)",
-      "hsl": "hsl(215.3,19.3%,34.5%)",
-      "rgbChannel": "71 85 105",
-      "hslChannel": "215.3 19.3% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#334155",
-      "rgb": "rgb(51,65,85)",
-      "hsl": "hsl(215.3,25%,26.7%)",
-      "rgbChannel": "51 65 85",
-      "hslChannel": "215.3 25% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e293b",
-      "rgb": "rgb(30,41,59)",
-      "hsl": "hsl(217.2,32.6%,17.5%)",
-      "rgbChannel": "30 41 59",
-      "hslChannel": "217.2 32.6% 17.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0f172a",
-      "rgb": "rgb(15,23,42)",
-      "hsl": "hsl(222.2,47.4%,11.2%)",
-      "rgbChannel": "15 23 42",
-      "hslChannel": "222.2 47.4% 11.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#020617",
-      "rgb": "rgb(2,6,23)",
-      "hsl": "hsl(222.2,84%,4.9%)",
-      "rgbChannel": "2 6 23",
-      "hslChannel": "222.2 84% 4.9%"
-    }
-  ],
-  "gray": [
-    {
-      "scale": 50,
-      "hex": "#f9fafb",
-      "rgb": "rgb(249,250,251)",
-      "hsl": "hsl(210,20%,98%)",
-      "rgbChannel": "249 250 251",
-      "hslChannel": "210 20% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3f4f6",
-      "rgb": "rgb(243,244,246)",
-      "hsl": "hsl(220,14.3%,95.9%)",
-      "rgbChannel": "243 244 246",
-      "hslChannel": "220 14.3% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e7eb",
-      "rgb": "rgb(229,231,235)",
-      "hsl": "hsl(220,13%,91%)",
-      "rgbChannel": "229 231 235",
-      "hslChannel": "220 13% 91%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d1d5db",
-      "rgb": "rgb(209,213,219)",
-      "hsl": "hsl(216,12.2%,83.9%)",
-      "rgbChannel": "209 213 219",
-      "hslChannel": "216 12.2% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#9ca3af",
-      "rgb": "rgb(156,163,175)",
-      "hsl": "hsl(217.9,10.6%,64.9%)",
-      "rgbChannel": "156 163 175",
-      "hslChannel": "217.9 10.6% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6b7280",
-      "rgb": "rgb(107,114,128)",
-      "hsl": "hsl(220,8.9%,46.1%)",
-      "rgbChannel": "107 114 128",
-      "hslChannel": "220 8.9% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4b5563",
-      "rgb": "rgb(75,85,99)",
-      "hsl": "hsl(215,13.8%,34.1%)",
-      "rgbChannel": "75 85 99",
-      "hslChannel": "215 13.8% 34.1%"
-    },
-    {
-      "scale": 700,
-      "hex": "#374151",
-      "rgb": "rgb(55,65,81)",
-      "hsl": "hsl(216.9,19.1%,26.7%)",
-      "rgbChannel": "55 65 81",
-      "hslChannel": "216.9 19.1% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1f2937",
-      "rgb": "rgb(31,41,55)",
-      "hsl": "hsl(215,27.9%,16.9%)",
-      "rgbChannel": "31 41 55",
-      "hslChannel": "215 27.9% 16.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#111827",
-      "rgb": "rgb(17,24,39)",
-      "hsl": "hsl(220.9,39.3%,11%)",
-      "rgbChannel": "17 24 39",
-      "hslChannel": "220.9 39.3% 11%"
-    },
-    {
-      "scale": 950,
-      "hex": "#030712",
-      "rgb": "rgb(3,7,18)",
-      "hsl": "hsl(224,71.4%,4.1%)",
-      "rgbChannel": "3 7 18",
-      "hslChannel": "224 71.4% 4.1%"
-    }
-  ],
-  "zinc": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f4f4f5",
-      "rgb": "rgb(244,244,245)",
-      "hsl": "hsl(240,4.8%,95.9%)",
-      "rgbChannel": "244 244 245",
-      "hslChannel": "240 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e4e4e7",
-      "rgb": "rgb(228,228,231)",
-      "hsl": "hsl(240,5.9%,90%)",
-      "rgbChannel": "228 228 231",
-      "hslChannel": "240 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d8",
-      "rgb": "rgb(212,212,216)",
-      "hsl": "hsl(240,4.9%,83.9%)",
-      "rgbChannel": "212 212 216",
-      "hslChannel": "240 4.9% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a1a1aa",
-      "rgb": "rgb(161,161,170)",
-      "hsl": "hsl(240,5%,64.9%)",
-      "rgbChannel": "161 161 170",
-      "hslChannel": "240 5% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#71717a",
-      "rgb": "rgb(113,113,122)",
-      "hsl": "hsl(240,3.8%,46.1%)",
-      "rgbChannel": "113 113 122",
-      "hslChannel": "240 3.8% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#52525b",
-      "rgb": "rgb(82,82,91)",
-      "hsl": "hsl(240,5.2%,33.9%)",
-      "rgbChannel": "82 82 91",
-      "hslChannel": "240 5.2% 33.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#3f3f46",
-      "rgb": "rgb(63,63,70)",
-      "hsl": "hsl(240,5.3%,26.1%)",
-      "rgbChannel": "63 63 70",
-      "hslChannel": "240 5.3% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#27272a",
-      "rgb": "rgb(39,39,42)",
-      "hsl": "hsl(240,3.7%,15.9%)",
-      "rgbChannel": "39 39 42",
-      "hslChannel": "240 3.7% 15.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#18181b",
-      "rgb": "rgb(24,24,27)",
-      "hsl": "hsl(240,5.9%,10%)",
-      "rgbChannel": "24 24 27",
-      "hslChannel": "240 5.9% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#09090b",
-      "rgb": "rgb(9,9,11)",
-      "hsl": "hsl(240,10%,3.9%)",
-      "rgbChannel": "9 9 11",
-      "hslChannel": "240 10% 3.9%"
-    }
-  ],
-  "neutral": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f5",
-      "rgb": "rgb(245,245,245)",
-      "hsl": "hsl(0,0%,96.1%)",
-      "rgbChannel": "245 245 245",
-      "hslChannel": "0 0% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e5e5",
-      "rgb": "rgb(229,229,229)",
-      "hsl": "hsl(0,0%,89.8%)",
-      "rgbChannel": "229 229 229",
-      "hslChannel": "0 0% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d4",
-      "rgb": "rgb(212,212,212)",
-      "hsl": "hsl(0,0%,83.1%)",
-      "rgbChannel": "212 212 212",
-      "hslChannel": "0 0% 83.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3a3a3",
-      "rgb": "rgb(163,163,163)",
-      "hsl": "hsl(0,0%,63.9%)",
-      "rgbChannel": "163 163 163",
-      "hslChannel": "0 0% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#737373",
-      "rgb": "rgb(115,115,115)",
-      "hsl": "hsl(0,0%,45.1%)",
-      "rgbChannel": "115 115 115",
-      "hslChannel": "0 0% 45.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#525252",
-      "rgb": "rgb(82,82,82)",
-      "hsl": "hsl(0,0%,32.2%)",
-      "rgbChannel": "82 82 82",
-      "hslChannel": "0 0% 32.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#404040",
-      "rgb": "rgb(64,64,64)",
-      "hsl": "hsl(0,0%,25.1%)",
-      "rgbChannel": "64 64 64",
-      "hslChannel": "0 0% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#262626",
-      "rgb": "rgb(38,38,38)",
-      "hsl": "hsl(0,0%,14.9%)",
-      "rgbChannel": "38 38 38",
-      "hslChannel": "0 0% 14.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#171717",
-      "rgb": "rgb(23,23,23)",
-      "hsl": "hsl(0,0%,9%)",
-      "rgbChannel": "23 23 23",
-      "hslChannel": "0 0% 9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0a0a0a",
-      "rgb": "rgb(10,10,10)",
-      "hsl": "hsl(0,0%,3.9%)",
-      "rgbChannel": "10 10 10",
-      "hslChannel": "0 0% 3.9%"
-    }
-  ],
-  "stone": [
-    {
-      "scale": 50,
-      "hex": "#fafaf9",
-      "rgb": "rgb(250,250,249)",
-      "hsl": "hsl(60,9.1%,97.8%)",
-      "rgbChannel": "250 250 249",
-      "hslChannel": "60 9.1% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f4",
-      "rgb": "rgb(245,245,244)",
-      "hsl": "hsl(60,4.8%,95.9%)",
-      "rgbChannel": "245 245 244",
-      "hslChannel": "60 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e7e5e4",
-      "rgb": "rgb(231,229,228)",
-      "hsl": "hsl(20,5.9%,90%)",
-      "rgbChannel": "231 229 228",
-      "hslChannel": "20 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d6d3d1",
-      "rgb": "rgb(214,211,209)",
-      "hsl": "hsl(24,5.7%,82.9%)",
-      "rgbChannel": "214 211 209",
-      "hslChannel": "24 5.7% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a8a29e",
-      "rgb": "rgb(168,162,158)",
-      "hsl": "hsl(24,5.4%,63.9%)",
-      "rgbChannel": "168 162 158",
-      "hslChannel": "24 5.4% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#78716c",
-      "rgb": "rgb(120,113,108)",
-      "hsl": "hsl(25,5.3%,44.7%)",
-      "rgbChannel": "120 113 108",
-      "hslChannel": "25 5.3% 44.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#57534e",
-      "rgb": "rgb(87,83,78)",
-      "hsl": "hsl(33.3,5.5%,32.4%)",
-      "rgbChannel": "87 83 78",
-      "hslChannel": "33.3 5.5% 32.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#44403c",
-      "rgb": "rgb(68,64,60)",
-      "hsl": "hsl(30,6.3%,25.1%)",
-      "rgbChannel": "68 64 60",
-      "hslChannel": "30 6.3% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#292524",
-      "rgb": "rgb(41,37,36)",
-      "hsl": "hsl(12,6.5%,15.1%)",
-      "rgbChannel": "41 37 36",
-      "hslChannel": "12 6.5% 15.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1c1917",
-      "rgb": "rgb(28,25,23)",
-      "hsl": "hsl(24,9.8%,10%)",
-      "rgbChannel": "28 25 23",
-      "hslChannel": "24 9.8% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0c0a09",
-      "rgb": "rgb(12,10,9)",
-      "hsl": "hsl(20,14.3%,4.1%)",
-      "rgbChannel": "12 10 9",
-      "hslChannel": "20 14.3% 4.1%"
-    }
-  ],
-  "red": [
-    {
-      "scale": 50,
-      "hex": "#fef2f2",
-      "rgb": "rgb(254,242,242)",
-      "hsl": "hsl(0,85.7%,97.3%)",
-      "rgbChannel": "254 242 242",
-      "hslChannel": "0 85.7% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fee2e2",
-      "rgb": "rgb(254,226,226)",
-      "hsl": "hsl(0,93.3%,94.1%)",
-      "rgbChannel": "254 226 226",
-      "hslChannel": "0 93.3% 94.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecaca",
-      "rgb": "rgb(254,202,202)",
-      "hsl": "hsl(0,96.3%,89.4%)",
-      "rgbChannel": "254 202 202",
-      "hslChannel": "0 96.3% 89.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fca5a5",
-      "rgb": "rgb(252,165,165)",
-      "hsl": "hsl(0,93.5%,81.8%)",
-      "rgbChannel": "252 165 165",
-      "hslChannel": "0 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f87171",
-      "rgb": "rgb(248,113,113)",
-      "hsl": "hsl(0,90.6%,70.8%)",
-      "rgbChannel": "248 113 113",
-      "hslChannel": "0 90.6% 70.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ef4444",
-      "rgb": "rgb(239,68,68)",
-      "hsl": "hsl(0,84.2%,60.2%)",
-      "rgbChannel": "239 68 68",
-      "hslChannel": "0 84.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#dc2626",
-      "rgb": "rgb(220,38,38)",
-      "hsl": "hsl(0,72.2%,50.6%)",
-      "rgbChannel": "220 38 38",
-      "hslChannel": "0 72.2% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b91c1c",
-      "rgb": "rgb(185,28,28)",
-      "hsl": "hsl(0,73.7%,41.8%)",
-      "rgbChannel": "185 28 28",
-      "hslChannel": "0 73.7% 41.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#991b1b",
-      "rgb": "rgb(153,27,27)",
-      "hsl": "hsl(0,70%,35.3%)",
-      "rgbChannel": "153 27 27",
-      "hslChannel": "0 70% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7f1d1d",
-      "rgb": "rgb(127,29,29)",
-      "hsl": "hsl(0,62.8%,30.6%)",
-      "rgbChannel": "127 29 29",
-      "hslChannel": "0 62.8% 30.6%"
-    },
-    {
-      "scale": 950,
-      "hex": "#450a0a",
-      "rgb": "rgb(69,10,10)",
-      "hsl": "hsl(0,74.7%,15.5%)",
-      "rgbChannel": "69 10 10",
-      "hslChannel": "0 74.7% 15.5%"
-    }
-  ],
-  "orange": [
-    {
-      "scale": 50,
-      "hex": "#fff7ed",
-      "rgb": "rgb(255,247,237)",
-      "hsl": "hsl(33.3,100%,96.5%)",
-      "rgbChannel": "255 247 237",
-      "hslChannel": "33.3 100% 96.5%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffedd5",
-      "rgb": "rgb(255,237,213)",
-      "hsl": "hsl(34.3,100%,91.8%)",
-      "rgbChannel": "255 237 213",
-      "hslChannel": "34.3 100% 91.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fed7aa",
-      "rgb": "rgb(254,215,170)",
-      "hsl": "hsl(32.1,97.7%,83.1%)",
-      "rgbChannel": "254 215 170",
-      "hslChannel": "32.1 97.7% 83.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fdba74",
-      "rgb": "rgb(253,186,116)",
-      "hsl": "hsl(30.7,97.2%,72.4%)",
-      "rgbChannel": "253 186 116",
-      "hslChannel": "30.7 97.2% 72.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb923c",
-      "rgb": "rgb(251,146,60)",
-      "hsl": "hsl(27,96%,61%)",
-      "rgbChannel": "251 146 60",
-      "hslChannel": "27 96% 61%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f97316",
-      "rgb": "rgb(249,115,22)",
-      "hsl": "hsl(24.6,95%,53.1%)",
-      "rgbChannel": "249 115 22",
-      "hslChannel": "24.6 95% 53.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ea580c",
-      "rgb": "rgb(234,88,12)",
-      "hsl": "hsl(20.5,90.2%,48.2%)",
-      "rgbChannel": "234 88 12",
-      "hslChannel": "20.5 90.2% 48.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#c2410c",
-      "rgb": "rgb(194,65,12)",
-      "hsl": "hsl(17.5,88.3%,40.4%)",
-      "rgbChannel": "194 65 12",
-      "hslChannel": "17.5 88.3% 40.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9a3412",
-      "rgb": "rgb(154,52,18)",
-      "hsl": "hsl(15,79.1%,33.7%)",
-      "rgbChannel": "154 52 18",
-      "hslChannel": "15 79.1% 33.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7c2d12",
-      "rgb": "rgb(124,45,18)",
-      "hsl": "hsl(15.3,74.6%,27.8%)",
-      "rgbChannel": "124 45 18",
-      "hslChannel": "15.3 74.6% 27.8%"
-    },
-    {
-      "scale": 950,
-      "hex": "#431407",
-      "rgb": "rgb(67,20,7)",
-      "hsl": "hsl(13,81.1%,14.5%)",
-      "rgbChannel": "67 20 7",
-      "hslChannel": "13 81.1% 14.5%"
-    }
-  ],
-  "amber": [
-    {
-      "scale": 50,
-      "hex": "#fffbeb",
-      "rgb": "rgb(255,251,235)",
-      "hsl": "hsl(48,100%,96.1%)",
-      "rgbChannel": "255 251 235",
-      "hslChannel": "48 100% 96.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef3c7",
-      "rgb": "rgb(254,243,199)",
-      "hsl": "hsl(48,96.5%,88.8%)",
-      "rgbChannel": "254 243 199",
-      "hslChannel": "48 96.5% 88.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fde68a",
-      "rgb": "rgb(253,230,138)",
-      "hsl": "hsl(48,96.6%,76.7%)",
-      "rgbChannel": "253 230 138",
-      "hslChannel": "48 96.6% 76.7%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fcd34d",
-      "rgb": "rgb(252,211,77)",
-      "hsl": "hsl(45.9,96.7%,64.5%)",
-      "rgbChannel": "252 211 77",
-      "hslChannel": "45.9 96.7% 64.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fbbf24",
-      "rgb": "rgb(251,191,36)",
-      "hsl": "hsl(43.3,96.4%,56.3%)",
-      "rgbChannel": "251 191 36",
-      "hslChannel": "43.3 96.4% 56.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f59e0b",
-      "rgb": "rgb(245,158,11)",
-      "hsl": "hsl(37.7,92.1%,50.2%)",
-      "rgbChannel": "245 158 11",
-      "hslChannel": "37.7 92.1% 50.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#d97706",
-      "rgb": "rgb(217,119,6)",
-      "hsl": "hsl(32.1,94.6%,43.7%)",
-      "rgbChannel": "217 119 6",
-      "hslChannel": "32.1 94.6% 43.7%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b45309",
-      "rgb": "rgb(180,83,9)",
-      "hsl": "hsl(26,90.5%,37.1%)",
-      "rgbChannel": "180 83 9",
-      "hslChannel": "26 90.5% 37.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#92400e",
-      "rgb": "rgb(146,64,14)",
-      "hsl": "hsl(22.7,82.5%,31.4%)",
-      "rgbChannel": "146 64 14",
-      "hslChannel": "22.7 82.5% 31.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#78350f",
-      "rgb": "rgb(120,53,15)",
-      "hsl": "hsl(21.7,77.8%,26.5%)",
-      "rgbChannel": "120 53 15",
-      "hslChannel": "21.7 77.8% 26.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#451a03",
-      "rgb": "rgb(69,26,3)",
-      "hsl": "hsl(20.9,91.7%,14.1%)",
-      "rgbChannel": "69 26 3",
-      "hslChannel": "20.9 91.7% 14.1%"
-    }
-  ],
-  "yellow": [
-    {
-      "scale": 50,
-      "hex": "#fefce8",
-      "rgb": "rgb(254,252,232)",
-      "hsl": "hsl(54.5,91.7%,95.3%)",
-      "rgbChannel": "254 252 232",
-      "hslChannel": "54.5 91.7% 95.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef9c3",
-      "rgb": "rgb(254,249,195)",
-      "hsl": "hsl(54.9,96.7%,88%)",
-      "rgbChannel": "254 249 195",
-      "hslChannel": "54.9 96.7% 88%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fef08a",
-      "rgb": "rgb(254,240,138)",
-      "hsl": "hsl(52.8,98.3%,76.9%)",
-      "rgbChannel": "254 240 138",
-      "hslChannel": "52.8 98.3% 76.9%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fde047",
-      "rgb": "rgb(253,224,71)",
-      "hsl": "hsl(50.4,97.8%,63.5%)",
-      "rgbChannel": "253 224 71",
-      "hslChannel": "50.4 97.8% 63.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#facc15",
-      "rgb": "rgb(250,204,21)",
-      "hsl": "hsl(47.9,95.8%,53.1%)",
-      "rgbChannel": "250 204 21",
-      "hslChannel": "47.9 95.8% 53.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#eab308",
-      "rgb": "rgb(234,179,8)",
-      "hsl": "hsl(45.4,93.4%,47.5%)",
-      "rgbChannel": "234 179 8",
-      "hslChannel": "45.4 93.4% 47.5%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ca8a04",
-      "rgb": "rgb(202,138,4)",
-      "hsl": "hsl(40.6,96.1%,40.4%)",
-      "rgbChannel": "202 138 4",
-      "hslChannel": "40.6 96.1% 40.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a16207",
-      "rgb": "rgb(161,98,7)",
-      "hsl": "hsl(35.5,91.7%,32.9%)",
-      "rgbChannel": "161 98 7",
-      "hslChannel": "35.5 91.7% 32.9%"
-    },
-    {
-      "scale": 800,
-      "hex": "#854d0e",
-      "rgb": "rgb(133,77,14)",
-      "hsl": "hsl(31.8,81%,28.8%)",
-      "rgbChannel": "133 77 14",
-      "hslChannel": "31.8 81% 28.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#713f12",
-      "rgb": "rgb(113,63,18)",
-      "hsl": "hsl(28.4,72.5%,25.7%)",
-      "rgbChannel": "113 63 18",
-      "hslChannel": "28.4 72.5% 25.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#422006",
-      "rgb": "rgb(66,32,6)",
-      "hsl": "hsl(26,83.3%,14.1%)",
-      "rgbChannel": "66 32 6",
-      "hslChannel": "26 83.3% 14.1%"
-    }
-  ],
-  "lime": [
-    {
-      "scale": 50,
-      "hex": "#f7fee7",
-      "rgb": "rgb(247,254,231)",
-      "hsl": "hsl(78.3,92%,95.1%)",
-      "rgbChannel": "247 254 231",
-      "hslChannel": "78.3 92% 95.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ecfccb",
-      "rgb": "rgb(236,252,203)",
-      "hsl": "hsl(79.6,89.1%,89.2%)",
-      "rgbChannel": "236 252 203",
-      "hslChannel": "79.6 89.1% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#d9f99d",
-      "rgb": "rgb(217,249,157)",
-      "hsl": "hsl(80.9,88.5%,79.6%)",
-      "rgbChannel": "217 249 157",
-      "hslChannel": "80.9 88.5% 79.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#bef264",
-      "rgb": "rgb(190,242,100)",
-      "hsl": "hsl(82,84.5%,67.1%)",
-      "rgbChannel": "190 242 100",
-      "hslChannel": "82 84.5% 67.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3e635",
-      "rgb": "rgb(163,230,53)",
-      "hsl": "hsl(82.7,78%,55.5%)",
-      "rgbChannel": "163 230 53",
-      "hslChannel": "82.7 78% 55.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#84cc16",
-      "rgb": "rgb(132,204,22)",
-      "hsl": "hsl(83.7,80.5%,44.3%)",
-      "rgbChannel": "132 204 22",
-      "hslChannel": "83.7 80.5% 44.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#65a30d",
-      "rgb": "rgb(101,163,13)",
-      "hsl": "hsl(84.8,85.2%,34.5%)",
-      "rgbChannel": "101 163 13",
-      "hslChannel": "84.8 85.2% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4d7c0f",
-      "rgb": "rgb(77,124,15)",
-      "hsl": "hsl(85.9,78.4%,27.3%)",
-      "rgbChannel": "77 124 15",
-      "hslChannel": "85.9 78.4% 27.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3f6212",
-      "rgb": "rgb(63,98,18)",
-      "hsl": "hsl(86.3,69%,22.7%)",
-      "rgbChannel": "63 98 18",
-      "hslChannel": "86.3 69% 22.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#365314",
-      "rgb": "rgb(54,83,20)",
-      "hsl": "hsl(87.6,61.2%,20.2%)",
-      "rgbChannel": "54 83 20",
-      "hslChannel": "87.6 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1a2e05",
-      "rgb": "rgb(26,46,5)",
-      "hsl": "hsl(89.3,80.4%,10%)",
-      "rgbChannel": "26 46 5",
-      "hslChannel": "89.3 80.4% 10%"
-    }
-  ],
-  "green": [
-    {
-      "scale": 50,
-      "hex": "#f0fdf4",
-      "rgb": "rgb(240,253,244)",
-      "hsl": "hsl(138.5,76.5%,96.7%)",
-      "rgbChannel": "240 253 244",
-      "hslChannel": "138.5 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dcfce7",
-      "rgb": "rgb(220,252,231)",
-      "hsl": "hsl(140.6,84.2%,92.5%)",
-      "rgbChannel": "220 252 231",
-      "hslChannel": "140.6 84.2% 92.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bbf7d0",
-      "rgb": "rgb(187,247,208)",
-      "hsl": "hsl(141,78.9%,85.1%)",
-      "rgbChannel": "187 247 208",
-      "hslChannel": "141 78.9% 85.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#86efac",
-      "rgb": "rgb(134,239,172)",
-      "hsl": "hsl(141.7,76.6%,73.1%)",
-      "rgbChannel": "134 239 172",
-      "hslChannel": "141.7 76.6% 73.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#4ade80",
-      "rgb": "rgb(74,222,128)",
-      "hsl": "hsl(141.9,69.2%,58%)",
-      "rgbChannel": "74 222 128",
-      "hslChannel": "141.9 69.2% 58%"
-    },
-    {
-      "scale": 500,
-      "hex": "#22c55e",
-      "rgb": "rgb(34,197,94)",
-      "hsl": "hsl(142.1,70.6%,45.3%)",
-      "rgbChannel": "34 197 94",
-      "hslChannel": "142.1 70.6% 45.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#16a34a",
-      "rgb": "rgb(22,163,74)",
-      "hsl": "hsl(142.1,76.2%,36.3%)",
-      "rgbChannel": "22 163 74",
-      "hslChannel": "142.1 76.2% 36.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#15803d",
-      "rgb": "rgb(21,128,61)",
-      "hsl": "hsl(142.4,71.8%,29.2%)",
-      "rgbChannel": "21 128 61",
-      "hslChannel": "142.4 71.8% 29.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#166534",
-      "rgb": "rgb(22,101,52)",
-      "hsl": "hsl(142.8,64.2%,24.1%)",
-      "rgbChannel": "22 101 52",
-      "hslChannel": "142.8 64.2% 24.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#14532d",
-      "rgb": "rgb(20,83,45)",
-      "hsl": "hsl(143.8,61.2%,20.2%)",
-      "rgbChannel": "20 83 45",
-      "hslChannel": "143.8 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#052e16",
-      "rgb": "rgb(5,46,22)",
-      "hsl": "hsl(144.9,80.4%,10%)",
-      "rgbChannel": "5 46 22",
-      "hslChannel": "144.9 80.4% 10%"
-    }
-  ],
-  "emerald": [
-    {
-      "scale": 50,
-      "hex": "#ecfdf5",
-      "rgb": "rgb(236,253,245)",
-      "hsl": "hsl(151.8,81%,95.9%)",
-      "rgbChannel": "236 253 245",
-      "hslChannel": "151.8 81% 95.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#d1fae5",
-      "rgb": "rgb(209,250,229)",
-      "hsl": "hsl(149.3,80.4%,90%)",
-      "rgbChannel": "209 250 229",
-      "hslChannel": "149.3 80.4% 90%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a7f3d0",
-      "rgb": "rgb(167,243,208)",
-      "hsl": "hsl(152.4,76%,80.4%)",
-      "rgbChannel": "167 243 208",
-      "hslChannel": "152.4 76% 80.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#6ee7b7",
-      "rgb": "rgb(110,231,183)",
-      "hsl": "hsl(156.2,71.6%,66.9%)",
-      "rgbChannel": "110 231 183",
-      "hslChannel": "156.2 71.6% 66.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#34d399",
-      "rgb": "rgb(52,211,153)",
-      "hsl": "hsl(158.1,64.4%,51.6%)",
-      "rgbChannel": "52 211 153",
-      "hslChannel": "158.1 64.4% 51.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#10b981",
-      "rgb": "rgb(16,185,129)",
-      "hsl": "hsl(160.1,84.1%,39.4%)",
-      "rgbChannel": "16 185 129",
-      "hslChannel": "160.1 84.1% 39.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#059669",
-      "rgb": "rgb(5,150,105)",
-      "hsl": "hsl(161.4,93.5%,30.4%)",
-      "rgbChannel": "5 150 105",
-      "hslChannel": "161.4 93.5% 30.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#047857",
-      "rgb": "rgb(4,120,87)",
-      "hsl": "hsl(162.9,93.5%,24.3%)",
-      "rgbChannel": "4 120 87",
-      "hslChannel": "162.9 93.5% 24.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#065f46",
-      "rgb": "rgb(6,95,70)",
-      "hsl": "hsl(163.1,88.1%,19.8%)",
-      "rgbChannel": "6 95 70",
-      "hslChannel": "163.1 88.1% 19.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#064e3b",
-      "rgb": "rgb(6,78,59)",
-      "hsl": "hsl(164.2,85.7%,16.5%)",
-      "rgbChannel": "6 78 59",
-      "hslChannel": "164.2 85.7% 16.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#022c22",
-      "rgb": "rgb(2,44,34)",
-      "hsl": "hsl(165.7,91.3%,9%)",
-      "rgbChannel": "2 44 34",
-      "hslChannel": "165.7 91.3% 9%"
-    }
-  ],
-  "teal": [
-    {
-      "scale": 50,
-      "hex": "#f0fdfa",
-      "rgb": "rgb(240,253,250)",
-      "hsl": "hsl(166.2,76.5%,96.7%)",
-      "rgbChannel": "240 253 250",
-      "hslChannel": "166.2 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ccfbf1",
-      "rgb": "rgb(204,251,241)",
-      "hsl": "hsl(167.2,85.5%,89.2%)",
-      "rgbChannel": "204 251 241",
-      "hslChannel": "167.2 85.5% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#99f6e4",
-      "rgb": "rgb(153,246,228)",
-      "hsl": "hsl(168.4,83.8%,78.2%)",
-      "rgbChannel": "153 246 228",
-      "hslChannel": "168.4 83.8% 78.2%"
-    },
-    {
-      "scale": 300,
-      "hex": "#5eead4",
-      "rgb": "rgb(94,234,212)",
-      "hsl": "hsl(170.6,76.9%,64.3%)",
-      "rgbChannel": "94 234 212",
-      "hslChannel": "170.6 76.9% 64.3%"
-    },
-    {
-      "scale": 400,
-      "hex": "#2dd4bf",
-      "rgb": "rgb(45,212,191)",
-      "hsl": "hsl(172.5,66%,50.4%)",
-      "rgbChannel": "45 212 191",
-      "hslChannel": "172.5 66% 50.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#14b8a6",
-      "rgb": "rgb(20,184,166)",
-      "hsl": "hsl(173.4,80.4%,40%)",
-      "rgbChannel": "20 184 166",
-      "hslChannel": "173.4 80.4% 40%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0d9488",
-      "rgb": "rgb(13,148,136)",
-      "hsl": "hsl(174.7,83.9%,31.6%)",
-      "rgbChannel": "13 148 136",
-      "hslChannel": "174.7 83.9% 31.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0f766e",
-      "rgb": "rgb(15,118,110)",
-      "hsl": "hsl(175.3,77.4%,26.1%)",
-      "rgbChannel": "15 118 110",
-      "hslChannel": "175.3 77.4% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#115e59",
-      "rgb": "rgb(17,94,89)",
-      "hsl": "hsl(176.1,69.4%,21.8%)",
-      "rgbChannel": "17 94 89",
-      "hslChannel": "176.1 69.4% 21.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#134e4a",
-      "rgb": "rgb(19,78,74)",
-      "hsl": "hsl(175.9,60.8%,19%)",
-      "rgbChannel": "19 78 74",
-      "hslChannel": "175.9 60.8% 19%"
-    },
-    {
-      "scale": 950,
-      "hex": "#042f2e",
-      "rgb": "rgb(4,47,46)",
-      "hsl": "hsl(178.6,84.3%,10%)",
-      "rgbChannel": "4 47 46",
-      "hslChannel": "178.6 84.3% 10%"
-    }
-  ],
-  "cyan": [
-    {
-      "scale": 50,
-      "hex": "#ecfeff",
-      "rgb": "rgb(236,254,255)",
-      "hsl": "hsl(183.2,100%,96.3%)",
-      "rgbChannel": "236 254 255",
-      "hslChannel": "183.2 100% 96.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#cffafe",
-      "rgb": "rgb(207,250,254)",
-      "hsl": "hsl(185.1,95.9%,90.4%)",
-      "rgbChannel": "207 250 254",
-      "hslChannel": "185.1 95.9% 90.4%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a5f3fc",
-      "rgb": "rgb(165,243,252)",
-      "hsl": "hsl(186.2,93.5%,81.8%)",
-      "rgbChannel": "165 243 252",
-      "hslChannel": "186.2 93.5% 81.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#67e8f9",
-      "rgb": "rgb(103,232,249)",
-      "hsl": "hsl(187,92.4%,69%)",
-      "rgbChannel": "103 232 249",
-      "hslChannel": "187 92.4% 69%"
-    },
-    {
-      "scale": 400,
-      "hex": "#22d3ee",
-      "rgb": "rgb(34,211,238)",
-      "hsl": "hsl(187.9,85.7%,53.3%)",
-      "rgbChannel": "34 211 238",
-      "hslChannel": "187.9 85.7% 53.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#06b6d4",
-      "rgb": "rgb(6,182,212)",
-      "hsl": "hsl(188.7,94.5%,42.7%)",
-      "rgbChannel": "6 182 212",
-      "hslChannel": "188.7 94.5% 42.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0891b2",
-      "rgb": "rgb(8,145,178)",
-      "hsl": "hsl(191.6,91.4%,36.5%)",
-      "rgbChannel": "8 145 178",
-      "hslChannel": "191.6 91.4% 36.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0e7490",
-      "rgb": "rgb(14,116,144)",
-      "hsl": "hsl(192.9,82.3%,31%)",
-      "rgbChannel": "14 116 144",
-      "hslChannel": "192.9 82.3% 31%"
-    },
-    {
-      "scale": 800,
-      "hex": "#155e75",
-      "rgb": "rgb(21,94,117)",
-      "hsl": "hsl(194.4,69.6%,27.1%)",
-      "rgbChannel": "21 94 117",
-      "hslChannel": "194.4 69.6% 27.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#164e63",
-      "rgb": "rgb(22,78,99)",
-      "hsl": "hsl(196.4,63.6%,23.7%)",
-      "rgbChannel": "22 78 99",
-      "hslChannel": "196.4 63.6% 23.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#083344",
-      "rgb": "rgb(8,51,68)",
-      "hsl": "hsl(197,78.9%,14.9%)",
-      "rgbChannel": "8 51 68",
-      "hslChannel": "197 78.9% 14.9%"
-    }
-  ],
-  "sky": [
-    {
-      "scale": 50,
-      "hex": "#f0f9ff",
-      "rgb": "rgb(240,249,255)",
-      "hsl": "hsl(204,100%,97.1%)",
-      "rgbChannel": "240 249 255",
-      "hslChannel": "204 100% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0f2fe",
-      "rgb": "rgb(224,242,254)",
-      "hsl": "hsl(204,93.8%,93.7%)",
-      "rgbChannel": "224 242 254",
-      "hslChannel": "204 93.8% 93.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bae6fd",
-      "rgb": "rgb(186,230,253)",
-      "hsl": "hsl(200.6,94.4%,86.1%)",
-      "rgbChannel": "186 230 253",
-      "hslChannel": "200.6 94.4% 86.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#7dd3fc",
-      "rgb": "rgb(125,211,252)",
-      "hsl": "hsl(199.4,95.5%,73.9%)",
-      "rgbChannel": "125 211 252",
-      "hslChannel": "199.4 95.5% 73.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#38bdf8",
-      "rgb": "rgb(56,189,248)",
-      "hsl": "hsl(198.4,93.2%,59.6%)",
-      "rgbChannel": "56 189 248",
-      "hslChannel": "198.4 93.2% 59.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#0ea5e9",
-      "rgb": "rgb(14,165,233)",
-      "hsl": "hsl(198.6,88.7%,48.4%)",
-      "rgbChannel": "14 165 233",
-      "hslChannel": "198.6 88.7% 48.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0284c7",
-      "rgb": "rgb(2,132,199)",
-      "hsl": "hsl(200.4,98%,39.4%)",
-      "rgbChannel": "2 132 199",
-      "hslChannel": "200.4 98% 39.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0369a1",
-      "rgb": "rgb(3,105,161)",
-      "hsl": "hsl(201.3,96.3%,32.2%)",
-      "rgbChannel": "3 105 161",
-      "hslChannel": "201.3 96.3% 32.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#075985",
-      "rgb": "rgb(7,89,133)",
-      "hsl": "hsl(201,90%,27.5%)",
-      "rgbChannel": "7 89 133",
-      "hslChannel": "201 90% 27.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0c4a6e",
-      "rgb": "rgb(12,74,110)",
-      "hsl": "hsl(202,80.3%,23.9%)",
-      "rgbChannel": "12 74 110",
-      "hslChannel": "202 80.3% 23.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#082f49",
-      "rgb": "rgb(8,47,73)",
-      "hsl": "hsl(204,80.2%,15.9%)",
-      "rgbChannel": "8 47 73",
-      "hslChannel": "204 80.2% 15.9%"
-    }
-  ],
-  "blue": [
-    {
-      "scale": 50,
-      "hex": "#eff6ff",
-      "rgb": "rgb(239,246,255)",
-      "hsl": "hsl(213.8,100%,96.9%)",
-      "rgbChannel": "239 246 255",
-      "hslChannel": "213.8 100% 96.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dbeafe",
-      "rgb": "rgb(219,234,254)",
-      "hsl": "hsl(214.3,94.6%,92.7%)",
-      "rgbChannel": "219 234 254",
-      "hslChannel": "214.3 94.6% 92.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bfdbfe",
-      "rgb": "rgb(191,219,254)",
-      "hsl": "hsl(213.3,96.9%,87.3%)",
-      "rgbChannel": "191 219 254",
-      "hslChannel": "213.3 96.9% 87.3%"
-    },
-    {
-      "scale": 300,
-      "hex": "#93c5fd",
-      "rgb": "rgb(147,197,253)",
-      "hsl": "hsl(211.7,96.4%,78.4%)",
-      "rgbChannel": "147 197 253",
-      "hslChannel": "211.7 96.4% 78.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#60a5fa",
-      "rgb": "rgb(96,165,250)",
-      "hsl": "hsl(213.1,93.9%,67.8%)",
-      "rgbChannel": "96 165 250",
-      "hslChannel": "213.1 93.9% 67.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#3b82f6",
-      "rgb": "rgb(59,130,246)",
-      "hsl": "hsl(217.2,91.2%,59.8%)",
-      "rgbChannel": "59 130 246",
-      "hslChannel": "217.2 91.2% 59.8%"
-    },
-    {
-      "scale": 600,
-      "hex": "#2563eb",
-      "rgb": "rgb(37,99,235)",
-      "hsl": "hsl(221.2,83.2%,53.3%)",
-      "rgbChannel": "37 99 235",
-      "hslChannel": "221.2 83.2% 53.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#1d4ed8",
-      "rgb": "rgb(29,78,216)",
-      "hsl": "hsl(224.3,76.3%,48%)",
-      "rgbChannel": "29 78 216",
-      "hslChannel": "224.3 76.3% 48%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e40af",
-      "rgb": "rgb(30,64,175)",
-      "hsl": "hsl(225.9,70.7%,40.2%)",
-      "rgbChannel": "30 64 175",
-      "hslChannel": "225.9 70.7% 40.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1e3a8a",
-      "rgb": "rgb(30,58,138)",
-      "hsl": "hsl(224.4,64.3%,32.9%)",
-      "rgbChannel": "30 58 138",
-      "hslChannel": "224.4 64.3% 32.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#172554",
-      "rgb": "rgb(23,37,84)",
-      "hsl": "hsl(226.2,57%,21%)",
-      "rgbChannel": "23 37 84",
-      "hslChannel": "226.2 57% 21%"
-    }
-  ],
-  "indigo": [
-    {
-      "scale": 50,
-      "hex": "#eef2ff",
-      "rgb": "rgb(238,242,255)",
-      "hsl": "hsl(225.9,100%,96.7%)",
-      "rgbChannel": "238 242 255",
-      "hslChannel": "225.9 100% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0e7ff",
-      "rgb": "rgb(224,231,255)",
-      "hsl": "hsl(226.5,100%,93.9%)",
-      "rgbChannel": "224 231 255",
-      "hslChannel": "226.5 100% 93.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#c7d2fe",
-      "rgb": "rgb(199,210,254)",
-      "hsl": "hsl(228,96.5%,88.8%)",
-      "rgbChannel": "199 210 254",
-      "hslChannel": "228 96.5% 88.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#a5b4fc",
-      "rgb": "rgb(165,180,252)",
-      "hsl": "hsl(229.7,93.5%,81.8%)",
-      "rgbChannel": "165 180 252",
-      "hslChannel": "229.7 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#818cf8",
-      "rgb": "rgb(129,140,248)",
-      "hsl": "hsl(234.5,89.5%,73.9%)",
-      "rgbChannel": "129 140 248",
-      "hslChannel": "234.5 89.5% 73.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6366f1",
-      "rgb": "rgb(99,102,241)",
-      "hsl": "hsl(238.7,83.5%,66.7%)",
-      "rgbChannel": "99 102 241",
-      "hslChannel": "238.7 83.5% 66.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4f46e5",
-      "rgb": "rgb(79,70,229)",
-      "hsl": "hsl(243.4,75.4%,58.6%)",
-      "rgbChannel": "79 70 229",
-      "hslChannel": "243.4 75.4% 58.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4338ca",
-      "rgb": "rgb(67,56,202)",
-      "hsl": "hsl(244.5,57.9%,50.6%)",
-      "rgbChannel": "67 56 202",
-      "hslChannel": "244.5 57.9% 50.6%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3730a3",
-      "rgb": "rgb(55,48,163)",
-      "hsl": "hsl(243.7,54.5%,41.4%)",
-      "rgbChannel": "55 48 163",
-      "hslChannel": "243.7 54.5% 41.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#312e81",
-      "rgb": "rgb(49,46,129)",
-      "hsl": "hsl(242.2,47.4%,34.3%)",
-      "rgbChannel": "49 46 129",
-      "hslChannel": "242.2 47.4% 34.3%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(30,27,75)",
-      "hsl": "hsl(243.8,47.1%,20%)",
-      "rgbChannel": "30 27 75",
-      "hslChannel": "243.8 47.1% 20%"
-    }
-  ],
-  "violet": [
-    {
-      "scale": 50,
-      "hex": "#f5f3ff",
-      "rgb": "rgb(245,243,255)",
-      "hsl": "hsl(250,100%,97.6%)",
-      "rgbChannel": "245 243 255",
-      "hslChannel": "250 100% 97.6%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ede9fe",
-      "rgb": "rgb(237,233,254)",
-      "hsl": "hsl(251.4,91.3%,95.5%)",
-      "rgbChannel": "237 233 254",
-      "hslChannel": "251.4 91.3% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#ddd6fe",
-      "rgb": "rgb(221,214,254)",
-      "hsl": "hsl(250.5,95.2%,91.8%)",
-      "rgbChannel": "221 214 254",
-      "hslChannel": "250.5 95.2% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#c4b5fd",
-      "rgb": "rgb(196,181,253)",
-      "hsl": "hsl(252.5,94.7%,85.1%)",
-      "rgbChannel": "196 181 253",
-      "hslChannel": "252.5 94.7% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a78bfa",
-      "rgb": "rgb(167,139,250)",
-      "hsl": "hsl(255.1,91.7%,76.3%)",
-      "rgbChannel": "167 139 250",
-      "hslChannel": "255.1 91.7% 76.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#8b5cf6",
-      "rgb": "rgb(139,92,246)",
-      "hsl": "hsl(258.3,89.5%,66.3%)",
-      "rgbChannel": "139 92 246",
-      "hslChannel": "258.3 89.5% 66.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#7c3aed",
-      "rgb": "rgb(124,58,237)",
-      "hsl": "hsl(262.1,83.3%,57.8%)",
-      "rgbChannel": "124 58 237",
-      "hslChannel": "262.1 83.3% 57.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#6d28d9",
-      "rgb": "rgb(109,40,217)",
-      "hsl": "hsl(263.4,70%,50.4%)",
-      "rgbChannel": "109 40 217",
-      "hslChannel": "263.4 70% 50.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#5b21b6",
-      "rgb": "rgb(91,33,182)",
-      "hsl": "hsl(263.4,69.3%,42.2%)",
-      "rgbChannel": "91 33 182",
-      "hslChannel": "263.4 69.3% 42.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#4c1d95",
-      "rgb": "rgb(76,29,149)",
-      "hsl": "hsl(263.5,67.4%,34.9%)",
-      "rgbChannel": "76 29 149",
-      "hslChannel": "263.5 67.4% 34.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(46,16,101)",
-      "hsl": "hsl(261.2,72.6%,22.9%)",
-      "rgbChannel": "46 16 101",
-      "hslChannel": "261.2 72.6% 22.9%"
-    }
-  ],
-  "purple": [
-    {
-      "scale": 50,
-      "hex": "#faf5ff",
-      "rgb": "rgb(250,245,255)",
-      "hsl": "hsl(270,100%,98%)",
-      "rgbChannel": "250 245 255",
-      "hslChannel": "270 100% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3e8ff",
-      "rgb": "rgb(243,232,255)",
-      "hsl": "hsl(268.7,100%,95.5%)",
-      "rgbChannel": "243 232 255",
-      "hslChannel": "268.7 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e9d5ff",
-      "rgb": "rgb(233,213,255)",
-      "hsl": "hsl(268.6,100%,91.8%)",
-      "rgbChannel": "233 213 255",
-      "hslChannel": "268.6 100% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d8b4fe",
-      "rgb": "rgb(216,180,254)",
-      "hsl": "hsl(269.2,97.4%,85.1%)",
-      "rgbChannel": "216 180 254",
-      "hslChannel": "269.2 97.4% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#c084fc",
-      "rgb": "rgb(192,132,252)",
-      "hsl": "hsl(270,95.2%,75.3%)",
-      "rgbChannel": "192 132 252",
-      "hslChannel": "270 95.2% 75.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#a855f7",
-      "rgb": "rgb(168,85,247)",
-      "hsl": "hsl(270.7,91%,65.1%)",
-      "rgbChannel": "168 85 247",
-      "hslChannel": "270.7 91% 65.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#9333ea",
-      "rgb": "rgb(147,51,234)",
-      "hsl": "hsl(271.5,81.3%,55.9%)",
-      "rgbChannel": "147 51 234",
-      "hslChannel": "271.5 81.3% 55.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#7e22ce",
-      "rgb": "rgb(126,34,206)",
-      "hsl": "hsl(272.1,71.7%,47.1%)",
-      "rgbChannel": "126 34 206",
-      "hslChannel": "272.1 71.7% 47.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#6b21a8",
-      "rgb": "rgb(107,33,168)",
-      "hsl": "hsl(272.9,67.2%,39.4%)",
-      "rgbChannel": "107 33 168",
-      "hslChannel": "272.9 67.2% 39.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#581c87",
-      "rgb": "rgb(88,28,135)",
-      "hsl": "hsl(273.6,65.6%,32%)",
-      "rgbChannel": "88 28 135",
-      "hslChannel": "273.6 65.6% 32%"
-    },
-    {
-      "scale": 950,
-      "hex": "#3b0764",
-      "rgb": "rgb(59,7,100)",
-      "hsl": "hsl(273.5,86.9%,21%)",
-      "rgbChannel": "59 7 100",
-      "hslChannel": "273.5 86.9% 21%"
-    }
-  ],
-  "fuchsia": [
-    {
-      "scale": 50,
-      "hex": "#fdf4ff",
-      "rgb": "rgb(253,244,255)",
-      "hsl": "hsl(289.1,100%,97.8%)",
-      "rgbChannel": "253 244 255",
-      "hslChannel": "289.1 100% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fae8ff",
-      "rgb": "rgb(250,232,255)",
-      "hsl": "hsl(287,100%,95.5%)",
-      "rgbChannel": "250 232 255",
-      "hslChannel": "287 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#f5d0fe",
-      "rgb": "rgb(245,208,254)",
-      "hsl": "hsl(288.3,95.8%,90.6%)",
-      "rgbChannel": "245 208 254",
-      "hslChannel": "288.3 95.8% 90.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f0abfc",
-      "rgb": "rgb(240,171,252)",
-      "hsl": "hsl(291.1,93.1%,82.9%)",
-      "rgbChannel": "240 171 252",
-      "hslChannel": "291.1 93.1% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#e879f9",
-      "rgb": "rgb(232,121,249)",
-      "hsl": "hsl(292,91.4%,72.5%)",
-      "rgbChannel": "232 121 249",
-      "hslChannel": "292 91.4% 72.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#d946ef",
-      "rgb": "rgb(217,70,239)",
-      "hsl": "hsl(292.2,84.1%,60.6%)",
-      "rgbChannel": "217 70 239",
-      "hslChannel": "292.2 84.1% 60.6%"
-    },
-    {
-      "scale": 600,
-      "hex": "#c026d3",
-      "rgb": "rgb(192,38,211)",
-      "hsl": "hsl(293.4,69.5%,48.8%)",
-      "rgbChannel": "192 38 211",
-      "hslChannel": "293.4 69.5% 48.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a21caf",
-      "rgb": "rgb(162,28,175)",
-      "hsl": "hsl(294.7,72.4%,39.8%)",
-      "rgbChannel": "162 28 175",
-      "hslChannel": "294.7 72.4% 39.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#86198f",
-      "rgb": "rgb(134,25,143)",
-      "hsl": "hsl(295.4,70.2%,32.9%)",
-      "rgbChannel": "134 25 143",
-      "hslChannel": "295.4 70.2% 32.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#701a75",
-      "rgb": "rgb(112,26,117)",
-      "hsl": "hsl(296.7,63.6%,28%)",
-      "rgbChannel": "112 26 117",
-      "hslChannel": "296.7 63.6% 28%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4a044e",
-      "rgb": "rgb(74,4,78)",
-      "hsl": "hsl(296.8,90.2%,16.1%)",
-      "rgbChannel": "74 4 78",
-      "hslChannel": "296.8 90.2% 16.1%"
-    }
-  ],
-  "pink": [
-    {
-      "scale": 50,
-      "hex": "#fdf2f8",
-      "rgb": "rgb(253,242,248)",
-      "hsl": "hsl(327.3,73.3%,97.1%)",
-      "rgbChannel": "253 242 248",
-      "hslChannel": "327.3 73.3% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fce7f3",
-      "rgb": "rgb(252,231,243)",
-      "hsl": "hsl(325.7,77.8%,94.7%)",
-      "rgbChannel": "252 231 243",
-      "hslChannel": "325.7 77.8% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fbcfe8",
-      "rgb": "rgb(251,207,232)",
-      "hsl": "hsl(325.9,84.6%,89.8%)",
-      "rgbChannel": "251 207 232",
-      "hslChannel": "325.9 84.6% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f9a8d4",
-      "rgb": "rgb(249,168,212)",
-      "hsl": "hsl(327.4,87.1%,81.8%)",
-      "rgbChannel": "249 168 212",
-      "hslChannel": "327.4 87.1% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f472b6",
-      "rgb": "rgb(244,114,182)",
-      "hsl": "hsl(328.6,85.5%,70.2%)",
-      "rgbChannel": "244 114 182",
-      "hslChannel": "328.6 85.5% 70.2%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ec4899",
-      "rgb": "rgb(236,72,153)",
-      "hsl": "hsl(330.4,81.2%,60.4%)",
-      "rgbChannel": "236 72 153",
-      "hslChannel": "330.4 81.2% 60.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#db2777",
-      "rgb": "rgb(219,39,119)",
-      "hsl": "hsl(333.3,71.4%,50.6%)",
-      "rgbChannel": "219 39 119",
-      "hslChannel": "333.3 71.4% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be185d",
-      "rgb": "rgb(190,24,93)",
-      "hsl": "hsl(335.1,77.6%,42%)",
-      "rgbChannel": "190 24 93",
-      "hslChannel": "335.1 77.6% 42%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9d174d",
-      "rgb": "rgb(157,23,77)",
-      "hsl": "hsl(335.8,74.4%,35.3%)",
-      "rgbChannel": "157 23 77",
-      "hslChannel": "335.8 74.4% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#831843",
-      "rgb": "rgb(131,24,67)",
-      "hsl": "hsl(335.9,69%,30.4%)",
-      "rgbChannel": "131 24 67",
-      "hslChannel": "335.9 69% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#500724",
-      "rgb": "rgb(80,7,36)",
-      "hsl": "hsl(336.2,83.9%,17.1%)",
-      "rgbChannel": "80 7 36",
-      "hslChannel": "336.2 83.9% 17.1%"
-    }
-  ],
-  "rose": [
-    {
-      "scale": 50,
-      "hex": "#fff1f2",
-      "rgb": "rgb(255,241,242)",
-      "hsl": "hsl(355.7,100%,97.3%)",
-      "rgbChannel": "255 241 242",
-      "hslChannel": "355.7 100% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffe4e6",
-      "rgb": "rgb(255,228,230)",
-      "hsl": "hsl(355.6,100%,94.7%)",
-      "rgbChannel": "255 228 230",
-      "hslChannel": "355.6 100% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecdd3",
-      "rgb": "rgb(254,205,211)",
-      "hsl": "hsl(352.7,96.1%,90%)",
-      "rgbChannel": "254 205 211",
-      "hslChannel": "352.7 96.1% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fda4af",
-      "rgb": "rgb(253,164,175)",
-      "hsl": "hsl(352.6,95.7%,81.8%)",
-      "rgbChannel": "253 164 175",
-      "hslChannel": "352.6 95.7% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb7185",
-      "rgb": "rgb(251,113,133)",
-      "hsl": "hsl(351.3,94.5%,71.4%)",
-      "rgbChannel": "251 113 133",
-      "hslChannel": "351.3 94.5% 71.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f43f5e",
-      "rgb": "rgb(244,63,94)",
-      "hsl": "hsl(349.7,89.2%,60.2%)",
-      "rgbChannel": "244 63 94",
-      "hslChannel": "349.7 89.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#e11d48",
-      "rgb": "rgb(225,29,72)",
-      "hsl": "hsl(346.8,77.2%,49.8%)",
-      "rgbChannel": "225 29 72",
-      "hslChannel": "346.8 77.2% 49.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be123c",
-      "rgb": "rgb(190,18,60)",
-      "hsl": "hsl(345.3,82.7%,40.8%)",
-      "rgbChannel": "190 18 60",
-      "hslChannel": "345.3 82.7% 40.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9f1239",
-      "rgb": "rgb(159,18,57)",
-      "hsl": "hsl(343.4,79.7%,34.7%)",
-      "rgbChannel": "159 18 57",
-      "hslChannel": "343.4 79.7% 34.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#881337",
-      "rgb": "rgb(136,19,55)",
-      "hsl": "hsl(341.5,75.5%,30.4%)",
-      "rgbChannel": "136 19 55",
-      "hslChannel": "341.5 75.5% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4c0519",
-      "rgb": "rgb(76,5,25)",
-      "hsl": "hsl(343.1,87.7%,15.9%)",
-      "rgbChannel": "76 5 25",
-      "hslChannel": "343.1 87.7% 15.9%"
-    }
-  ]
-}
diff --git a/apps/www/src/public/registry/colors/lime.json b/apps/www/src/public/registry/colors/lime.json
deleted file mode 100644
index 38506731..00000000
--- a/apps/www/src/public/registry/colors/lime.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "lime-950",
-      "card": "white",
-      "card-foreground": "lime-950",
-      "popover": "white",
-      "popover-foreground": "lime-950",
-      "primary": "lime-900",
-      "primary-foreground": "lime-50",
-      "secondary": "lime-100",
-      "secondary-foreground": "lime-900",
-      "muted": "lime-100",
-      "muted-foreground": "lime-500",
-      "accent": "lime-100",
-      "accent-foreground": "lime-900",
-      "destructive": "red-500",
-      "destructive-foreground": "lime-50",
-      "border": "lime-200",
-      "input": "lime-200",
-      "ring": "lime-950"
-    },
-    "dark": {
-      "background": "lime-950",
-      "foreground": "lime-50",
-      "card": "lime-950",
-      "card-foreground": "lime-50",
-      "popover": "lime-950",
-      "popover-foreground": "lime-50",
-      "primary": "lime-50",
-      "primary-foreground": "lime-900",
-      "secondary": "lime-800",
-      "secondary-foreground": "lime-50",
-      "muted": "lime-800",
-      "muted-foreground": "lime-400",
-      "accent": "lime-800",
-      "accent-foreground": "lime-50",
-      "destructive": "red-900",
-      "destructive-foreground": "lime-50",
-      "border": "lime-800",
-      "input": "lime-800",
-      "ring": "lime-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "89.3 80.4% 10%",
-      "card": "0 0% 100%",
-      "card-foreground": "89.3 80.4% 10%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "89.3 80.4% 10%",
-      "primary": "87.6 61.2% 20.2%",
-      "primary-foreground": "78.3 92% 95.1%",
-      "secondary": "79.6 89.1% 89.2%",
-      "secondary-foreground": "87.6 61.2% 20.2%",
-      "muted": "79.6 89.1% 89.2%",
-      "muted-foreground": "83.7 80.5% 44.3%",
-      "accent": "79.6 89.1% 89.2%",
-      "accent-foreground": "87.6 61.2% 20.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "80.9 88.5% 79.6%",
-      "input": "80.9 88.5% 79.6%",
-      "ring": "89.3 80.4% 10%"
-    },
-    "dark": {
-      "background": "89.3 80.4% 10%",
-      "foreground": "78.3 92% 95.1%",
-      "card": "89.3 80.4% 10%",
-      "card-foreground": "78.3 92% 95.1%",
-      "popover": "89.3 80.4% 10%",
-      "popover-foreground": "78.3 92% 95.1%",
-      "primary": "78.3 92% 95.1%",
-      "primary-foreground": "87.6 61.2% 20.2%",
-      "secondary": "86.3 69% 22.7%",
-      "secondary-foreground": "78.3 92% 95.1%",
-      "muted": "86.3 69% 22.7%",
-      "muted-foreground": "82.7 78% 55.5%",
-      "accent": "86.3 69% 22.7%",
-      "accent-foreground": "78.3 92% 95.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "86.3 69% 22.7%",
-      "input": "86.3 69% 22.7%",
-      "ring": "82 84.5% 67.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n\n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n\n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n\n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n\n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n\n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n\n    --ring: 89.3 80.4% 10%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n\n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n\n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n\n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n\n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n\n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n\n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n\n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 78.3 92% 95.1%;\n\n    --ring: 82 84.5% 67.1%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/neutral.json b/apps/www/src/public/registry/colors/neutral.json
deleted file mode 100644
index cb404658..00000000
--- a/apps/www/src/public/registry/colors/neutral.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "ring": "neutral-950"
-    },
-    "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "ring": "neutral-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 0 0% 3.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 0 0% 83.1%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/slate.json b/apps/www/src/public/registry/colors/slate.json
deleted file mode 100644
index 97a1e966..00000000
--- a/apps/www/src/public/registry/colors/slate.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "slate-950",
-      "card": "white",
-      "card-foreground": "slate-950",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "primary": "slate-900",
-      "primary-foreground": "slate-50",
-      "secondary": "slate-100",
-      "secondary-foreground": "slate-900",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "accent": "slate-100",
-      "accent-foreground": "slate-900",
-      "destructive": "red-500",
-      "destructive-foreground": "slate-50",
-      "border": "slate-200",
-      "input": "slate-200",
-      "ring": "slate-950"
-    },
-    "dark": {
-      "background": "slate-950",
-      "foreground": "slate-50",
-      "card": "slate-950",
-      "card-foreground": "slate-50",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "primary": "slate-50",
-      "primary-foreground": "slate-900",
-      "secondary": "slate-800",
-      "secondary-foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "accent": "slate-800",
-      "accent-foreground": "slate-50",
-      "destructive": "red-900",
-      "destructive-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
-      "ring": "slate-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "ring": "222.2 84% 4.9%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "ring": "212.7 26.8% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/stone.json b/apps/www/src/public/registry/colors/stone.json
deleted file mode 100644
index f37ba5ca..00000000
--- a/apps/www/src/public/registry/colors/stone.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "border": "stone-200",
-      "input": "stone-200",
-      "ring": "stone-950"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "ring": "stone-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --ring: 20 14.3% 4.1%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --ring: 24 5.7% 82.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/zinc.json b/apps/www/src/public/registry/colors/zinc.json
deleted file mode 100644
index 378095fb..00000000
--- a/apps/www/src/public/registry/colors/zinc.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "ring": "zinc-950"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "ring": "zinc-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 240 10% 3.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 240 4.9% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
deleted file mode 100644
index 0c7a3934..00000000
--- a/apps/www/src/public/registry/index.json
+++ /dev/null
@@ -1,1001 +0,0 @@
-[
-  {
-    "name": "accordion",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/accordion/Accordion.vue",
-      "ui/accordion/AccordionContent.vue",
-      "ui/accordion/AccordionItem.vue",
-      "ui/accordion/AccordionTrigger.vue",
-      "ui/accordion/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/alert/Alert.vue",
-      "ui/alert/AlertDescription.vue",
-      "ui/alert/AlertTitle.vue",
-      "ui/alert/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert-dialog",
-    "dependencies": [],
-    "registryDependencies": [
-      "button",
-      "utils"
-    ],
-    "files": [
-      "ui/alert-dialog/AlertDialog.vue",
-      "ui/alert-dialog/AlertDialogAction.vue",
-      "ui/alert-dialog/AlertDialogCancel.vue",
-      "ui/alert-dialog/AlertDialogContent.vue",
-      "ui/alert-dialog/AlertDialogDescription.vue",
-      "ui/alert-dialog/AlertDialogFooter.vue",
-      "ui/alert-dialog/AlertDialogHeader.vue",
-      "ui/alert-dialog/AlertDialogTitle.vue",
-      "ui/alert-dialog/AlertDialogTrigger.vue",
-      "ui/alert-dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "aspect-ratio",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/aspect-ratio/AspectRatio.vue",
-      "ui/aspect-ratio/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "auto-form",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "form",
-      "accordion",
-      "button",
-      "separator",
-      "checkbox",
-      "switch",
-      "calendar",
-      "popover",
-      "utils",
-      "label",
-      "radio-group",
-      "select",
-      "input",
-      "textarea"
-    ],
-    "files": [
-      "ui/auto-form/AutoForm.vue",
-      "ui/auto-form/AutoFormField.vue",
-      "ui/auto-form/AutoFormFieldArray.vue",
-      "ui/auto-form/AutoFormFieldBoolean.vue",
-      "ui/auto-form/AutoFormFieldDate.vue",
-      "ui/auto-form/AutoFormFieldEnum.vue",
-      "ui/auto-form/AutoFormFieldFile.vue",
-      "ui/auto-form/AutoFormFieldInput.vue",
-      "ui/auto-form/AutoFormFieldNumber.vue",
-      "ui/auto-form/AutoFormFieldObject.vue",
-      "ui/auto-form/AutoFormLabel.vue",
-      "ui/auto-form/constant.ts",
-      "ui/auto-form/dependencies.ts",
-      "ui/auto-form/index.ts",
-      "ui/auto-form/interface.ts",
-      "ui/auto-form/utils.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "avatar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/avatar/Avatar.vue",
-      "ui/avatar/AvatarFallback.vue",
-      "ui/avatar/AvatarImage.vue",
-      "ui/avatar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "badge",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/badge/Badge.vue",
-      "ui/badge/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "breadcrumb",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/breadcrumb/Breadcrumb.vue",
-      "ui/breadcrumb/BreadcrumbEllipsis.vue",
-      "ui/breadcrumb/BreadcrumbItem.vue",
-      "ui/breadcrumb/BreadcrumbLink.vue",
-      "ui/breadcrumb/BreadcrumbList.vue",
-      "ui/breadcrumb/BreadcrumbPage.vue",
-      "ui/breadcrumb/BreadcrumbSeparator.vue",
-      "ui/breadcrumb/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "button",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/button/Button.vue",
-      "ui/button/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "calendar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/calendar/Calendar.vue",
-      "ui/calendar/CalendarCell.vue",
-      "ui/calendar/CalendarCellTrigger.vue",
-      "ui/calendar/CalendarGrid.vue",
-      "ui/calendar/CalendarGridBody.vue",
-      "ui/calendar/CalendarGridHead.vue",
-      "ui/calendar/CalendarGridRow.vue",
-      "ui/calendar/CalendarHeadCell.vue",
-      "ui/calendar/CalendarHeader.vue",
-      "ui/calendar/CalendarHeading.vue",
-      "ui/calendar/CalendarNextButton.vue",
-      "ui/calendar/CalendarPrevButton.vue",
-      "ui/calendar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "card",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/card/Card.vue",
-      "ui/card/CardContent.vue",
-      "ui/card/CardDescription.vue",
-      "ui/card/CardFooter.vue",
-      "ui/card/CardHeader.vue",
-      "ui/card/CardTitle.vue",
-      "ui/card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "carousel",
-    "dependencies": [
-      "embla-carousel-vue",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/carousel/Carousel.vue",
-      "ui/carousel/CarouselContent.vue",
-      "ui/carousel/CarouselItem.vue",
-      "ui/carousel/CarouselNext.vue",
-      "ui/carousel/CarouselPrevious.vue",
-      "ui/carousel/index.ts",
-      "ui/carousel/interface.ts",
-      "ui/carousel/useCarousel.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts"
-    ],
-    "registryDependencies": [
-      "button",
-      "card"
-    ],
-    "files": [
-      "ui/chart/ChartCrosshair.vue",
-      "ui/chart/ChartLegend.vue",
-      "ui/chart/ChartSingleTooltip.vue",
-      "ui/chart/ChartTooltip.vue",
-      "ui/chart/index.ts",
-      "ui/chart/interface.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-area",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-area/AreaChart.vue",
-      "ui/chart-area/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-bar",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-bar/BarChart.vue",
-      "ui/chart-bar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-donut",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-donut/DonutChart.vue",
-      "ui/chart-donut/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-line",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-line/LineChart.vue",
-      "ui/chart-line/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "checkbox",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/checkbox/Checkbox.vue",
-      "ui/checkbox/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "collapsible",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/collapsible/Collapsible.vue",
-      "ui/collapsible/CollapsibleContent.vue",
-      "ui/collapsible/CollapsibleTrigger.vue",
-      "ui/collapsible/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "command",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "dialog"
-    ],
-    "files": [
-      "ui/command/Command.vue",
-      "ui/command/CommandDialog.vue",
-      "ui/command/CommandEmpty.vue",
-      "ui/command/CommandGroup.vue",
-      "ui/command/CommandInput.vue",
-      "ui/command/CommandItem.vue",
-      "ui/command/CommandList.vue",
-      "ui/command/CommandSeparator.vue",
-      "ui/command/CommandShortcut.vue",
-      "ui/command/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "context-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/context-menu/ContextMenu.vue",
-      "ui/context-menu/ContextMenuCheckboxItem.vue",
-      "ui/context-menu/ContextMenuContent.vue",
-      "ui/context-menu/ContextMenuGroup.vue",
-      "ui/context-menu/ContextMenuItem.vue",
-      "ui/context-menu/ContextMenuLabel.vue",
-      "ui/context-menu/ContextMenuPortal.vue",
-      "ui/context-menu/ContextMenuRadioGroup.vue",
-      "ui/context-menu/ContextMenuRadioItem.vue",
-      "ui/context-menu/ContextMenuSeparator.vue",
-      "ui/context-menu/ContextMenuShortcut.vue",
-      "ui/context-menu/ContextMenuSub.vue",
-      "ui/context-menu/ContextMenuSubContent.vue",
-      "ui/context-menu/ContextMenuSubTrigger.vue",
-      "ui/context-menu/ContextMenuTrigger.vue",
-      "ui/context-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dialog",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dialog/Dialog.vue",
-      "ui/dialog/DialogClose.vue",
-      "ui/dialog/DialogContent.vue",
-      "ui/dialog/DialogDescription.vue",
-      "ui/dialog/DialogFooter.vue",
-      "ui/dialog/DialogHeader.vue",
-      "ui/dialog/DialogScrollContent.vue",
-      "ui/dialog/DialogTitle.vue",
-      "ui/dialog/DialogTrigger.vue",
-      "ui/dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "drawer",
-    "dependencies": [
-      "vaul-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/drawer/Drawer.vue",
-      "ui/drawer/DrawerContent.vue",
-      "ui/drawer/DrawerDescription.vue",
-      "ui/drawer/DrawerFooter.vue",
-      "ui/drawer/DrawerHeader.vue",
-      "ui/drawer/DrawerOverlay.vue",
-      "ui/drawer/DrawerTitle.vue",
-      "ui/drawer/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dropdown-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dropdown-menu/DropdownMenu.vue",
-      "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-      "ui/dropdown-menu/DropdownMenuContent.vue",
-      "ui/dropdown-menu/DropdownMenuGroup.vue",
-      "ui/dropdown-menu/DropdownMenuItem.vue",
-      "ui/dropdown-menu/DropdownMenuLabel.vue",
-      "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
-      "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-      "ui/dropdown-menu/DropdownMenuSeparator.vue",
-      "ui/dropdown-menu/DropdownMenuShortcut.vue",
-      "ui/dropdown-menu/DropdownMenuSub.vue",
-      "ui/dropdown-menu/DropdownMenuSubContent.vue",
-      "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-      "ui/dropdown-menu/DropdownMenuTrigger.vue",
-      "ui/dropdown-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "form",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "utils",
-      "label"
-    ],
-    "files": [
-      "ui/form/FormControl.vue",
-      "ui/form/FormDescription.vue",
-      "ui/form/FormItem.vue",
-      "ui/form/FormLabel.vue",
-      "ui/form/FormMessage.vue",
-      "ui/form/index.ts",
-      "ui/form/injectionKeys.ts",
-      "ui/form/useFormField.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "hover-card",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/hover-card/HoverCard.vue",
-      "ui/hover-card/HoverCardContent.vue",
-      "ui/hover-card/HoverCardTrigger.vue",
-      "ui/hover-card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "input",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/input/Input.vue",
-      "ui/input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "label",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/label/Label.vue",
-      "ui/label/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "menubar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/menubar/Menubar.vue",
-      "ui/menubar/MenubarCheckboxItem.vue",
-      "ui/menubar/MenubarContent.vue",
-      "ui/menubar/MenubarGroup.vue",
-      "ui/menubar/MenubarItem.vue",
-      "ui/menubar/MenubarLabel.vue",
-      "ui/menubar/MenubarMenu.vue",
-      "ui/menubar/MenubarRadioGroup.vue",
-      "ui/menubar/MenubarRadioItem.vue",
-      "ui/menubar/MenubarSeparator.vue",
-      "ui/menubar/MenubarShortcut.vue",
-      "ui/menubar/MenubarSub.vue",
-      "ui/menubar/MenubarSubContent.vue",
-      "ui/menubar/MenubarSubTrigger.vue",
-      "ui/menubar/MenubarTrigger.vue",
-      "ui/menubar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "navigation-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/navigation-menu/NavigationMenu.vue",
-      "ui/navigation-menu/NavigationMenuContent.vue",
-      "ui/navigation-menu/NavigationMenuIndicator.vue",
-      "ui/navigation-menu/NavigationMenuItem.vue",
-      "ui/navigation-menu/NavigationMenuLink.vue",
-      "ui/navigation-menu/NavigationMenuList.vue",
-      "ui/navigation-menu/NavigationMenuTrigger.vue",
-      "ui/navigation-menu/NavigationMenuViewport.vue",
-      "ui/navigation-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "number-field",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/number-field/NumberField.vue",
-      "ui/number-field/NumberFieldContent.vue",
-      "ui/number-field/NumberFieldDecrement.vue",
-      "ui/number-field/NumberFieldIncrement.vue",
-      "ui/number-field/NumberFieldInput.vue",
-      "ui/number-field/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "pagination",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/pagination/PaginationEllipsis.vue",
-      "ui/pagination/PaginationFirst.vue",
-      "ui/pagination/PaginationLast.vue",
-      "ui/pagination/PaginationNext.vue",
-      "ui/pagination/PaginationPrev.vue",
-      "ui/pagination/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "pin-input",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/pin-input/PinInput.vue",
-      "ui/pin-input/PinInputGroup.vue",
-      "ui/pin-input/PinInputInput.vue",
-      "ui/pin-input/PinInputSeparator.vue",
-      "ui/pin-input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "popover",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/popover/Popover.vue",
-      "ui/popover/PopoverContent.vue",
-      "ui/popover/PopoverTrigger.vue",
-      "ui/popover/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "progress",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/progress/Progress.vue",
-      "ui/progress/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "radio-group",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/radio-group/RadioGroup.vue",
-      "ui/radio-group/RadioGroupItem.vue",
-      "ui/radio-group/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "range-calendar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/range-calendar/RangeCalendar.vue",
-      "ui/range-calendar/RangeCalendarCell.vue",
-      "ui/range-calendar/RangeCalendarCellTrigger.vue",
-      "ui/range-calendar/RangeCalendarGrid.vue",
-      "ui/range-calendar/RangeCalendarGridBody.vue",
-      "ui/range-calendar/RangeCalendarGridHead.vue",
-      "ui/range-calendar/RangeCalendarGridRow.vue",
-      "ui/range-calendar/RangeCalendarHeadCell.vue",
-      "ui/range-calendar/RangeCalendarHeader.vue",
-      "ui/range-calendar/RangeCalendarHeading.vue",
-      "ui/range-calendar/RangeCalendarNextButton.vue",
-      "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "ui/range-calendar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "resizable",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/resizable/ResizableHandle.vue",
-      "ui/resizable/ResizablePanelGroup.vue",
-      "ui/resizable/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "scroll-area",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/scroll-area/ScrollArea.vue",
-      "ui/scroll-area/ScrollBar.vue",
-      "ui/scroll-area/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "select",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/select/Select.vue",
-      "ui/select/SelectContent.vue",
-      "ui/select/SelectGroup.vue",
-      "ui/select/SelectItem.vue",
-      "ui/select/SelectItemText.vue",
-      "ui/select/SelectLabel.vue",
-      "ui/select/SelectScrollDownButton.vue",
-      "ui/select/SelectScrollUpButton.vue",
-      "ui/select/SelectSeparator.vue",
-      "ui/select/SelectTrigger.vue",
-      "ui/select/SelectValue.vue",
-      "ui/select/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "separator",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/separator/Separator.vue",
-      "ui/separator/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sheet",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/sheet/Sheet.vue",
-      "ui/sheet/SheetClose.vue",
-      "ui/sheet/SheetContent.vue",
-      "ui/sheet/SheetDescription.vue",
-      "ui/sheet/SheetFooter.vue",
-      "ui/sheet/SheetHeader.vue",
-      "ui/sheet/SheetTitle.vue",
-      "ui/sheet/SheetTrigger.vue",
-      "ui/sheet/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sidebar",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "Sheet.vue",
-      "SheetContent.vue",
-      "utils",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
-    ],
-    "files": [
-      "ui/sidebar/Sidebar.vue",
-      "ui/sidebar/SidebarContent.vue",
-      "ui/sidebar/SidebarFooter.vue",
-      "ui/sidebar/SidebarGroup.vue",
-      "ui/sidebar/SidebarGroupAction.vue",
-      "ui/sidebar/SidebarGroupContent.vue",
-      "ui/sidebar/SidebarGroupLabel.vue",
-      "ui/sidebar/SidebarHeader.vue",
-      "ui/sidebar/SidebarInput.vue",
-      "ui/sidebar/SidebarInset.vue",
-      "ui/sidebar/SidebarMenu.vue",
-      "ui/sidebar/SidebarMenuAction.vue",
-      "ui/sidebar/SidebarMenuBadge.vue",
-      "ui/sidebar/SidebarMenuButton.vue",
-      "ui/sidebar/SidebarMenuButtonChild.vue",
-      "ui/sidebar/SidebarMenuItem.vue",
-      "ui/sidebar/SidebarMenuSkeleton.vue",
-      "ui/sidebar/SidebarMenuSub.vue",
-      "ui/sidebar/SidebarMenuSubButton.vue",
-      "ui/sidebar/SidebarMenuSubItem.vue",
-      "ui/sidebar/SidebarProvider.vue",
-      "ui/sidebar/SidebarRail.vue",
-      "ui/sidebar/SidebarSeparator.vue",
-      "ui/sidebar/SidebarTrigger.vue",
-      "ui/sidebar/index.ts",
-      "ui/sidebar/utils.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "skeleton",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/skeleton/Skeleton.vue",
-      "ui/skeleton/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "slider",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/slider/Slider.vue",
-      "ui/slider/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sonner",
-    "dependencies": [
-      "vue-sonner"
-    ],
-    "registryDependencies": [],
-    "files": [
-      "ui/sonner/Sonner.vue",
-      "ui/sonner/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "stepper",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/stepper/Stepper.vue",
-      "ui/stepper/StepperDescription.vue",
-      "ui/stepper/StepperIndicator.vue",
-      "ui/stepper/StepperItem.vue",
-      "ui/stepper/StepperSeparator.vue",
-      "ui/stepper/StepperTitle.vue",
-      "ui/stepper/StepperTrigger.vue",
-      "ui/stepper/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "switch",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/switch/Switch.vue",
-      "ui/switch/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "table",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/table/Table.vue",
-      "ui/table/TableBody.vue",
-      "ui/table/TableCaption.vue",
-      "ui/table/TableCell.vue",
-      "ui/table/TableEmpty.vue",
-      "ui/table/TableFooter.vue",
-      "ui/table/TableHead.vue",
-      "ui/table/TableHeader.vue",
-      "ui/table/TableRow.vue",
-      "ui/table/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tabs",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tabs/Tabs.vue",
-      "ui/tabs/TabsContent.vue",
-      "ui/tabs/TabsList.vue",
-      "ui/tabs/TabsTrigger.vue",
-      "ui/tabs/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tags-input",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tags-input/TagsInput.vue",
-      "ui/tags-input/TagsInputInput.vue",
-      "ui/tags-input/TagsInputItem.vue",
-      "ui/tags-input/TagsInputItemDelete.vue",
-      "ui/tags-input/TagsInputItemText.vue",
-      "ui/tags-input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "textarea",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/textarea/Textarea.vue",
-      "ui/textarea/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toast",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/toast/Toast.vue",
-      "ui/toast/ToastAction.vue",
-      "ui/toast/ToastClose.vue",
-      "ui/toast/ToastDescription.vue",
-      "ui/toast/ToastProvider.vue",
-      "ui/toast/ToastTitle.vue",
-      "ui/toast/ToastViewport.vue",
-      "ui/toast/Toaster.vue",
-      "ui/toast/index.ts",
-      "ui/toast/use-toast.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toggle",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/toggle/Toggle.vue",
-      "ui/toggle/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toggle-group",
-    "dependencies": [],
-    "registryDependencies": [
-      "toggle",
-      "utils"
-    ],
-    "files": [
-      "ui/toggle-group/ToggleGroup.vue",
-      "ui/toggle-group/ToggleGroupItem.vue",
-      "ui/toggle-group/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tooltip",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tooltip/Tooltip.vue",
-      "ui/tooltip/TooltipContent.vue",
-      "ui/tooltip/TooltipProvider.vue",
-      "ui/tooltip/TooltipTrigger.vue",
-      "ui/tooltip/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "v-calendar",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "button",
-      "utils"
-    ],
-    "files": [
-      "ui/v-calendar/Calendar.vue",
-      "ui/v-calendar/index.ts"
-    ],
-    "type": "components:ui"
-  }
-]
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
deleted file mode 100644
index e4e624d8..00000000
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "accordion",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
-    },
-    {
-      "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
-    },
-    {
-      "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { 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  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
-    },
-    {
-      "name": "AccordionTrigger.vue",
-      "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 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 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
deleted file mode 100644
index 3ef1af8e..00000000
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "alert-dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\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  <AlertDialogPortal>\n    <AlertDialogOverlay\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    <AlertDialogContent\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    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/alert.json b/apps/www/src/public/registry/styles/default/alert.json
deleted file mode 100644
index 07789585..00000000
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "alert",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/area-chart.json b/apps/www/src/public/registry/styles/default/area-chart.json
deleted file mode 100644
index 4cf4d8ab..00000000
--- a/apps/www/src/public/registry/styles/default/area-chart.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "area-chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
deleted file mode 100644
index 0d50bc37..00000000
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "aspect-ratio",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
deleted file mode 100644
index aa00f8c0..00000000
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "name": "auto-form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "form",
-    "accordion",
-    "button",
-    "separator",
-    "checkbox",
-    "switch",
-    "calendar",
-    "popover",
-    "utils",
-    "label",
-    "radio-group",
-    "select",
-    "input",
-    "textarea"
-  ],
-  "files": [
-    {
-      "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\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\" :size=\"16\" />\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"
-    },
-    {
-      "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\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          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\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"
-    },
-    {
-      "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } 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-10 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 :size=\"16\" />\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"
-    },
-    {
-      "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\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          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\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          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
-    },
-    {
-      "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
-    },
-    {
-      "name": "constant.ts",
-      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
-    },
-    {
-      "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
deleted file mode 100644
index 5af79a8a..00000000
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "avatar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
-    },
-    {
-      "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
-    },
-    {
-      "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/badge.json b/apps/www/src/public/registry/styles/default/badge.json
deleted file mode 100644
index 36703f6c..00000000
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "badge",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
deleted file mode 100644
index 8a354dd2..00000000
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "breadcrumb",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Breadcrumb.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbEllipsis.vue",
-      "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"
-    },
-    {
-      "name": "BreadcrumbItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbList.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbPage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbSeparator.vue",
-      "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]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
deleted file mode 100644
index 919bf04e..00000000
--- a/apps/www/src/public/registry/styles/default/button.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "button",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
deleted file mode 100644
index 36e1d094..00000000
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { 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  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { 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  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { 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  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { 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  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { 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  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { 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  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { 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  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
deleted file mode 100644
index 08eb900f..00000000
--- a/apps/www/src/public/registry/styles/default/card.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "CardFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
deleted file mode 100644
index 01f24983..00000000
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
-    },
-    {
-      "name": "useCarousel.ts",
-      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-area.json b/apps/www/src/public/registry/styles/default/chart-area.json
deleted file mode 100644
index cb68838a..00000000
--- a/apps/www/src/public/registry/styles/default/chart-area.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-area",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
deleted file mode 100644
index 00d122a2..00000000
--- a/apps/www/src/public/registry/styles/default/chart-bar.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-bar",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-donut.json b/apps/www/src/public/registry/styles/default/chart-donut.json
deleted file mode 100644
index 44cc4dee..00000000
--- a/apps/www/src/public/registry/styles/default/chart-donut.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-donut",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-line.json b/apps/www/src/public/registry/styles/default/chart-line.json
deleted file mode 100644
index 4cb4cabd..00000000
--- a/apps/www/src/public/registry/styles/default/chart-line.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-line",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart.json b/apps/www/src/public/registry/styles/default/chart.json
deleted file mode 100644
index 15c702d2..00000000
--- a/apps/www/src/public/registry/styles/default/chart.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
-    },
-    {
-      "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
deleted file mode 100644
index c495496e..00000000
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "checkbox",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Checkbox.vue",
-      "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 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
deleted file mode 100644
index 1f6da7fc..00000000
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "collapsible",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
deleted file mode 100644
index 14a6999c..00000000
--- a/apps/www/src/public/registry/styles/default/command.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "command",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "dialog"
-  ],
-  "files": [
-    {
-      "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\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  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
-    },
-    {
-      "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
-    },
-    {
-      "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
-    },
-    {
-      "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
-    },
-    {
-      "name": "CommandInput.vue",
-      "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-11 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"
-    },
-    {
-      "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
-    },
-    {
-      "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\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  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
-    },
-    {
-      "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
-    },
-    {
-      "name": "CommandShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
deleted file mode 100644
index aee4f960..00000000
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "context-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuCheckboxItem.vue",
-      "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"
-    },
-    {
-      "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\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  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\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  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioItem.vue",
-      "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-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\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  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubTrigger.vue",
-      "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"
-    },
-    {
-      "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
deleted file mode 100644
index 17c01863..00000000
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "data-table",
-  "dependencies": [
-    "@tanstack/vue-table"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "DataTable.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :modelValue=\"column.getIsVisible()\"\n            @update:modelValue=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DataTable } from './DataTable.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/date-picker.json b/apps/www/src/public/registry/styles/default/date-picker.json
deleted file mode 100644
index 12037ec2..00000000
--- a/apps/www/src/public/registry/styles/default/date-picker.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "date-picker",
-  "dependencies": [
-    "v-calendar"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useDark } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport 'v-calendar/style.css'\n\nconst isDark = useDark()\n</script>\n\n<template>\n  <DatePicker :is-dark=\"isDark\" borderless trim-weeks expanded />\n</template>\n\n<style>\n:root {\n  --vc-font-family: \"Inter\", sans-serif;\n  --vc-rounded-full: var(--radius);\n  --vc-font-bold: 500;\n  --vc-font-semibold: 600;\n  --vc-text-lg: 14px;\n}\n\n.vc-light,\n.vc-dark {\n  --vc-bg: var(--background);\n  --vc-border: var(--border);\n  --vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);\n  --vc-weekday-color: var(--muted);\n  --vc-popover-content-color: var(--muted);\n  --vc-popover-content-bg: var(--background);\n  --vc-popover-content-border: var(--border);\n\n  &.vc-attr,\n  & .vc-attr {\n    --vc-content-color: var(--primary);\n    --vc-highlight-outline-bg: var(--primary);\n    --vc-highlight-outline-border: var(--primary);\n    --vc-highlight-outline-content-color: var(--primary-foreground);\n    --vc-highlight-light-bg: var(\n      --vc-accent-200\n    ); /* Highlighted color between two dates */\n    --vc-highlight-light-content-color: var(--secondary-foreground);\n    --vc-highlight-solid-bg: var(--primary);\n    --vc-highlight-solid-content-color: var(--primary-foreground);\n    --vc-dot-bg: var(--primary);\n    --vc-bar-bg: var(--primary);\n  }\n}\n\n.vc-blue {\n  --vc-accent-200: var(--secondary);\n  --vc-accent-400: var(--primary);\n  --vc-accent-500: var(--primary);\n  --vc-accent-600: var(--primary);\n}\n\n.dark {\n  .vc-blue {\n    --vc-accent-200: var(--secondary);\n    --vc-accent-400: var(--primary);\n    --vc-accent-500: var(--secondary);\n  }\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DatePicker } from './DatePicker.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
deleted file mode 100644
index 84464615..00000000
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "DialogContent.vue",
-      "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"
-    },
-    {
-      "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { 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  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogScrollContent.vue",
-      "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-3 right-3 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"
-    },
-    {
-      "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { 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  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/drawer.json b/apps/www/src/public/registry/styles/default/drawer.json
deleted file mode 100644
index 3b6f992a..00000000
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "drawer",
-  "dependencies": [
-    "vaul-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
-    },
-    {
-      "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
-    },
-    {
-      "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n"
-    },
-    {
-      "name": "DrawerFooter.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
deleted file mode 100644
index 5c12d053..00000000
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "dropdown-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuCheckboxItem.vue",
-      "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"
-    },
-    {
-      "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\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  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { 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  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { 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  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioItem.vue",
-      "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-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\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  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\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  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubTrigger.vue",
-      "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"
-    },
-    {
-      "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
deleted file mode 100644
index cedf14ed..00000000
--- a/apps/www/src/public/registry/styles/default/form.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "label"
-  ],
-  "files": [
-    {
-      "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
-    },
-    {
-      "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "FormMessage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n"
-    },
-    {
-      "name": "injectionKeys.ts",
-      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
-    },
-    {
-      "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
deleted file mode 100644
index 934f0e20..00000000
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "hover-card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
-    },
-    {
-      "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\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  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
-    },
-    {
-      "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
deleted file mode 100644
index 37d76352..00000000
--- a/apps/www/src/public/registry/styles/default/input.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "input",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Input } from './Input.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/kbd.json b/apps/www/src/public/registry/styles/default/kbd.json
deleted file mode 100644
index 2eeafdda..00000000
--- a/apps/www/src/public/registry/styles/default/kbd.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "kbd",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Kbd.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n  as?: string\n  size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n  as: 'kbd',\n  size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n  return cva(\n    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n    {\n      variants: {\n        size: {\n          xs: 'min-h-4 text-[10px] h-4 px-1',\n          sm: 'min-h-5 text-[11px] h-5 px-1',\n          md: 'min-h-6 text-[12px] h-6 px-1.5',\n        },\n      },\n    },\n  )({\n    size: props.size,\n  })\n})\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"kbdClass\">\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Kbd } from './Kbd.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
deleted file mode 100644
index 35db08b2..00000000
--- a/apps/www/src/public/registry/styles/default/label.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "label",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Label } from './Label.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
deleted file mode 100644
index de8cddef..00000000
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "menubar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\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  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
-    },
-    {
-      "name": "MenubarCheckboxItem.vue",
-      "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"
-    },
-    {
-      "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\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  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\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  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
-    },
-    {
-      "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioItem.vue",
-      "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-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { 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  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
-    },
-    {
-      "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\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  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubTrigger.vue",
-      "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"
-    },
-    {
-      "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { 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  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
deleted file mode 100644
index b1cb537b..00000000
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "navigation-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\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  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\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  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { 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  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { 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  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuTrigger.vue",
-      "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-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { 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  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/number-field.json b/apps/www/src/public/registry/styles/default/number-field.json
deleted file mode 100644
index e72b127f..00000000
--- a/apps/www/src/public/registry/styles/default/number-field.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "number-field",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\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  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
deleted file mode 100644
index 500a1ac4..00000000
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "pagination",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "PaginationEllipsis.vue",
-      "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"
-    },
-    {
-      "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
-    },
-    {
-      "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
-    },
-    {
-      "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
-    },
-    {
-      "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
deleted file mode 100644
index b5170d09..00000000
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "pin-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\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  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
-    },
-    {
-      "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Dot } 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      <Dot />\n    </slot>\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
deleted file mode 100644
index 3afda1fb..00000000
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "popover",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
-    },
-    {
-      "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\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  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
-    },
-    {
-      "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
deleted file mode 100644
index 628f9107..00000000
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "progress",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Progress } from './Progress.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
deleted file mode 100644
index 9669d831..00000000
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "radio-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\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  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } 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 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/range-calendar.json b/apps/www/src/public/registry/styles/default/range-calendar.json
deleted file mode 100644
index 11bbd988..00000000
--- a/apps/www/src/public/registry/styles/default/range-calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "range-calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { 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  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { 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  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { 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  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { 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  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { 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  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { 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  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { 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  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/resizable.json b/apps/www/src/public/registry/styles/default/resizable.json
deleted file mode 100644
index c5c41688..00000000
--- a/apps/www/src/public/registry/styles/default/resizable.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "resizable",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ResizableHandle.vue",
-      "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"
-    },
-    {
-      "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\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  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
deleted file mode 100644
index 8c2f5b08..00000000
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "scroll-area",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
-    },
-    {
-      "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
deleted file mode 100644
index e96b5fd5..00000000
--- a/apps/www/src/public/registry/styles/default/select.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "select",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
-    },
-    {
-      "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\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  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
-    },
-    {
-      "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
-    },
-    {
-      "name": "SelectItem.vue",
-      "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-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  >\n    <span class=\"absolute left-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"
-    },
-    {
-      "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
-    },
-    {
-      "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollDownButton.vue",
-      "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 class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollUpButton.vue",
-      "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 class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
-    },
-    {
-      "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "SelectTrigger.vue",
-      "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-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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"
-    },
-    {
-      "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
deleted file mode 100644
index 846b4507..00000000
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "separator",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Separator } from './Separator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
deleted file mode 100644
index 8e62490f..00000000
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "sheet",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "SheetContent.vue",
-      "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 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
deleted file mode 100644
index 53043770..00000000
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ /dev/null
@@ -1,125 +0,0 @@
-{
-  "name": "sidebar",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "Sheet.vue",
-    "SheetContent.vue",
-    "utils",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
-  ],
-  "files": [
-    {
-      "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
-    },
-    {
-      "name": "SidebarInset.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuBadge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubItem.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "SidebarRail.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n"
-    },
-    {
-      "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
deleted file mode 100644
index 019e0486..00000000
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "skeleton",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
deleted file mode 100644
index e352b927..00000000
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "slider",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\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  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n    />\n  </SliderRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Slider } from './Slider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
deleted file mode 100644
index 3a164849..00000000
--- a/apps/www/src/public/registry/styles/default/sonner.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "sonner",
-  "dependencies": [
-    "vue-sonner"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Sonner.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Toaster } from './Sonner.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/stepper.json b/apps/www/src/public/registry/styles/default/stepper.json
deleted file mode 100644
index 1f1d67b9..00000000
--- a/apps/www/src/public/registry/styles/default/stepper.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "stepper",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\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  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
-    },
-    {
-      "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
-    },
-    {
-      "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
-    },
-    {
-      "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
-    },
-    {
-      "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
-    },
-    {
-      "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
-    },
-    {
-      "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
deleted file mode 100644
index df60e70b..00000000
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "switch",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\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  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Switch } from './Switch.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
deleted file mode 100644
index 90352697..00000000
--- a/apps/www/src/public/registry/styles/default/table.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "table",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "TableBody.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
-    },
-    {
-      "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
-    },
-    {
-      "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
-    },
-    {
-      "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
-    },
-    {
-      "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
-    },
-    {
-      "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
-    },
-    {
-      "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
-    },
-    {
-      "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
deleted file mode 100644
index b7ea0e32..00000000
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tabs",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
-    },
-    {
-      "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
-    },
-    {
-      "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
-    },
-    {
-      "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { 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  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
deleted file mode 100644
index d684f2a4..00000000
--- a/apps/www/src/public/registry/styles/default/tags-input.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "tags-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\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  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
-    },
-    {
-      "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { 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  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { 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  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
-    },
-    {
-      "name": "TagsInputItemDelete.vue",
-      "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"
-    },
-    {
-      "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { 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  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
deleted file mode 100644
index 0f8ea314..00000000
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "textarea",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Textarea } from './Textarea.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
deleted file mode 100644
index c4344b05..00000000
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "toast",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\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  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
-    },
-    {
-      "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
-    },
-    {
-      "name": "ToastClose.vue",
-      "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-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
-    },
-    {
-      "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
-    },
-    {
-      "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
-    },
-    {
-      "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
-    },
-    {
-      "name": "use-toast.ts",
-      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
deleted file mode 100644
index 59f7e53b..00000000
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "toggle-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "toggle",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\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  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
deleted file mode 100644
index 7fcaf837..00000000
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "toggle",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
deleted file mode 100644
index 35899e8f..00000000
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tooltip",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
-    },
-    {
-      "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\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  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
-    },
-    {
-      "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
deleted file mode 100644
index cd58eca1..00000000
--- a/apps/www/src/public/registry/styles/default/v-calendar.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "v-calendar",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/index.json b/apps/www/src/public/registry/styles/index.json
deleted file mode 100644
index 2002ac50..00000000
--- a/apps/www/src/public/registry/styles/index.json
+++ /dev/null
@@ -1,10 +0,0 @@
-[
-  {
-    "name": "default",
-    "label": "Default"
-  },
-  {
-    "name": "new-york",
-    "label": "New York"
-  }
-]
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
deleted file mode 100644
index a2de5bcf..00000000
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "accordion",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
-    },
-    {
-      "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
-    },
-    {
-      "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { 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  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
deleted file mode 100644
index bb0026a3..00000000
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "alert-dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\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  <AlertDialogPortal>\n    <AlertDialogOverlay\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    <AlertDialogContent\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    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/alert.json b/apps/www/src/public/registry/styles/new-york/alert.json
deleted file mode 100644
index ccbc207c..00000000
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "alert",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/area-chart.json b/apps/www/src/public/registry/styles/new-york/area-chart.json
deleted file mode 100644
index 4cf4d8ab..00000000
--- a/apps/www/src/public/registry/styles/new-york/area-chart.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "area-chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
deleted file mode 100644
index 0d50bc37..00000000
--- a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "aspect-ratio",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
deleted file mode 100644
index 2870289a..00000000
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "name": "auto-form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "form",
-    "accordion",
-    "button",
-    "separator",
-    "checkbox",
-    "switch",
-    "calendar",
-    "popover",
-    "utils",
-    "label",
-    "radio-group",
-    "select",
-    "input",
-    "textarea"
-  ],
-  "files": [
-    {
-      "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\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'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\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          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\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"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\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          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\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          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
-    },
-    {
-      "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
-    },
-    {
-      "name": "constant.ts",
-      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
-    },
-    {
-      "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
deleted file mode 100644
index 5af79a8a..00000000
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "avatar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
-    },
-    {
-      "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
-    },
-    {
-      "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/badge.json b/apps/www/src/public/registry/styles/new-york/badge.json
deleted file mode 100644
index e3de8c24..00000000
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "badge",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
deleted file mode 100644
index 288ef106..00000000
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "breadcrumb",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Breadcrumb.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "BreadcrumbItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbList.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbPage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/button.json b/apps/www/src/public/registry/styles/new-york/button.json
deleted file mode 100644
index ffa54528..00000000
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "button",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
deleted file mode 100644
index abecc5d9..00000000
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { 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  <CalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { 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  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { 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  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { 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  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { 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  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { 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  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { 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  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/card.json b/apps/www/src/public/registry/styles/new-york/card.json
deleted file mode 100644
index 050b6fdc..00000000
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "CardFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
deleted file mode 100644
index 8a8baaf5..00000000
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
-    },
-    {
-      "name": "useCarousel.ts",
-      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-area.json b/apps/www/src/public/registry/styles/new-york/chart-area.json
deleted file mode 100644
index da202d6b..00000000
--- a/apps/www/src/public/registry/styles/new-york/chart-area.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-area",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
deleted file mode 100644
index 2a2135bb..00000000
--- a/apps/www/src/public/registry/styles/new-york/chart-bar.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-bar",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-donut.json b/apps/www/src/public/registry/styles/new-york/chart-donut.json
deleted file mode 100644
index ac2b862e..00000000
--- a/apps/www/src/public/registry/styles/new-york/chart-donut.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-donut",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-line.json b/apps/www/src/public/registry/styles/new-york/chart-line.json
deleted file mode 100644
index bdd2c404..00000000
--- a/apps/www/src/public/registry/styles/new-york/chart-line.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-line",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart.json b/apps/www/src/public/registry/styles/new-york/chart.json
deleted file mode 100644
index 4b41bc73..00000000
--- a/apps/www/src/public/registry/styles/new-york/chart.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
-    },
-    {
-      "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
deleted file mode 100644
index 210f8109..00000000
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "checkbox",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
deleted file mode 100644
index 1f6da7fc..00000000
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "collapsible",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
deleted file mode 100644
index 1265e32e..00000000
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "command",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "dialog"
-  ],
-  "files": [
-    {
-      "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\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  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
-    },
-    {
-      "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
-    },
-    {
-      "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
-    },
-    {
-      "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\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  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
-    },
-    {
-      "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\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  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
-    },
-    {
-      "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
-    },
-    {
-      "name": "CommandShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
deleted file mode 100644
index df3d2419..00000000
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "context-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\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  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\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  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\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  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
deleted file mode 100644
index d5b5fd6a..00000000
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { 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  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { 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  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/drawer.json b/apps/www/src/public/registry/styles/new-york/drawer.json
deleted file mode 100644
index 3b6f992a..00000000
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "drawer",
-  "dependencies": [
-    "vaul-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
-    },
-    {
-      "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
-    },
-    {
-      "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n"
-    },
-    {
-      "name": "DrawerFooter.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
deleted file mode 100644
index a7ec8f0c..00000000
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "dropdown-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\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  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { 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  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { 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  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\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  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\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  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
deleted file mode 100644
index 8073f094..00000000
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "label"
-  ],
-  "files": [
-    {
-      "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
-    },
-    {
-      "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "FormMessage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n"
-    },
-    {
-      "name": "injectionKeys.ts",
-      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
-    },
-    {
-      "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/hover-card.json b/apps/www/src/public/registry/styles/new-york/hover-card.json
deleted file mode 100644
index 934f0e20..00000000
--- a/apps/www/src/public/registry/styles/new-york/hover-card.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "hover-card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
-    },
-    {
-      "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\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  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
-    },
-    {
-      "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/input.json b/apps/www/src/public/registry/styles/new-york/input.json
deleted file mode 100644
index d1c59084..00000000
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "input",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Input } from './Input.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
deleted file mode 100644
index 35db08b2..00000000
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "label",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Label } from './Label.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
deleted file mode 100644
index 39fd9e61..00000000
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "menubar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\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  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\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  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\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  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
-    },
-    {
-      "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { 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  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
-    },
-    {
-      "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\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  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { 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  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
deleted file mode 100644
index d1eabda6..00000000
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "navigation-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\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  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\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  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { 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  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { 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  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { 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  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/number-field.json b/apps/www/src/public/registry/styles/new-york/number-field.json
deleted file mode 100644
index 0c97cbfe..00000000
--- a/apps/www/src/public/registry/styles/new-york/number-field.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "number-field",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\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  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
deleted file mode 100644
index e1965290..00000000
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "pagination",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "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"
-    },
-    {
-      "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/pin-input.json b/apps/www/src/public/registry/styles/new-york/pin-input.json
deleted file mode 100644
index 868a7c03..00000000
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "pin-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\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  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
-    },
-    {
-      "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/popover.json b/apps/www/src/public/registry/styles/new-york/popover.json
deleted file mode 100644
index de247445..00000000
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "popover",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
-    },
-    {
-      "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\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  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
-    },
-    {
-      "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/progress.json b/apps/www/src/public/registry/styles/new-york/progress.json
deleted file mode 100644
index e9902e74..00000000
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "progress",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Progress } from './Progress.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
deleted file mode 100644
index 75a89969..00000000
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "radio-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\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  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/range-calendar.json b/apps/www/src/public/registry/styles/new-york/range-calendar.json
deleted file mode 100644
index fb316ce6..00000000
--- a/apps/www/src/public/registry/styles/new-york/range-calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "range-calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { 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  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { 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  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { 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  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { 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  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { 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  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { 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  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { 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  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/resizable.json b/apps/www/src/public/registry/styles/new-york/resizable.json
deleted file mode 100644
index 301cbf99..00000000
--- a/apps/www/src/public/registry/styles/new-york/resizable.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "resizable",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "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"
-    },
-    {
-      "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\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  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
deleted file mode 100644
index 8c2f5b08..00000000
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "scroll-area",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
-    },
-    {
-      "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
deleted file mode 100644
index 002a4dcb..00000000
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "select",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
-    },
-    {
-      "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\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  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
-    },
-    {
-      "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
-    },
-    {
-      "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
deleted file mode 100644
index 73551fd3..00000000
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "separator",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Separator } from './Separator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
deleted file mode 100644
index 4a3a0f20..00000000
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "sheet",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
deleted file mode 100644
index 4823d540..00000000
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ /dev/null
@@ -1,125 +0,0 @@
-{
-  "name": "sidebar",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "Sheet.vue",
-    "SheetContent.vue",
-    "utils",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
-  ],
-  "files": [
-    {
-      "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
-    },
-    {
-      "name": "SidebarInset.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuBadge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubItem.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "SidebarRail.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n"
-    },
-    {
-      "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/skeleton.json b/apps/www/src/public/registry/styles/new-york/skeleton.json
deleted file mode 100644
index ceb9997d..00000000
--- a/apps/www/src/public/registry/styles/new-york/skeleton.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "skeleton",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
deleted file mode 100644
index 2ee05cbe..00000000
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "slider",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\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  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n    />\n  </SliderRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Slider } from './Slider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
deleted file mode 100644
index 3a164849..00000000
--- a/apps/www/src/public/registry/styles/new-york/sonner.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "sonner",
-  "dependencies": [
-    "vue-sonner"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Sonner.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Toaster } from './Sonner.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/stepper.json b/apps/www/src/public/registry/styles/new-york/stepper.json
deleted file mode 100644
index 9906bd6b..00000000
--- a/apps/www/src/public/registry/styles/new-york/stepper.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "stepper",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\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  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
-    },
-    {
-      "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
-    },
-    {
-      "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
-    },
-    {
-      "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
-    },
-    {
-      "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
-    },
-    {
-      "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
-    },
-    {
-      "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
deleted file mode 100644
index a01e2763..00000000
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "switch",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\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  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Switch } from './Switch.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
deleted file mode 100644
index dbed5219..00000000
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "table",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "TableBody.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
-    },
-    {
-      "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
-    },
-    {
-      "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
-    },
-    {
-      "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
-    },
-    {
-      "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
-    },
-    {
-      "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n"
-    },
-    {
-      "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
-    },
-    {
-      "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
deleted file mode 100644
index 1fec294b..00000000
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tabs",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
-    },
-    {
-      "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
-    },
-    {
-      "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
-    },
-    {
-      "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { 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  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
deleted file mode 100644
index ece36edf..00000000
--- a/apps/www/src/public/registry/styles/new-york/tags-input.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "tags-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\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  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
-    },
-    {
-      "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { 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  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { 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  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { 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  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/textarea.json b/apps/www/src/public/registry/styles/new-york/textarea.json
deleted file mode 100644
index edd75819..00000000
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "textarea",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Textarea } from './Textarea.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
deleted file mode 100644
index e9162897..00000000
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "toast",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\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  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
-    },
-    {
-      "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
-    },
-    {
-      "name": "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"
-    },
-    {
-      "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
-    },
-    {
-      "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
-    },
-    {
-      "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
-    },
-    {
-      "name": "use-toast.ts",
-      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
deleted file mode 100644
index 0387d188..00000000
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "toggle-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "toggle",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\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  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
deleted file mode 100644
index f0ceab84..00000000
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "toggle",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tooltip.json b/apps/www/src/public/registry/styles/new-york/tooltip.json
deleted file mode 100644
index ca0171b5..00000000
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tooltip",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
-    },
-    {
-      "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\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  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
-    },
-    {
-      "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json
deleted file mode 100644
index 4ab67b85..00000000
--- a/apps/www/src/public/registry/styles/new-york/v-calendar.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "v-calendar",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/themes.css b/apps/www/src/public/registry/themes.css
deleted file mode 100644
index 284237c6..00000000
--- a/apps/www/src/public/registry/themes.css
+++ /dev/null
@@ -1,768 +0,0 @@
-
-  .theme-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 5.9% 10%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 4.9% 83.9%;
-  }
-
-  .theme-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 212.7 26.8% 83.9;
-  }
-
-  .theme-stone {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 24 5.7% 82.9%;
-  }
-
-  .theme-gray {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 224 71.4% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 216 12.2% 83.9%;
-  }
-
-  .theme-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 0% 83.1%;
-  }
-
-  .theme-red {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 72.2% 50.6%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-red {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 72.2% 50.6%;
-  }
-
-  .theme-rose {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 346.8 77.2% 49.8%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-rose {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 346.8 77.2% 49.8%;
-  }
-
-  .theme-orange {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 24.6 95% 53.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-orange {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20.5 90.2% 48.2%;
-  }
-
-  .theme-green {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 142.1 76.2% 36.3%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-green {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 144.9 80.4% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 142.4 71.8% 29.2%;
-  }
-
-  .theme-blue {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 221.2 83.2% 53.3%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-blue {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 224.3 76.3% 48%;
-  }
-
-  .theme-yellow {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-yellow {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 35.5 91.7% 32.9%;
-  }
-
-  .theme-violet {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 262.1 83.3% 57.8%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-violet {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 263.4 70% 50.4%;
-  }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/themes/gray.json b/apps/www/src/public/registry/themes/gray.json
deleted file mode 100644
index 3f702b7f..00000000
--- a/apps/www/src/public/registry/themes/gray.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "gray",
-  "label": "Gray",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "224 71.4% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "primary": "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      "secondary": "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "accent": "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
-      "ring": "224 71.4% 4.1%"
-    },
-    "dark": {
-      "background": "224 71.4% 4.1%",
-      "foreground": "210 20% 98%",
-      "card": "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "primary": "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      "secondary": "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "accent": "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
-      "ring": "216 12.2% 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/neutral.json b/apps/www/src/public/registry/themes/neutral.json
deleted file mode 100644
index 625428d0..00000000
--- a/apps/www/src/public/registry/themes/neutral.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "neutral",
-  "label": "Neutral",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/slate.json b/apps/www/src/public/registry/themes/slate.json
deleted file mode 100644
index 2cd8397f..00000000
--- a/apps/www/src/public/registry/themes/slate.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "slate",
-  "label": "Slate",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "ring": "222.2 84% 4.9%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "ring": "212.7 26.8 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/stone.json b/apps/www/src/public/registry/themes/stone.json
deleted file mode 100644
index ae16da32..00000000
--- a/apps/www/src/public/registry/themes/stone.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "stone",
-  "label": "Stone",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/zinc.json b/apps/www/src/public/registry/themes/zinc.json
deleted file mode 100644
index ea49146d..00000000
--- a/apps/www/src/public/registry/themes/zinc.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "zinc",
-  "label": "Zinc",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
index 02131919..b539430f 100644
--- a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
@@ -41,7 +41,7 @@ import { ChevronDown, Slash } from 'lucide-vue-next'
         </DropdownMenu>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
diff --git a/apps/www/src/registry/new-york/example/CommandDemo.vue b/apps/www/src/registry/new-york/example/CommandDemo.vue
index bab80998..83f1fbb7 100644
--- a/apps/www/src/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/registry/new-york/example/CommandDemo.vue
@@ -21,7 +21,7 @@ import {
 </script>
 
 <template>
-  <Command class="rounded-lg border shadow-md md:min-w-[450px]">
+  <Command class="rounded-lg border shadow-md max-w-[450px]">
     <CommandInput placeholder="Type a command or search..." />
     <CommandList>
       <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
index dd5a872d..dcbe942e 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
   >
     <slot />
   </ComboboxItem>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97350e40..189e1188 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,9 +122,6 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.15)
-      v-calendar:
-        specifier: ^3.1.2
-        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3))
       vaul-vue:
         specifier: ^0.2.0
         version: 0.2.0(radix-vue@1.9.8(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
@@ -1866,9 +1863,6 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
   '@radix-icons/vue@1.0.0':
     resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
     peerDependencies:
@@ -2316,9 +2310,6 @@ packages:
   '@types/prompts@2.4.9':
     resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
 
-  '@types/resize-observer-browser@0.1.11':
-    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
-
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -3604,15 +3595,6 @@ packages:
     resolution: {integrity: sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==}
     engines: {node: '>= 8'}
 
-  date-fns-tz@2.0.1:
-    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
-    peerDependencies:
-      date-fns: 2.x
-
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
@@ -7437,12 +7419,6 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  v-calendar@3.1.2:
-    resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
-    peerDependencies:
-      '@popperjs/core': ^2.0.0
-      vue: ^3.2.0
-
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -7683,11 +7659,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue-screen-utils@1.0.0-beta.13:
-    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
-    peerDependencies:
-      vue: ^3.2.0
-
   vue-sonner@1.2.5:
     resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
 
@@ -9441,8 +9412,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@popperjs/core@2.11.8': {}
-
   '@radix-icons/vue@1.0.0(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       vue: 3.5.13(typescript@5.6.3)
@@ -9934,8 +9903,6 @@ snapshots:
       '@types/node': 22.9.0
       kleur: 3.0.3
 
-  '@types/resize-observer-browser@0.1.11': {}
-
   '@types/resolve@1.20.2': {}
 
   '@types/responselike@1.0.3':
@@ -11540,14 +11507,6 @@ snapshots:
       image-size: 0.8.3
       mimer: 1.1.0
 
-  date-fns-tz@2.0.1(date-fns@2.30.0):
-    dependencies:
-      date-fns: 2.30.0
-
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.26.0
-
   date-fns@4.1.0: {}
 
   db0@0.2.1: {}
@@ -16023,17 +15982,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      '@types/lodash': 4.17.13
-      '@types/resize-observer-browser': 0.1.11
-      date-fns: 2.30.0
-      date-fns-tz: 2.0.1(date-fns@2.30.0)
-      lodash: 4.17.21
-      vue: 3.5.13(typescript@5.6.3)
-      vue-screen-utils: 1.0.0-beta.13(vue@3.5.13(typescript@5.6.3))
-
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -16444,10 +16392,6 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.6.3)
 
-  vue-screen-utils@1.0.0-beta.13(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      vue: 3.5.13(typescript@5.6.3)
-
   vue-sonner@1.2.5: {}
 
   vue-tsc@2.1.10(typescript@5.6.3):