From cb974f95e06f476a64f0ab1f6a178350e779be5e Mon Sep 17 00:00:00 2001
From: Valentin Hutter <valentinhutter1296@gmail.com>
Date: Thu, 18 Jan 2024 13:36:56 +0100
Subject: [PATCH 01/29] feat: Calendar component inherits the VCalendar slots
 (#285)

---
 apps/www/__registry__/index.ts                | 14 ++++
 .../src/content/docs/components/calendar.md   | 37 +++++++++-
 .../content/docs/components/date-picker.md    |  4 +
 .../default/example/RangePickerWithSlot.vue   | 69 ++++++++++++++++++
 .../registry/default/ui/calendar/Calendar.vue | 19 ++++-
 .../lib/registry/default/ui/calendar/index.ts | 21 ++++++
 .../new-york/example/RangePickerWithSlot.vue  | 73 +++++++++++++++++++
 .../new-york/ui/calendar/Calendar.vue         | 19 ++++-
 .../registry/new-york/ui/calendar/index.ts    | 21 ++++++
 .../registry/styles/default/calendar.json     |  4 +-
 .../registry/styles/new-york/calendar.json    |  4 +-
 11 files changed, 276 insertions(+), 9 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 08289ff8..2c7ae3aa 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -506,6 +506,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/RadioGroupForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/RadioGroupForm.vue'],
     },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/RangePickerWithSlot.vue'],
+    },
     ScrollAreaDemo: {
       name: 'ScrollAreaDemo',
       type: 'components:example',
@@ -1390,6 +1397,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/RadioGroupForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/RadioGroupForm.vue'],
     },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/RangePickerWithSlot.vue'],
+    },
     ScrollAreaDemo: {
       name: 'ScrollAreaDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index ccdc9971..ab0dff47 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -56,5 +56,40 @@ import { Calendar } from '@/components/ui/calendar'
 </template>
 ```
 
-See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
+The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
 
+### Slots
+
+The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
+
+- `day-content`
+- `day-popover`
+- `dp-footer`
+- `footer`
+- `header-title-wrapper`
+- `header-title`
+- `header-prev-button`
+- `header-next-button`
+- `nav`
+- `nav-prev-button`
+- `nav-next-button`
+- `page`
+- `time-header`
+
+Example using the `day-content` slot:
+
+```vue
+<script setup lang="ts">
+import { Calendar } from '@/components/ui/calendar'
+</script>
+
+<template>
+  <Calendar>
+    <template #day-content="{ day, dayProps, dayEvents }">
+      <div v-bind="dayProps" v-on="dayEvents">
+        {{ day.label }}
+      </div>
+    </template>
+  </Calendar>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index d2070ad2..3fbdc563 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -72,6 +72,10 @@ const date = ref<Date>()
 
 <ComponentPreview name="DatePickerWithPresets"  />
 
+### With Slot
+
+<ComponentPreview name="RangePickerWithSlot"  />
+
 ### Form
 
 <ComponentPreview name="DatePickerForm"  />
diff --git a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
new file mode 100644
index 00000000..be4ab976
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+const date = ref({
+  start: new Date(2022, 0, 20),
+  end: addDays(new Date(2022, 0, 20), 20),
+})
+</script>
+
+<template>
+  <div :class="cn('grid gap-2', $attrs.class ?? '')">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="cn(
+            'w-[300px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+          )"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+
+          <span>
+            {{ date.start ? (
+              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
+              : format(date.start, 'LLL dd, y')
+            ) : 'Pick a date' }}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+        <Calendar
+          v-model.range="date"
+          mode="date"
+          :columns="2"
+        >
+          <template #footer>
+            <div class="w-full px-3 pb-3">
+              Entry time
+              <Calendar
+                v-model="date.start"
+                mode="time"
+                hide-time-header
+              />
+              Exit time
+              <Calendar
+                v-model="date.end"
+                mode="time"
+                hide-time-header
+              />
+            </div>
+          </template>
+        </Calendar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index 9415ce64..f3c11d83 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -3,7 +3,8 @@ import { useVModel } from '@vueuse/core'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -64,6 +65,16 @@ onMounted(async () => {
   if (modelValue.value instanceof Date && calendarRef.value)
     calendarRef.value.focusDate(modelValue.value)
 })
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
 </script>
 
 <template>
@@ -86,7 +97,11 @@ onMounted(async () => {
       trim-weeks
       :transition="'none'"
       :columns="columns"
-    />
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </DatePicker>
   </div>
 </template>
 
diff --git a/apps/www/src/lib/registry/default/ui/calendar/index.ts b/apps/www/src/lib/registry/default/ui/calendar/index.ts
index 50f21114..d17d00f2 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/calendar/index.ts
@@ -1 +1,22 @@
 export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}
diff --git a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
new file mode 100644
index 00000000..95dcd021
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { ref } from 'vue'
+import { CalendarIcon } from '@radix-icons/vue'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref({
+  start: new Date(2022, 0, 20),
+  end: addDays(new Date(2022, 0, 20), 20),
+})
+</script>
+
+<template>
+  <div :class="cn('grid gap-2', $attrs.class ?? '')">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="cn(
+            'w-[300px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+          )"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+
+          <span>
+            {{ date.start ? (
+              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
+              : format(date.start, 'LLL dd, y')
+            ) : 'Pick a date' }}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+        <Calendar
+          v-model.range="date"
+          mode="date"
+          :columns="2"
+        >
+          <template #footer>
+            <div class="flex w-full mt-6 border-t border-accent pt-4">
+              <div class="w-1/2">
+                <strong>Entry time</strong>
+                <Calendar
+                  v-model="date.start"
+                  mode="time"
+                  hide-time-header
+                />
+              </div>
+              <div class="w-1/2">
+                <strong>Exit time</strong>
+                <Calendar
+                  v-model="date.end"
+                  mode="time"
+                  hide-time-header
+                />
+              </div>
+            </div>
+          </template>
+        </Calendar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 182ad770..f5241ea2 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -3,7 +3,8 @@ import { useVModel } from '@vueuse/core'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
 import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -63,6 +64,16 @@ onMounted(async () => {
   if (modelValue.value instanceof Date && calendarRef.value)
     calendarRef.value.focusDate(modelValue.value)
 })
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
 </script>
 
 <template>
@@ -85,7 +96,11 @@ onMounted(async () => {
       trim-weeks
       :transition="'none'"
       :columns="columns"
-    />
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </DatePicker>
   </div>
 </template>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/index.ts b/apps/www/src/lib/registry/new-york/ui/calendar/index.ts
index 50f21114..d17d00f2 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/index.ts
@@ -1 +1,22 @@
 export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index e8f631e2..bae081a3 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,11 +11,11 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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</script>\n\n<template>\n  <div class=\"relative\">\n    <div class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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'\n"
+      "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/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index b83d724f..3adbb0b1 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -11,11 +11,11 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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</script>\n\n<template>\n  <div class=\"relative\">\n    <div class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-8 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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-8 w-8 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-8 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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-8 w-8 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'\n"
+      "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"

From 5336fce443e08324f7ec892351f6da823e0a2f2b Mon Sep 17 00:00:00 2001
From: Rukshan Ranatunge <arkruka@gmail.com>
Date: Thu, 18 Jan 2024 13:38:39 +0100
Subject: [PATCH 02/29] docs: add @types/node section in Vite
 installation(#289)

Add install @types/node to follow the documentation in shadcn-ui. And import path without an error
---
 apps/www/src/content/docs/installation/vite.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index b1a512ef..1763b867 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -42,6 +42,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can
 
 Add the code below to the vite.config.ts so your app can resolve paths without error
 
+```bash
+# (so you can import "path" without error)
+npm i -D @types/node
+```
+
 ```typescript
 import path from "path"
 import vue from "@vitejs/plugin-vue"

From 50586487d5567950ae337c8394c65ef06ef821ce Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 18 Jan 2024 16:45:38 +0330
Subject: [PATCH 03/29] docs: update vite installation (#250)

---
 .../www/src/content/docs/installation/vite.md | 60 +++++++++++++++++--
 1 file changed, 55 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 1763b867..cbb706a2 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts
 
 ### Add Tailwind and its configuration
 
-Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
 
-npx tailwindcss init -p
-```
+
+<TabsMarkdown>
+  <TabMarkdown title="vite.config.ts">
+
+  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
+
+  ```bash
+  npm install -D tailwindcss autoprefixer
+  ```
+
+  #### `vite.config`
+
+  ```typescript {5,6,10-14}
+  import path from "path"
+  import { defineConfig } from "vite"
+  import vue from "@vitejs/plugin-vue"
+
+  import tailwind from "tailwindcss"
+  import autoprefixer from "autoprefixer"
+
+  export default defineConfig({
+    plugins: [vue()],
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()],
+      },
+    },
+    resolve: {...}
+  })
+  ```
+
+  </TabMarkdown>
+
+
+  <TabMarkdown title="postcss.config.js">
+
+  ```bash
+  npm install -D tailwindcss autoprefixer postcss
+  ```
+
+  #### `postcss.config.js`
+
+  ```js
+  module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  ```
+
+  </TabMarkdown>
+</TabsMarkdown>
+
 
 ### Edit tsconfig.json
 

From f41642f5d8e258215627959b051fdcfb0842fe9a Mon Sep 17 00:00:00 2001
From: trolladam <trolladam@users.noreply.github.com>
Date: Sat, 20 Jan 2024 12:42:36 +0100
Subject: [PATCH 04/29] fix: separator background color (#295)

---
 apps/www/src/lib/registry/default/ui/separator/Separator.vue  | 2 +-
 apps/www/src/lib/registry/new-york/ui/separator/Separator.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/separator/Separator.vue b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
index 1e6b3f3f..2cc88b0c 100644
--- a/apps/www/src/lib/registry/default/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
@@ -8,7 +8,7 @@ const props = defineProps<SeparatorProps & { class?: string }>()
 <template>
   <Separator
     :class="[
-      cn('shrink-0 bg-secondary', props.class),
+      cn('shrink-0 bg-border', props.class),
       props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
     ]"
   />
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
index 1e6b3f3f..2cc88b0c 100644
--- a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
@@ -8,7 +8,7 @@ const props = defineProps<SeparatorProps & { class?: string }>()
 <template>
   <Separator
     :class="[
-      cn('shrink-0 bg-secondary', props.class),
+      cn('shrink-0 bg-border', props.class),
       props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
     ]"
   />

From f9ab01e11be833b0d20dd3aa10920e129f9338ed Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 22 Jan 2024 01:16:48 +0330
Subject: [PATCH 05/29] docs: fix new line-number, fix highlight color on txt
 md block  in shikiji (#299)

* docs: tweaks container size and shiki styles
---
 apps/www/.vitepress/config.mts                |   7 +-
 .../.vitepress/theme/layout/DocsLayout.vue    |   2 +-
 .../.vitepress/theme/layout/MainLayout.vue    |   2 +-
 apps/www/.vitepress/theme/styles/shiki.css    |   4 +-
 apps/www/.vitepress/theme/styles/vp-doc.css   |  11 +-
 apps/www/package.json                         |  11 +-
 .../src/content/docs/components/carousel.md   |  18 +-
 .../src/content/docs/components/data-table.md |  22 +-
 apps/www/src/content/docs/components/form.md  |   8 +-
 apps/www/src/content/docs/components/sheet.md |   2 +-
 .../src/content/docs/installation/astro.md    |  14 +-
 .../src/content/docs/installation/laravel.md  |   2 +-
 .../www/src/content/docs/installation/nuxt.md |   2 +-
 .../www/src/content/docs/installation/vite.md |   2 +-
 package.json                                  |   2 +-
 pnpm-lock.yaml                                | 349 ++++++++++--------
 16 files changed, 250 insertions(+), 208 deletions(-)

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 0e2a62c3..c4958ec1 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -4,14 +4,14 @@ import Icons from 'unplugin-icons/vite'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
 import { createCssVariablesTheme } from 'shikiji'
+
+// import { transformerMetaWordHighlight } from 'shikiji-transformers'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
 const cssVariables = createCssVariablesTheme({
-  name: 'css-variables',
   variablePrefix: '--shiki-',
   variableDefaults: {},
-  fontStyle: true,
 })
 
 // https://vitepress.dev/reference/site-config
@@ -59,6 +59,9 @@ export default defineConfig({
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
     theme: cssVariables,
+    codeTransformers: [
+      // transformerMetaWordHighlight(),
+    ],
     config(md) {
       md.use(ComponentPreviewPlugin)
     },
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 522d776f..c8cd7649 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -20,7 +20,7 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
       <aside
         class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
       >
-        <ScrollArea orientation="vertical" class="h-full py-6 pl-8 pr-6 lg:py-8" :type="'auto'">
+        <ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
           <div class="w-full">
             <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
               <h4
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 23bc4121..41c0199c 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -86,7 +86,7 @@ watch(() => $route.path, (n) => {
   <div class="flex min-h-screen flex-col bg-background">
     <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
-        class="container flex justify-between h-14 items-center"
+        class="container flex justify-between h-14 max-w-screen-2xl items-center"
       >
         <MobileNav />
 
diff --git a/apps/www/.vitepress/theme/styles/shiki.css b/apps/www/.vitepress/theme/styles/shiki.css
index 89c8ff24..9c0d7eda 100644
--- a/apps/www/.vitepress/theme/styles/shiki.css
+++ b/apps/www/.vitepress/theme/styles/shiki.css
@@ -1,5 +1,5 @@
 :root {
-  --shiki-foreground: #EEEEEE;
+  --shiki-foreground: #FFF8;
   --shiki-color-background: #ffffff;
   --shiki-token-constant: #ffffff;
   --shiki-token-string: #ffffff88;
@@ -7,7 +7,7 @@
   --shiki-token-keyword: #ffffff88;
   --shiki-token-parameter: #AA0000;
   --shiki-token-function: #ffffff;
-  --shiki-token-string-expression: #ffffff88;
+  --shiki-token-string-expression: #ebebeb;
   --shiki-token-punctuation: #ffffff;
   --shiki-token-link: #EE0000;
 }
\ No newline at end of file
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 39c561b8..db40cba3 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -3,6 +3,7 @@
   --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
   --vp-code-bg: hsl(var(--muted));
   --vp-c-divider: hsl(var(--muted));
+  --vp-code-block-color: #fff
 } 
 
 
@@ -414,7 +415,7 @@
 
 .vp-doc div[class*='language-'].line-numbers-mode {
   /*rtl:ignore*/
-  padding-left: 32px;
+  padding-left: 0px;
 }
 
 .vp-doc .line-numbers-wrapper {
@@ -566,4 +567,12 @@
 
 .vp-external-link-icon::after {
   content: '';
+}
+
+.vp-doc [class*=language-] code {
+  color: var(--vp-code-block-color);
+}
+
+.line-numbers-mode pre code .line {
+  padding-left: 3rem !important;
 }
\ No newline at end of file
diff --git a/apps/www/package.json b/apps/www/package.json
index 83ca3d93..cdc17e69 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -19,7 +19,7 @@
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.11.6",
+    "@tanstack/vue-table": "^8.11.7",
     "@unovis/ts": "^1.3.1",
     "@unovis/vue": "^1.3.1",
     "@vee-validate/zod": "^4.12.4",
@@ -36,7 +36,7 @@
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vee-validate": "4.12.4",
-    "vue": "^3.4.14",
+    "vue": "^3.4.15",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
@@ -56,14 +56,15 @@
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
-    "shikiji": "^0.10.0-beta.2",
+    "shikiji": "^0.10.0-beta.9",
+    "shikiji-transformers": "^0.10.0-beta.9",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
     "unplugin-icons": "^0.17.1",
-    "vite": "^5.0.11",
-    "vitepress": "^1.0.0-rc.37",
+    "vite": "^5.0.12",
+    "vitepress": "^1.0.0-rc.39",
     "vue-tsc": "^1.8.27"
   }
 }
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 9ca1b11d..7b741e6d 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -57,7 +57,7 @@ To set the size of the items, you can use the `basis` utility class on the `<Car
 
 Example
 
-```vue title="Example" showLineNumbers {4-6}
+```vue:line-numbers title="Example" {4-6}
 // 33% of the carousel width.
 <Carousel>
   <CarouselContent>
@@ -71,7 +71,7 @@ Example
 
 Responsive
 
-```vue title="Responsive" showLineNumbers {4-6}
+```vue:line-numbers title="Responsive" {4-6}
 // 50% on small screens and 33% on larger screens.
 <Carousel>
   <CarouselContent>
@@ -101,7 +101,7 @@ You can always adjust this in your own project if you need to.
 
 Example
 
-```vue showLineNumbers /-ml-4/ /pl-4/
+```vue:line-numbers /-ml-4/ /pl-4/
 <template>
   <Carousel>
     <CarouselContent class="-ml-4">
@@ -121,7 +121,7 @@ Example
 
 Responsive
 
-```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+```vue:line-numbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
 <template>
   <Carousel>
     <CarouselContent class="-ml-2 md:-ml-4">
@@ -155,7 +155,7 @@ Use the `orientation` prop to set the orientation of the carousel.
 
 You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
 
-```vue showLineNumbers {3-6}
+```vue:line-numbers {3-6}
 <template>
   <Carousel
     :opts="{
@@ -184,7 +184,7 @@ Use the `@init-api` emit method on `<Carousel />` component to set the instance
 
 You can access it through setting a template ref on the `<Carousel />` component.
 
-```vue showLineNumbers {2,5,9}
+```vue:line-numbers {2,5,9}
 <script setup>
 const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
 
@@ -204,7 +204,7 @@ function accessApi() {
 
 You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<Carousel />` component
 
-```vue showLineNumbers {5,7-9,25}
+```vue:line-numbers {5,7-9,25}
 <script setup>
 import { nextTick, ref, watch } from 'vue'
 import { useCarousel } from '@/components/ui/carousel'
@@ -241,7 +241,7 @@ See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for mo
 
 You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `<Carousel v-slot="slotProps" />` component to extend the functionality.
 
-```vue showLineNumbers {2}
+```vue:line-numbers {2}
 <template>
   <Carousel v-slot="{ canScrollNext, canScrollPrev }">
     ...
@@ -260,7 +260,7 @@ npm i embla-carousel-autoplay
 ```
 
 
-```vue showLineNumbers {2,8-10}
+```vue:line-numbers {2,8-10}
 <script setup lang="ts">
 import Autoplay from 'embla-carousel-autoplay'
 </script>
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index 71e9487b..e479e4de 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -225,7 +225,7 @@ const table = useVueTable({
 
 Finally, we'll render our table in our index component.
 
-```ts:line-numbers showLineNumbers{28}
+```ts:line-numbers {28}
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { columns } from "./components/columns"
@@ -272,7 +272,7 @@ Let's format the amount cell to display the dollar amount. We'll also align the
 Update the `header` and `cell` definitions for amount as follows:
 
 
-```ts:line-numbers showLineNumbers title="components/payments/columns.ts" {5-17}
+```ts:line-numbers title="components/payments/columns.ts" {5-17}
 import { h } from 'vue'
 
 export const columns: ColumnDef<Payment>[] = [
@@ -380,7 +380,7 @@ Next, we'll add pagination to our table.
 
 ### Update `<DataTable>`
 
-```ts:line-numbers showLineNumbers{4,12}
+```ts:line-numbers {4,12}
 import {
     FlexRender,
     getCoreRowModel,
@@ -402,7 +402,7 @@ This will automatically paginate your rows into pages of 10. See the [pagination
 
 We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
 
-```ts:line-numbers showLineNumbers{3,15,21-39}
+```ts:line-numbers {3,15,21-39}
 // components/payments/DataTable.vue
 <script lang="ts" generic="TData, TValue">
 import { Button } from "@/components/ui/button"
@@ -458,7 +458,7 @@ Let's make the email column sortable.
 
 ### Add the following into your `utils` file:
 
-```ts:line-numbers showLineNumbers{5,6,12-17}
+```ts:line-numbers {5,6,12-17}
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
@@ -482,7 +482,7 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
 
 ### Update `<DataTable>`
 
-```ts:line-numbers showLineNumbers{4,7,16,34,41-44}
+```ts:line-numbers {4,7,16,34,41-44}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -545,7 +545,7 @@ const table = useVueTable({
 
 We can now update the `email` header cell to add sorting controls.
 
-```ts:line-numbers showLineNumbers{5,10-17}
+```ts:line-numbers {5,10-17}
 // components/payments/columns.ts
 import type {
   ColumnDef,
@@ -579,7 +579,7 @@ Let's add a search input to filter emails in our table.
 
 ### Update `<DataTable>`
 
-```ts:line-numbers showLineNumbers{4,11,19,39,48-49,52,60-64}
+```ts:line-numbers {4,11,19,39,48-49,52,60-64}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -664,7 +664,7 @@ Adding column visibility is fairly simple using `@tanstack/vue-table` visibility
 
 ### Update `<DataTable>`
 
-```ts:line-numbers showLineNumbers{6,9-14,48,59,63,75-91}
+```ts:line-numbers {6,9-14,48,59,63,75-91}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -803,7 +803,7 @@ Next, we're going to add row selection to our table.
 
 ### Update column definitions
 
-```ts:line-numbers showLineNumbers{3,6-20}
+```ts:line-numbers {3,6-20}
 import type { ColumnDef } from '@tanstack/vue-table'
 
 import { Checkbox } from '@/components/ui/checkbox'
@@ -829,7 +829,7 @@ export const columns: ColumnDef<Payment>[] = [
 
 ### Update `<DataTable>`
 
-```ts:line-numbers showLineNumbers{10,22,27}
+```ts:line-numbers {10,22,27}
 <script setup lang="ts" generic="TData, TValue">
 const props = defineProps<{
     columns: ColumnDef<TData, TValue>[]
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index cf275dcc..a6ff1280 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -159,7 +159,7 @@ Use `@vee-validate/zod` to integrate Zod schema validation with `vee-validate`
 
 `toTypedSchema` also makes the form values and submitted values typed automatically and caters for both input and output types of that schema.
 
-```vue showLineNumbers {2-3,5-7}
+```vue:line-numbers {2-3,5-7}
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -179,7 +179,7 @@ Use the `useForm` composable from `vee-validate` or use `<Form />` component to
 <TabPreview name="Composition" :names="['Composition', 'Component']">
 <template #Composition>
 
-```vue showLineNumbers {2,19-21}
+```vue:line-numbers {2,19-21}
 <script setup lang="ts">
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -218,7 +218,7 @@ const onSubmit = form.handleSubmit((values) => {
 
 <template #Component>
 
-```vue showLineNumbers {5,24-26}
+```vue:line-numbers {5,24-26}
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -256,7 +256,7 @@ function onSubmit(values) {
 Based on last step we can either use `<Form />` component or `useForm` composable
 `useForm` is recommended cause values are typed automatically
 
-```vue showLineNumbers {2}
+```vue:line-numbers {2}
 <script setup lang="ts">
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 57e6f55f..6d2e90ac 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -57,7 +57,7 @@ Use the `side` property to `<SheetContent />` to indicate the edge of the screen
 
 You can adjust the size of the sheet using CSS classes:
 
-```vue:line-numbers showLineNumbers{4}
+```vue:line-numbers {4}
 <template>
   <Sheet>
     <SheetTrigger>Open</SheetTrigger>
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md
index fd3b2de9..3f5efd57 100644
--- a/apps/www/src/content/docs/installation/astro.md
+++ b/apps/www/src/content/docs/installation/astro.md
@@ -17,7 +17,7 @@ npm create astro@latest
 
 You will be asked a few questions to configure your project:
 
-```txt showLineNumbers
+```txt:line-numbers
 - Where should we create your new project?
 ./your-app-name
 - How would you like to start your new project?
@@ -76,7 +76,7 @@ This will install `tailwindcss` and `@astrojs/tailwind` as dependencies and set
 
 Add the code below to the tsconfig.json file to resolve paths:
 
-```json {2-7} showLineNumbers
+```json:line-numbers {2-7}
 {
   "compilerOptions": {
     "baseUrl": ".",
@@ -99,7 +99,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Astro
 Which style would you like to use? › Default
@@ -116,15 +116,17 @@ Write configuration to components.json. Proceed? > Y/n
 
 Import the `globals.css` file in the `src/index.astro` file:
 
-```ts {2} showLineNumbers
+```ts:line-numbers {2}
+---
 import '@/styles/globals.css'
+---
 ```
 
 ### Update astro tailwind config
 
 To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.
 
-```ts {3-5} showLineNumbers
+```ts:line-numbers {3-5} 
 export default defineConfig({
   integrations: [
     tailwind({
@@ -144,7 +146,7 @@ npx shadcn-vue@latest add button
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
-```astro {2,10} showLineNumbers
+```astro:line-numbers {2,10}
 ---
 import { Button } from "@/components/ui/button"
 ---
diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md
index c97a6137..791a1f3d 100644
--- a/apps/www/src/content/docs/installation/laravel.md
+++ b/apps/www/src/content/docs/installation/laravel.md
@@ -25,7 +25,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index f90521b3..ff91808f 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -180,7 +180,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index cbb706a2..314f0790 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -124,7 +124,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```txt showLineNumbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
diff --git a/package.json b/package.json
index 3d7704ba..46bf4963 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "shadcn-vue",
   "version": "0.8.7",
   "private": true,
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@8.14.1",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 026e4b93..68572cc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,28 +49,28 @@ importers:
         version: 0.8.1
       '@morev/vue-transitions':
         specifier: ^2.3.6
-        version: 2.3.6(vue@3.4.14)
+        version: 2.3.6(vue@3.4.15)
       '@radix-icons/vue':
         specifier: ^1.0.0
-        version: 1.0.0(vue@3.4.14)
+        version: 1.0.0(vue@3.4.15)
       '@stackblitz/sdk':
         specifier: ^1.9.0
         version: 1.9.0
       '@tanstack/vue-table':
-        specifier: ^8.11.6
-        version: 8.11.6(vue@3.4.14)
+        specifier: ^8.11.7
+        version: 8.11.7(vue@3.4.15)
       '@unovis/ts':
         specifier: ^1.3.1
         version: 1.3.1
       '@unovis/vue':
         specifier: ^1.3.1
-        version: 1.3.1(@unovis/ts@1.3.1)(vue@3.4.14)
+        version: 1.3.1(@unovis/ts@1.3.1)(vue@3.4.15)
       '@vee-validate/zod':
         specifier: ^4.12.4
-        version: 4.12.4(vue@3.4.14)
+        version: 4.12.4(vue@3.4.15)
       '@vueuse/core':
         specifier: ^10.7.2
-        version: 10.7.2(vue@3.4.14)
+        version: 10.7.2(vue@3.4.15)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -91,28 +91,28 @@ importers:
         version: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
       embla-carousel-vue:
         specifier: 8.0.0-rc19
-        version: 8.0.0-rc19(vue@3.4.14)
+        version: 8.0.0-rc19(vue@3.4.15)
       lucide-vue-next:
         specifier: ^0.276.0
-        version: 0.276.0(vue@3.4.14)
+        version: 0.276.0(vue@3.4.15)
       radix-vue:
         specifier: ^1.3.2
-        version: 1.3.2(vue@3.4.14)
+        version: 1.3.2(vue@3.4.15)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
       v-calendar:
         specifier: ^3.1.2
-        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.14)
+        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.15)
       vee-validate:
         specifier: 4.12.4
-        version: 4.12.4(vue@3.4.14)
+        version: 4.12.4(vue@3.4.15)
       vue:
-        specifier: ^3.4.14
-        version: 3.4.14(typescript@5.3.3)
+        specifier: ^3.4.15
+        version: 3.4.15(typescript@5.3.3)
       vue-wrap-balancer:
         specifier: ^1.1.3
-        version: 1.1.3(vue@3.4.14)
+        version: 1.1.3(vue@3.4.15)
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -128,7 +128,7 @@ importers:
         version: 2.2.120
       '@iconify/vue':
         specifier: ^4.1.1
-        version: 4.1.1(vue@3.4.14)
+        version: 4.1.1(vue@3.4.15)
       '@types/lodash.template':
         specifier: ^4.5.2
         version: 4.5.2
@@ -137,10 +137,10 @@ importers:
         version: 20.8.10
       '@vitejs/plugin-vue':
         specifier: ^5.0.3
-        version: 5.0.3(vite@5.0.11)(vue@3.4.14)
+        version: 5.0.3(vite@5.0.12)(vue@3.4.15)
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
-        version: 3.1.0(vite@5.0.11)(vue@3.4.14)
+        version: 3.1.0(vite@5.0.12)(vue@3.4.15)
       '@vue/compiler-core':
         specifier: ^3.4.14
         version: 3.4.14
@@ -163,8 +163,11 @@ importers:
         specifier: ^5.0.5
         version: 5.0.5
       shikiji:
-        specifier: ^0.10.0-beta.2
-        version: 0.10.0-beta.2
+        specifier: ^0.10.0-beta.9
+        version: 0.10.0-beta.9
+      shikiji-transformers:
+        specifier: ^0.10.0-beta.9
+        version: 0.10.0-beta.9
       tailwind-merge:
         specifier: ^2.2.0
         version: 2.2.0
@@ -181,11 +184,11 @@ importers:
         specifier: ^0.17.1
         version: 0.17.1
       vite:
-        specifier: ^5.0.11
-        version: 5.0.11(@types/node@20.8.10)
+        specifier: ^5.0.12
+        version: 5.0.12(@types/node@20.8.10)
       vitepress:
-        specifier: ^1.0.0-rc.37
-        version: 1.0.0-rc.37(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
+        specifier: ^1.0.0-rc.39
+        version: 1.0.0-rc.39(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -248,7 +251,7 @@ importers:
         version: 2.4.2
       radix-vue:
         specifier: ^1.3.0
-        version: 1.3.0(vue@3.4.14)
+        version: 1.3.0(vue@3.4.15)
       recast:
         specifier: ^0.23.4
         version: 0.23.4
@@ -319,7 +322,7 @@ importers:
         version: 3.8.2(rollup@3.29.4)
       '@nuxt/test-utils':
         specifier: ^3.8.1
-        version: 3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.14)
+        version: 3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.15)
       '@types/node':
         specifier: ^20.9.3
         version: 20.10.1
@@ -2398,11 +2401,11 @@ packages:
     resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
     dev: false
 
-  /@floating-ui/vue@1.0.2(vue@3.4.14):
+  /@floating-ui/vue@1.0.2(vue@3.4.15):
     resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
     dependencies:
       '@floating-ui/dom': 1.5.3
-      vue-demi: 0.14.6(vue@3.4.14)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2468,13 +2471,13 @@ packages:
       - supports-color
     dev: true
 
-  /@iconify/vue@4.1.1(vue@3.4.14):
+  /@iconify/vue@4.1.1(vue@3.4.15):
     resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
     peerDependencies:
       vue: '>=3'
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: true
 
   /@ioredis/commands@1.2.0:
@@ -2630,7 +2633,7 @@ packages:
       type-fest: 4.3.2
     dev: false
 
-  /@morev/vue-transitions@2.3.6(vue@3.4.14):
+  /@morev/vue-transitions@2.3.6(vue@3.4.15):
     resolution: {integrity: sha512-a6nOExEDVHD11wjpX5r/PJf8u9ziSwrlp16SaNJl2Gyehp6UlEkFx0aZJNZhSWnn7gOaQFzJvIqfx82p9tzqxA==}
     hasBin: true
     requiresBuild: true
@@ -2639,7 +2642,7 @@ packages:
     dependencies:
       '@morev/utils': 2.8.1
       '@nuxt/kit': 3.7.4
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3085,7 +3088,7 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/test-utils@3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.14):
+  /@nuxt/test-utils@3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.15):
     resolution: {integrity: sha512-8ZQ+OZ7z5Sc5KG2aCvk0piheYSpGb2UQJMCWr8ORwEyZIw4awrkkwGzUY06e344E4StvJB8zxN122MEcFNOkow==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -3111,7 +3114,7 @@ packages:
       pathe: 1.1.2
       ufo: 1.3.2
       vitest: 0.33.0
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3120,7 +3123,7 @@ packages:
   /@nuxt/ui-templates@1.3.1:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
 
-  /@nuxt/vite-builder@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.14):
+  /@nuxt/vite-builder@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15):
     resolution: {integrity: sha512-l/lzDDTbd3M89BpmWqjhVLgLVRqfkKp0tyYgV5seJQjj3SX+IeqI7k6k8+dMEifdeO34jUajVWptNpITXQryyg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -3128,8 +3131,8 @@ packages:
     dependencies:
       '@nuxt/kit': 3.8.2(rollup@3.29.4)
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
-      '@vitejs/plugin-vue': 4.5.0(vite@4.5.1)(vue@3.4.14)
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.5.1)(vue@3.4.14)
+      '@vitejs/plugin-vue': 4.5.0(vite@4.5.1)(vue@3.4.15)
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.5.1)(vue@3.4.15)
       autoprefixer: 10.4.16(postcss@8.4.33)
       clear: 0.1.0
       consola: 3.2.3
@@ -3158,7 +3161,7 @@ packages:
       vite: 4.5.1(@types/node@20.10.1)
       vite-node: 0.33.0(@types/node@20.10.1)
       vite-plugin-checker: 0.6.2(eslint@8.56.0)(typescript@5.3.3)(vite@4.5.1)
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
       - '@types/node'
@@ -3384,12 +3387,12 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@radix-icons/vue@1.0.0(vue@3.4.14):
+  /@radix-icons/vue@1.0.0(vue@3.4.15):
     resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
     peerDependencies:
       vue: '>= 3'
     dependencies:
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /@rollup/plugin-alias@5.1.0(rollup@3.29.4):
@@ -3826,19 +3829,19 @@ packages:
       - supports-color
     dev: true
 
-  /@tanstack/table-core@8.11.6:
-    resolution: {integrity: sha512-69WEY1PaZROaGYUrseng4/4sMYnRGhDe1vM6888CnWekGz/wuCnvqwOoOuKGYivnaiI4BVmZq4WKWhvahyj3/g==}
+  /@tanstack/table-core@8.11.7:
+    resolution: {integrity: sha512-N3ksnkbPbsF3PjubuZCB/etTqvctpXWRHIXTmYfJFnhynQKjeZu8BCuHvdlLPpumKbA+bjY4Ay9AELYLOXPWBg==}
     engines: {node: '>=12'}
     dev: false
 
-  /@tanstack/vue-table@8.11.6(vue@3.4.14):
-    resolution: {integrity: sha512-KJRdgq/s/a+1tEglArDh9tIIzqwj5W9ztTiqjqhbKLVZ2Pb6wb8p5+O6VghllqT8f2DWzlh7FDedQNPkpOaWFw==}
+  /@tanstack/vue-table@8.11.7(vue@3.4.15):
+    resolution: {integrity: sha512-uNAuthA5+6pd5Vfw0brm6E++mxAfLrzsuz/MPXOY5rtGowCu3TPsyVcaMExYMrAKEBJJsUVp4zKtzC/UdCbTtw==}
     engines: {node: '>=12'}
     peerDependencies:
       vue: ^3.2.33
     dependencies:
-      '@tanstack/table-core': 8.11.6
-      vue: 3.4.14(typescript@5.3.3)
+      '@tanstack/table-core': 8.11.7
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /@tootallnate/once@2.0.0:
@@ -4674,7 +4677,7 @@ packages:
       '@unhead/shared': 1.8.8
     dev: true
 
-  /@unhead/vue@1.8.8(vue@3.4.14):
+  /@unhead/vue@1.8.8(vue@3.4.15):
     resolution: {integrity: sha512-isHpVnSSE5SP+ObsZG/i+Jq9tAQ2u1AbGrktXKmL7P5FRxwPjhATYnJFdGpxXeXfuaFgRFKzGKs29xo4MMVODw==}
     peerDependencies:
       vue: '>=2.7 || >=3'
@@ -4683,7 +4686,7 @@ packages:
       '@unhead/shared': 1.8.8
       hookable: 5.5.3
       unhead: 1.8.8
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: true
 
   /@unovis/dagre-layout@0.8.8-2:
@@ -4736,21 +4739,21 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@unovis/vue@1.3.1(@unovis/ts@1.3.1)(vue@3.4.14):
+  /@unovis/vue@1.3.1(@unovis/ts@1.3.1)(vue@3.4.15):
     resolution: {integrity: sha512-SqtK7hTpLJgSWg+8OMDpjf/X1lPWsMY0xfiMEeq/7+70Lka99G/hQrk7IaJBapcZpinZa6gNa8xfnjyfNHesKw==}
     peerDependencies:
       '@unovis/ts': 1.2.1
       vue: ^3
     dependencies:
       '@unovis/ts': 1.3.1
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /@vee-validate/zod@4.12.4(vue@3.4.14):
+  /@vee-validate/zod@4.12.4(vue@3.4.15):
     resolution: {integrity: sha512-iNFhkBfGkre2b+eBXgBpNlNVStxDrI59sJUbzBr01EjyTkFOUgc/0wPJrhY/kBp+0pnGzNi04jklJaKfNK2ibg==}
     dependencies:
       type-fest: 4.8.3
-      vee-validate: 4.12.4(vue@3.4.14)
+      vee-validate: 4.12.4(vue@3.4.15)
       zod: 3.22.4
     transitivePeerDependencies:
       - vue
@@ -4777,7 +4780,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@4.5.1)(vue@3.4.14):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@4.5.1)(vue@3.4.15):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -4788,12 +4791,12 @@ packages:
       '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
       vite: 4.5.1(@types/node@20.10.1)
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.11)(vue@3.4.14):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.12)(vue@3.4.15):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -4803,13 +4806,13 @@ packages:
       '@babel/core': 7.23.5
       '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
-      vite: 5.0.11(@types/node@20.8.10)
-      vue: 3.4.14(typescript@5.3.3)
+      vite: 5.0.12(@types/node@20.8.10)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.5.0(vite@4.5.1)(vue@3.4.14):
+  /@vitejs/plugin-vue@4.5.0(vite@4.5.1)(vue@3.4.15):
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -4817,18 +4820,18 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.1(@types/node@20.10.1)
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: true
 
-  /@vitejs/plugin-vue@5.0.3(vite@5.0.11)(vue@3.4.14):
+  /@vitejs/plugin-vue@5.0.3(vite@5.0.12)(vue@3.4.15):
     resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.11(@types/node@20.8.10)
-      vue: 3.4.14(typescript@5.3.3)
+      vite: 5.0.12(@types/node@20.8.10)
+      vue: 3.4.15(typescript@5.3.3)
     dev: true
 
   /@vitest/expect@0.33.0:
@@ -4949,7 +4952,7 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
-  /@vue-macros/common@1.9.0(rollup@3.29.4)(vue@3.4.14):
+  /@vue-macros/common@1.9.0(rollup@3.29.4)(vue@3.4.15):
     resolution: {integrity: sha512-LbfRHDkceuokkLlVuQW9Wq3ZLmRs6KIDPzCjUvvL14HB4GslWdtvBB1suFfNs6VMvh9Zj30cEKF/EAP7QBCZ6Q==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
@@ -4964,7 +4967,7 @@ packages:
       ast-kit: 0.11.2(rollup@3.29.4)
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5010,6 +5013,15 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-core@3.4.15:
+    resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/shared': 3.4.15
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+
   /@vue/compiler-core@3.4.8:
     resolution: {integrity: sha512-GjAwOydZV6UyVBi1lYW5v4jjfU6wOeyi3vBATKJOwV7muYF0/nZi4kfdJc0pwdT5lXwbbx57lyA2Y356rFpw1A==}
     dependencies:
@@ -5033,6 +5045,12 @@ packages:
       '@vue/compiler-core': 3.4.14
       '@vue/shared': 3.4.14
 
+  /@vue/compiler-dom@3.4.15:
+    resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
+    dependencies:
+      '@vue/compiler-core': 3.4.15
+      '@vue/shared': 3.4.15
+
   /@vue/compiler-dom@3.4.8:
     resolution: {integrity: sha512-GsPyji42zmkSJlaDFKXvwB97ukTlHzlFH/iVzPFYz/APnSzuhu/CMFQbsYmrtsnc2yscF39eC4rKzvKR27aBug==}
     dependencies:
@@ -5055,14 +5073,14 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
-  /@vue/compiler-sfc@3.4.14:
-    resolution: {integrity: sha512-1vHc9Kv1jV+YBZC/RJxQJ9JCxildTI+qrhtDh6tPkR1O8S+olBUekimY0km0ZNn8nG1wjtFAe9XHij+YLR8cRQ==}
+  /@vue/compiler-sfc@3.4.15:
+    resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
     dependencies:
       '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.14
-      '@vue/compiler-dom': 3.4.14
-      '@vue/compiler-ssr': 3.4.14
-      '@vue/shared': 3.4.14
+      '@vue/compiler-core': 3.4.15
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-ssr': 3.4.15
+      '@vue/shared': 3.4.15
       estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.33
@@ -5089,11 +5107,11 @@ packages:
       '@vue/shared': 3.3.7
     dev: false
 
-  /@vue/compiler-ssr@3.4.14:
-    resolution: {integrity: sha512-bXT6+oAGlFjTYVOTtFJ4l4Jab1wjsC0cfSfOe2B4Z0N2vD2zOBSQ9w694RsCfhjk+bC2DY5Gubb1rHZVii107Q==}
+  /@vue/compiler-ssr@3.4.15:
+    resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
     dependencies:
-      '@vue/compiler-dom': 3.4.14
-      '@vue/shared': 3.4.14
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
 
   /@vue/compiler-ssr@3.4.8:
     resolution: {integrity: sha512-nxN79LHeAemhBpIa2PQ6rz57cW7W4C/XIJCOMSn2g49u6q2ekirmJI0osAOTErQPApOR0KwP2QyeTexX4zQCrw==}
@@ -5135,32 +5153,32 @@ packages:
       magic-string: 0.30.5
     dev: false
 
-  /@vue/reactivity@3.4.14:
-    resolution: {integrity: sha512-xRYwze5Q4tK7tT2J4uy4XLhK/AIXdU5EBUu9PLnIHcOKXO0uyXpNNMzlQKuq7B+zwtq6K2wuUL39pHA6ZQzObw==}
+  /@vue/reactivity@3.4.15:
+    resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
-      '@vue/shared': 3.4.14
+      '@vue/shared': 3.4.15
 
-  /@vue/runtime-core@3.4.14:
-    resolution: {integrity: sha512-qu+NMkfujCoZL6cfqK5NOfxgXJROSlP2ZPs4CTcVR+mLrwl4TtycF5Tgo0QupkdBL+2kigc6EsJlTcuuZC1NaQ==}
+  /@vue/runtime-core@3.4.15:
+    resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
     dependencies:
-      '@vue/reactivity': 3.4.14
-      '@vue/shared': 3.4.14
+      '@vue/reactivity': 3.4.15
+      '@vue/shared': 3.4.15
 
-  /@vue/runtime-dom@3.4.14:
-    resolution: {integrity: sha512-B85XmcR4E7XsirEHVqhmy4HPbRT9WLFWV9Uhie3OapV9m1MEN9+Er6hmUIE6d8/l2sUygpK9RstFM2bmHEUigA==}
+  /@vue/runtime-dom@3.4.15:
+    resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
     dependencies:
-      '@vue/runtime-core': 3.4.14
-      '@vue/shared': 3.4.14
+      '@vue/runtime-core': 3.4.15
+      '@vue/shared': 3.4.15
       csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.14(vue@3.4.14):
-    resolution: {integrity: sha512-pwSKXQfYdJBTpvWHGEYI+akDE18TXAiLcGn+Q/2Fj8wQSHWztoo7PSvfMNqu6NDhp309QXXbPFEGCU5p85HqkA==}
+  /@vue/server-renderer@3.4.15(vue@3.4.15):
+    resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
     peerDependencies:
-      vue: 3.4.14
+      vue: 3.4.15
     dependencies:
-      '@vue/compiler-ssr': 3.4.14
-      '@vue/shared': 3.4.14
-      vue: 3.4.14(typescript@5.2.2)
+      '@vue/compiler-ssr': 3.4.15
+      '@vue/shared': 3.4.15
+      vue: 3.4.15(typescript@5.2.2)
 
   /@vue/shared@3.3.7:
     resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
@@ -5173,6 +5191,9 @@ packages:
   /@vue/shared@3.4.14:
     resolution: {integrity: sha512-nmi3BtLpvqXAWoRZ6HQ+pFJOHBU4UnH3vD3opgmwXac7vhaHKA9nj1VeGjMggdB9eLtW83eHyPCmOU1qzdsC7Q==}
 
+  /@vue/shared@3.4.15:
+    resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
+
   /@vue/shared@3.4.8:
     resolution: {integrity: sha512-ChLCWzXiJboQ009oVkemhEoUdrxHme7v3ip+Kh+/kDDeF1WtHWGt0knRLGm1Y4YqCRTSs9QxsZIY8paJj5Szrw==}
     dev: true
@@ -5195,18 +5216,18 @@ packages:
       '@vue/compiler-core': 3.4.14
     dev: false
 
-  /@vueuse/core@10.7.2(vue@3.4.14):
+  /@vueuse/core@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.2
-      '@vueuse/shared': 10.7.2(vue@3.4.14)
-      vue-demi: 0.14.6(vue@3.4.14)
+      '@vueuse/shared': 10.7.2(vue@3.4.15)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/integrations@10.7.2(focus-trap@7.5.4)(vue@3.4.14):
+  /@vueuse/integrations@10.7.2(focus-trap@7.5.4)(vue@3.4.15):
     resolution: {integrity: sha512-+u3RLPFedjASs5EKPc69Ge49WNgqeMfSxFn+qrQTzblPXZg6+EFzhjarS5edj2qAf6xQ93f95TUxRwKStXj/sQ==}
     peerDependencies:
       async-validator: '*'
@@ -5247,10 +5268,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.7.2(vue@3.4.14)
-      '@vueuse/shared': 10.7.2(vue@3.4.14)
+      '@vueuse/core': 10.7.2(vue@3.4.15)
+      '@vueuse/shared': 10.7.2(vue@3.4.15)
       focus-trap: 7.5.4
-      vue-demi: 0.14.6(vue@3.4.14)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5259,10 +5280,10 @@ packages:
   /@vueuse/metadata@10.7.2:
     resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==}
 
-  /@vueuse/shared@10.7.2(vue@3.4.14):
+  /@vueuse/shared@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.14)
+      vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7334,14 +7355,14 @@ packages:
       embla-carousel: 8.0.0-rc19
     dev: false
 
-  /embla-carousel-vue@8.0.0-rc19(vue@3.4.14):
+  /embla-carousel-vue@8.0.0-rc19(vue@3.4.15):
     resolution: {integrity: sha512-dqkmatB7/WNXHEwFGtQNpYT8TWnE6KRcVBfnPTswBba8I33RdBRuj0CqRHem02dlIS1ySgS9sBVVdDXe+6IGKQ==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
       embla-carousel: 8.0.0-rc19
       embla-carousel-reactive-utils: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /embla-carousel@8.0.0-rc19:
@@ -9907,12 +9928,12 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /lucide-vue-next@0.276.0(vue@3.4.14):
+  /lucide-vue-next@0.276.0(vue@3.4.15):
     resolution: {integrity: sha512-yQmIaTbVjG2TMwFQr98Biva99I+eDcMh0wPepJsDajk2d2lio9VGBsKhIUtAUPYwqnsvVg2+dSYsyvX21BJ5yw==}
     peerDependencies:
       vue: '>=3.0.1'
     dependencies:
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /lz-string@1.5.0:
@@ -10839,11 +10860,11 @@ packages:
       '@nuxt/schema': 3.8.2(rollup@3.29.4)
       '@nuxt/telemetry': 2.5.3(rollup@3.29.4)
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.14)
+      '@nuxt/vite-builder': 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15)
       '@types/node': 20.10.1
       '@unhead/dom': 1.8.8
       '@unhead/ssr': 1.8.8
-      '@unhead/vue': 1.8.8(vue@3.4.14)
+      '@unhead/vue': 1.8.8(vue@3.4.15)
       '@vue/shared': 3.3.9
       acorn: 8.11.2
       c12: 1.5.1
@@ -10883,12 +10904,12 @@ packages:
       unenv: 1.8.0
       unimport: 3.6.0(rollup@3.29.4)
       unplugin: 1.5.1
-      unplugin-vue-router: 0.7.0(rollup@3.29.4)(vue-router@4.2.5)(vue@3.4.14)
+      unplugin-vue-router: 0.7.0(rollup@3.29.4)(vue-router@4.2.5)(vue@3.4.15)
       untyped: 1.4.0
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
-      vue-router: 4.2.5(vue@3.4.14)
+      vue-router: 4.2.5(vue@3.4.15)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -11947,22 +11968,22 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.3.0(vue@3.4.14):
+  /radix-vue@1.3.0(vue@3.4.15):
     resolution: {integrity: sha512-czCi649V1Xv/j3Sv8DZY1eSE+QY7acS7zfycBqbsj5vAuAj2DFDaN5nCnyIQW7/bz45KOaCWMTZcFJ0yzxtgFg==}
     dependencies:
       '@floating-ui/dom': 1.5.3
-      '@floating-ui/vue': 1.0.2(vue@3.4.14)
+      '@floating-ui/vue': 1.0.2(vue@3.4.15)
       fast-deep-equal: 3.1.3
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /radix-vue@1.3.2(vue@3.4.14):
+  /radix-vue@1.3.2(vue@3.4.15):
     resolution: {integrity: sha512-XhY1Cs6AvRgb1DvTisrY4XfX4aLWj9S1u/u/NCqOjfEHYaJsZ61Fbo66xB5EC22TV258Eu4njYI2CBpwV0dVxg==}
     dependencies:
       '@floating-ui/dom': 1.5.3
-      '@floating-ui/vue': 1.0.2(vue@3.4.14)
+      '@floating-ui/vue': 1.0.2(vue@3.4.15)
       fast-deep-equal: 3.1.3
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -12502,24 +12523,30 @@ packages:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
-  /shikiji-core@0.10.0-beta.2:
-    resolution: {integrity: sha512-ZGBEcf67jikAlCsjnzFmVS9Cy5/6cVA4yU2DSRinTN22q8+Vqaf4Gk4eL6hEbXWzkP60NnikF0Z6F3ANMpVS1A==}
+  /shikiji-core@0.10.0-beta.9:
+    resolution: {integrity: sha512-7dgwTyN9PeKyc4KJeyKo/qW8gi8XbR//c1CO+0B5GaeozWexNTpEL/tSohyIKkj0Z+7spfm2REmAaS39NlC4Lw==}
     dev: true
 
   /shikiji-core@0.9.19:
     resolution: {integrity: sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw==}
     dev: true
 
+  /shikiji-transformers@0.10.0-beta.9:
+    resolution: {integrity: sha512-giqkVspbFtl7wwX1k/wcz+MKEHFlfEAxAkk+d7hU3XfPeLf38TTbTH0zEzr2cPfCZNnL6AN1uRkMnbDchjhKMw==}
+    dependencies:
+      shikiji: 0.10.0-beta.9
+    dev: true
+
   /shikiji-transformers@0.9.19:
     resolution: {integrity: sha512-lGLI7Z8frQrIBbhZ74/eiJtxMoCQRbpaHEB+gcfvdIy+ZFaAtXncJGnc52932/UET+Y4GyKtwwC/vjWUCp+c/Q==}
     dependencies:
       shikiji: 0.9.19
     dev: true
 
-  /shikiji@0.10.0-beta.2:
-    resolution: {integrity: sha512-tqZIMPoRhBHxNFUKf37jjR4EyffJfNOCmck2sgSke7wPreiNZhfoXWmet/qtsFVmyEHV+uaQkxCUwD+ngeXaBA==}
+  /shikiji@0.10.0-beta.9:
+    resolution: {integrity: sha512-I+sv642n9M7/FK/dVcXp9vMv7v5Wa8gU2UuKwkIWKQFvyo+qKB8eV1zNNtRYas+jC7BLwdAaflc5BFUozAonFQ==}
     dependencies:
-      shikiji-core: 0.10.0-beta.2
+      shikiji-core: 0.10.0-beta.9
     dev: true
 
   /shikiji@0.9.19:
@@ -13748,7 +13775,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-router@0.7.0(rollup@3.29.4)(vue-router@4.2.5)(vue@3.4.14):
+  /unplugin-vue-router@0.7.0(rollup@3.29.4)(vue-router@4.2.5)(vue@3.4.15):
     resolution: {integrity: sha512-ddRreGq0t5vlSB7OMy4e4cfU1w2AwBQCwmvW3oP/0IHQiokzbx4hd3TpwBu3eIAFVuhX2cwNQwp1U32UybTVCw==}
     peerDependencies:
       vue-router: ^4.1.0
@@ -13758,7 +13785,7 @@ packages:
     dependencies:
       '@babel/types': 7.23.6
       '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      '@vue-macros/common': 1.9.0(rollup@3.29.4)(vue@3.4.14)
+      '@vue-macros/common': 1.9.0(rollup@3.29.4)(vue@3.4.15)
       ast-walker-scope: 0.5.0(rollup@3.29.4)
       chokidar: 3.5.3
       fast-glob: 3.3.2
@@ -13768,7 +13795,7 @@ packages:
       pathe: 1.1.2
       scule: 1.1.0
       unplugin: 1.5.1
-      vue-router: 4.2.5(vue@3.4.14)
+      vue-router: 4.2.5(vue@3.4.15)
       yaml: 2.3.2
     transitivePeerDependencies:
       - rollup
@@ -13959,7 +13986,7 @@ packages:
       which-typed-array: 1.1.11
     dev: false
 
-  /v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.14):
+  /v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.15):
     resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
     peerDependencies:
       '@popperjs/core': ^2.0.0
@@ -13971,8 +13998,8 @@ packages:
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
-      vue: 3.4.14(typescript@5.3.3)
-      vue-screen-utils: 1.0.0-beta.13(vue@3.4.14)
+      vue: 3.4.15(typescript@5.3.3)
+      vue-screen-utils: 1.0.0-beta.13(vue@3.4.15)
     dev: false
 
   /v8-compile-cache-lib@3.0.1:
@@ -13997,14 +14024,14 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vee-validate@4.12.4(vue@3.4.14):
+  /vee-validate@4.12.4(vue@3.4.15):
     resolution: {integrity: sha512-rqSjMdl0l/RiGKywKhkXttUKwDlQOoxTxe31uMQiMlwK4Hbtlvr3OcQvpREp/qPTARxNKudKWCUVW/mfzuxUVQ==}
     peerDependencies:
       vue: ^3.3.11
     dependencies:
       '@vue/devtools-api': 6.5.1
       type-fest: 4.8.3
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /vite-node@0.33.0(@types/node@20.10.1):
@@ -14039,7 +14066,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.0.11(@types/node@20.8.8)
+      vite: 5.0.12(@types/node@20.8.8)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14200,8 +14227,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.11(@types/node@20.8.10):
-    resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
+  /vite@5.0.12(@types/node@20.8.10):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -14236,8 +14263,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.11(@types/node@20.8.8):
-    resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
+  /vite@5.0.12(@types/node@20.8.8):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -14272,8 +14299,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.37(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-Z2X+M0id+bUdxcWxvFRUzfLyV2GtPWRcejLSMGOHRiwA1DV/dNmELKJ3U9D1HBYQK0FBzunpuQD0a2jZ7FZvJA==}
+  /vitepress@1.0.0-rc.39(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -14287,10 +14314,10 @@ packages:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
       '@types/markdown-it': 13.0.7
-      '@vitejs/plugin-vue': 5.0.3(vite@5.0.11)(vue@3.4.14)
+      '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
       '@vue/devtools-api': 6.5.1
-      '@vueuse/core': 10.7.2(vue@3.4.14)
-      '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.14)
+      '@vueuse/core': 10.7.2(vue@3.4.15)
+      '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.15)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
@@ -14298,8 +14325,8 @@ packages:
       shikiji: 0.9.19
       shikiji-core: 0.9.19
       shikiji-transformers: 0.9.19
-      vite: 5.0.11(@types/node@20.8.10)
-      vue: 3.4.14(typescript@5.3.3)
+      vite: 5.0.12(@types/node@20.8.10)
+      vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -14446,7 +14473,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.1
       tinypool: 0.7.0
-      vite: 5.0.11(@types/node@20.8.8)
+      vite: 5.0.12(@types/node@20.8.8)
       vite-node: 0.34.6(@types/node@20.8.8)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
@@ -14513,7 +14540,7 @@ packages:
       ufo: 1.3.2
     dev: true
 
-  /vue-demi@0.14.6(vue@3.4.14):
+  /vue-demi@0.14.6(vue@3.4.15):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -14525,7 +14552,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -14567,21 +14594,21 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router@4.2.5(vue@3.4.14):
+  /vue-router@4.2.5(vue@3.4.15):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: true
 
-  /vue-screen-utils@1.0.0-beta.13(vue@3.4.14):
+  /vue-screen-utils@1.0.0-beta.13(vue@3.4.15):
     resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
   /vue-template-compiler@2.7.14:
@@ -14603,43 +14630,43 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /vue-wrap-balancer@1.1.3(vue@3.4.14):
+  /vue-wrap-balancer@1.1.3(vue@3.4.15):
     resolution: {integrity: sha512-9kTRwYIveWxV1FdaCJfRjIIRZOtwgnxypGS5mlAiXnih5+Cfaby9YDh3APMW1jWp0oCvL+gep0XCbcjBb7/ZXQ==}
     peerDependencies:
       vue: ^3.3.0
     dependencies:
       nanoid: 3.3.6
-      vue: 3.4.14(typescript@5.3.3)
+      vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /vue@3.4.14(typescript@5.2.2):
-    resolution: {integrity: sha512-Rop5Al/ZcBbBz+KjPZaZDgHDX0kUP4duEzDbm+1o91uxYUNmJrZSBuegsNIJvUGy+epLevNRNhLjm08VKTgGyw==}
+  /vue@3.4.15(typescript@5.2.2):
+    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.14
-      '@vue/compiler-sfc': 3.4.14
-      '@vue/runtime-dom': 3.4.14
-      '@vue/server-renderer': 3.4.14(vue@3.4.14)
-      '@vue/shared': 3.4.14
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/runtime-dom': 3.4.15
+      '@vue/server-renderer': 3.4.15(vue@3.4.15)
+      '@vue/shared': 3.4.15
       typescript: 5.2.2
 
-  /vue@3.4.14(typescript@5.3.3):
-    resolution: {integrity: sha512-Rop5Al/ZcBbBz+KjPZaZDgHDX0kUP4duEzDbm+1o91uxYUNmJrZSBuegsNIJvUGy+epLevNRNhLjm08VKTgGyw==}
+  /vue@3.4.15(typescript@5.3.3):
+    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.14
-      '@vue/compiler-sfc': 3.4.14
-      '@vue/runtime-dom': 3.4.14
-      '@vue/server-renderer': 3.4.14(vue@3.4.14)
-      '@vue/shared': 3.4.14
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/runtime-dom': 3.4.15
+      '@vue/server-renderer': 3.4.15(vue@3.4.15)
+      '@vue/shared': 3.4.15
       typescript: 5.3.3
 
   /walk-up-path@3.0.1:

From eba85c6b5c1cff5862adc07a25b3b60d98bd255a Mon Sep 17 00:00:00 2001
From: Robert Shaw <xiaoluoboding@gmail.com>
Date: Mon, 22 Jan 2024 23:45:30 +0800
Subject: [PATCH 06/29] feat(sonner): add `sonner` component (#301)

---
 apps/www/.vitepress/theme/config/docs.ts      |  6 ++
 .../.vitepress/theme/layout/DocsLayout.vue    |  5 ++
 .../.vitepress/theme/layout/MainLayout.vue    |  2 +
 apps/www/__registry__/index.ts                | 14 +++++
 apps/www/package.json                         |  1 +
 .../www/src/content/docs/components/sonner.md | 63 +++++++++++++++++++
 .../registry/default/example/SonnerDemo.vue   | 20 ++++++
 .../lib/registry/default/ui/sonner/Sonner.vue | 21 +++++++
 .../lib/registry/default/ui/sonner/index.ts   |  1 +
 .../registry/new-york/example/SonnerDemo.vue  | 20 ++++++
 .../registry/new-york/ui/sonner/Sonner.vue    | 21 +++++++
 .../lib/registry/new-york/ui/sonner/index.ts  |  1 +
 apps/www/src/public/registry/index.json       | 10 +++
 .../registry/styles/default/sonner.json       | 16 +++++
 .../registry/styles/new-york/sonner.json      | 16 +++++
 pnpm-lock.yaml                                |  7 +++
 16 files changed, 224 insertions(+)
 create mode 100644 apps/www/src/content/docs/components/sonner.md
 create mode 100644 apps/www/src/lib/registry/default/example/SonnerDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/sonner/Sonner.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/sonner/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/sonner/index.ts
 create mode 100644 apps/www/src/public/registry/styles/default/sonner.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/sonner.json

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index f22bf81c..646cc85a 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -299,6 +299,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/slider',
           items: [],
         },
+        {
+          title: 'Sonner',
+          href: '/docs/components/sonner',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Switch',
           href: '/docs/components/switch',
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index c8cd7649..388301e0 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -6,6 +6,7 @@ import EditLink from '../components/EditLink.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { Badge } from '@/lib/registry/default/ui/badge'
 import RadixIconsCode from '~icons/radix-icons/code'
+import RadixIconsExternalLink from '~icons/radix-icons/external-link'
 import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
@@ -81,6 +82,10 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
           </div>
 
           <div class="flex items-center space-x-2 pt-4">
+            <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="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 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+              <RadixIconsExternalLink class="mr-1" />
+              Docs
+            </a>
             <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="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 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
               <RadixIconsCode class="mr-1" />
               Component Source
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 41c0199c..3caf425d 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -17,6 +17,7 @@ import RadixIconsSun from '~icons/radix-icons/sun'
 import { useConfigStore } from '@/stores/config'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
+import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 
 import File from '~icons/radix-icons/file'
@@ -287,6 +288,7 @@ watch(() => $route.path, (n) => {
       </DialogContent>
     </Dialog>
     <DefaultToaster />
+    <NewYorkSonner :theme="isDark ? 'dark' : 'light'" />
     <NewYorkToaster />
   </div>
 </template>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 2c7ae3aa..fa91bc27 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -576,6 +576,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/SliderDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/SliderDemo.vue'],
     },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SonnerDemo.vue'],
+    },
     SwitchDemo: {
       name: 'SwitchDemo',
       type: 'components:example',
@@ -1467,6 +1474,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/SliderDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/SliderDemo.vue'],
     },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SonnerDemo.vue'],
+    },
     SwitchDemo: {
       name: 'SwitchDemo',
       type: 'components:example',
diff --git a/apps/www/package.json b/apps/www/package.json
index cdc17e69..186171f7 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -37,6 +37,7 @@
     "v-calendar": "^3.1.2",
     "vee-validate": "4.12.4",
     "vue": "^3.4.15",
+    "vue-sonner": "^1.0.2",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
new file mode 100644
index 00000000..0aa8298e
--- /dev/null
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -0,0 +1,63 @@
+---
+title: Sonner
+description: An opinionated toast component for Vue.
+docs: https://vue-sonner.vercel.app
+source: apps/www/src/lib/registry/default/ui/sonner 
+---
+
+<ComponentPreview name="SonnerDemo" />
+
+## About
+
+The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
+
+## Installation
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add sonner
+```
+
+### Add the Toaster component
+
+Add the following `Toaster` component to your `App.vue` file:
+
+```vue title="App.vue" {2,6}
+<script setup lang="ts">
+import { Toaster } from '@/components/ui/sonner'
+</script>
+
+<template>
+  <Toaster />
+</template>
+```
+  
+</Steps>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>
+```
diff --git a/apps/www/src/lib/registry/default/example/SonnerDemo.vue b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
new file mode 100644
index 00000000..da34f15c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/sonner/Sonner.vue b/apps/www/src/lib/registry/default/ui/sonner/Sonner.vue
new file mode 100644
index 00000000..98201a1e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/sonner/Sonner.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    :class-names="{
+      toast:
+        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton:
+        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton:
+        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    }"
+    v-bind="props"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/sonner/index.ts b/apps/www/src/lib/registry/default/ui/sonner/index.ts
new file mode 100644
index 00000000..0d4a6423
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
new file mode 100644
index 00000000..c46d9482
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue b/apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue
new file mode 100644
index 00000000..98201a1e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    :class-names="{
+      toast:
+        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton:
+        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton:
+        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    }"
+    v-bind="props"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sonner/index.ts b/apps/www/src/lib/registry/new-york/ui/sonner/index.ts
new file mode 100644
index 00000000..0d4a6423
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index ee1339ec..2cae0d54 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -517,6 +517,16 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "sonner",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "ui/sonner/Sonner.vue",
+      "ui/sonner/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "switch",
     "dependencies": [],
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
new file mode 100644
index 00000000..33827c77
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/sonner.json
@@ -0,0 +1,16 @@
+{
+  "name": "sonner",
+  "dependencies": [],
+  "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    :class-names=\"{\n      toast:\n        '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    v-bind=\"props\"\n  />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Toaster } from './Sonner.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
new file mode 100644
index 00000000..33827c77
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/sonner.json
@@ -0,0 +1,16 @@
+{
+  "name": "sonner",
+  "dependencies": [],
+  "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    :class-names=\"{\n      toast:\n        '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    v-bind=\"props\"\n  />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Toaster } from './Sonner.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68572cc4..e227bc8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       vue:
         specifier: ^3.4.15
         version: 3.4.15(typescript@5.3.3)
+      vue-sonner:
+        specifier: ^1.0.2
+        version: 1.0.2
       vue-wrap-balancer:
         specifier: ^1.1.3
         version: 1.1.3(vue@3.4.15)
@@ -14611,6 +14614,10 @@ packages:
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
+  /vue-sonner@1.0.2:
+    resolution: {integrity: sha512-BXIyb9lGSMUjTpOukISp7oV9nrczgbfYz+TnDeoap3io3ayGXiWv+/3eQ9UKnmofwUlC4nh/H5jzBOO89lRItQ==}
+    dev: false
+
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:

From c94443eabedbbf8e9bdd4c970cf46e8da54015d3 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 22 Jan 2024 20:06:03 +0330
Subject: [PATCH 07/29] chore: fix `vue-sonner` Unknown file extension ".css"
 (#302)

---
 apps/www/.vitepress/config.mts                              | 3 +++
 apps/www/src/public/registry/styles/default/calendar.json   | 2 +-
 apps/www/src/public/registry/styles/default/separator.json  | 2 +-
 apps/www/src/public/registry/styles/new-york/calendar.json  | 2 +-
 apps/www/src/public/registry/styles/new-york/separator.json | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index c4958ec1..48579d2b 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -86,5 +86,8 @@ export default defineConfig({
         '@': path.resolve(__dirname, '../src'),
       },
     },
+    ssr: {
+      noExternal: ['vue-sonner'],
+    },
   },
 })
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index bae081a3..a538ad69 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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",
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
index b4a8cae3..0b0b92a2 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-secondary', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-border', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index 3adbb0b1..07a8dec2 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-8 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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-8 w-8 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-8 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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-8 w-8 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",
diff --git a/apps/www/src/public/registry/styles/new-york/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
index b4a8cae3..0b0b92a2 100644
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ b/apps/www/src/public/registry/styles/new-york/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-secondary', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-border', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",

From 42f0086586cc8eca613287ef2a9fd3d0ca85b059 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 22 Jan 2024 20:30:08 +0330
Subject: [PATCH 08/29] chore: add `vue-sonner` to dependencies in registry
 files

---
 apps/www/src/lib/registry/registry.ts                    | 1 +
 apps/www/src/public/registry/index.json                  | 4 +++-
 apps/www/src/public/registry/styles/default/sonner.json  | 4 +++-
 apps/www/src/public/registry/styles/new-york/sonner.json | 4 +++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index fad35f7d..6f35d036 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -6,6 +6,7 @@ import type { Registry } from '../../lib/registry'
 
 const DEPENDENCIES = new Map<string, string[]>([
   ['@vueuse/core', []],
+  ['vue-sonner', []],
   ['v-calendar', []],
   ['@tanstack/vue-table', []],
   ['embla-carousel-vue', ['embla-carousel']],
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 2cae0d54..efe8fe5b 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -519,7 +519,9 @@
   },
   {
     "name": "sonner",
-    "dependencies": [],
+    "dependencies": [
+      "vue-sonner"
+    ],
     "registryDependencies": [],
     "files": [
       "ui/sonner/Sonner.vue",
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
index 33827c77..3a7620a0 100644
--- a/apps/www/src/public/registry/styles/default/sonner.json
+++ b/apps/www/src/public/registry/styles/default/sonner.json
@@ -1,6 +1,8 @@
 {
   "name": "sonner",
-  "dependencies": [],
+  "dependencies": [
+    "vue-sonner"
+  ],
   "registryDependencies": [],
   "files": [
     {
diff --git a/apps/www/src/public/registry/styles/new-york/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
index 33827c77..3a7620a0 100644
--- a/apps/www/src/public/registry/styles/new-york/sonner.json
+++ b/apps/www/src/public/registry/styles/new-york/sonner.json
@@ -1,6 +1,8 @@
 {
   "name": "sonner",
-  "dependencies": [],
+  "dependencies": [
+    "vue-sonner"
+  ],
   "registryDependencies": [],
   "files": [
     {

From 8bd5525368beebd0586c14094748b9e03c4a19ed Mon Sep 17 00:00:00 2001
From: Pier107 <34713013+PiervitoCreanza@users.noreply.github.com>
Date: Sun, 28 Jan 2024 10:41:54 +0100
Subject: [PATCH 09/29] fix: `ScrollAreaThumb` width in horizontal orientation
 (#309)

---
 apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue  | 2 +-
 apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index 9ba2cb09..6171a593 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
-           && 'h-2.5 border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
          $attrs.class ?? '')"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index 9ba2cb09..6171a593 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
-           && 'h-2.5 border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
          $attrs.class ?? '')"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />

From 1758a91d721e4d175b4db6721b4b1ea868b80a45 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Wed, 31 Jan 2024 20:38:32 +0330
Subject: [PATCH 10/29] chore: simplify GitHub issues report (#312)

* Update bug-report.yml

* Update bug-report.yml

* Update bug-report.yml
---
 .github/ISSUE_TEMPLATE/bug-report.yml | 79 ++++++++-------------------
 1 file changed, 24 insertions(+), 55 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 3aa7b323..d24f3294 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -6,62 +6,27 @@ body:
   - type: markdown
     attributes:
       value: |
-        **Before You Start...**
-
+        Thanks for taking the time to fill out this bug report!
         This form is only for submitting bug reports. If you have a usage question
         or are unsure if this is really a bug, make sure to:
 
         - Read the [docs](https://radix-vue.com/)
         - Ask on [Discord Chat](https://chat.radix-vue.com/)
         - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
-
-        Also try to search for your issue - it may have already been answered or even fixed.
-        However, if you find that an old, closed issue still persists in the latest version,
-        you should open a new issue using the form below instead of commenting on the old issue.
-  - type: textarea
-    id: bug-env
-    attributes:
-      label: Environment
-      description: Please provide the following information about your environment.
-      value: |
-        Developement/Production OS: Windows 10 19043.1110
-        Node version: 16.0.0
-        Package manager: pnpm@8.6.0
-        Radix Vue version: 1.0.0
-        Shadcn Vue version: 1.0.0
-        Vue version: 3.0.0
-        Nuxt version: 3.0.0
-        Nuxt mode: universal
-        Nuxt target: server
-        CSS framework: tailwindcss@3.3.3
-        Client OS: Windows 10 19043.1110
-        Browser: Chrome 90.0.4430.212
-      render: bash
-    validations:
-      required: true
   - type: input
-    id: reproduction-link
+    id: reproduction
     attributes:
-      label: Link to minimal reproduction
+      label: Reproduction
       description: |
-        Please provide a link to a minimal reproduction of the bug.
-        A minimal reproduction is a CodeSandbox, CodePen, or a StackBlitz that contains the bare minimum amount of code needed to show the bug.
-        A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem
+        A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required)
+        
+        To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos:
+        https://www.shadcn-vue.com/docs/components/accordion.html
 
-        This is **required** for us to be able to triage your issue in a timely manner.
-
-        Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided.
-      placeholder: Reproduction Link
-    validations:
-      required: true
-  - type: textarea
-    id: steps-to-reproduce
-    attributes:
-      label: Steps to reproduce
-      description: |
-        How do you trigger this bug? Please walk us through it step by step.
-        Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code.
-      placeholder: Steps to reproduce
+        or use template presets
+        https://vite.new
+        https://nuxt.new
+      placeholder: Reproduction
     validations:
       required: true
   - type: textarea
@@ -73,14 +38,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: expected-behavior
+    id: system-info
     attributes:
-      label: Expected behavior
-      description: A clear and concise description of what you expected to happen.
-  - type: textarea
-    id: screenshots
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages vue,@vueuse/core,radix-vue,nuxt,shadcn-vue,shadcn-nuxt,unplugin-auto-import --binaries --browsers`
+      render: bash
+      placeholder: System, Binaries, Browsers
+    validations:
+      required: true
+  - type: checkboxes
+    id: contributes
     attributes:
-      label: Conext & Screenshots (if applicable)
-      description: |
-        If applicable, provide any additional context or screenshots of the bug.
-        You can drag and drop images here to add them to the issue.
+      label: Contributes
+      options:
+        - label: I am willing to submit a PR to fix this issue
+        - label: I am willing to submit a PR with failing tests 

From 887526157606d8f20cf9c69e01f1fe926b5fcc48 Mon Sep 17 00:00:00 2001
From: Jackson Bowe <jacksonbowe98@gmail.com>
Date: Thu, 1 Feb 2024 03:16:01 +1000
Subject: [PATCH 11/29] fix: weekdays spacing (#300)

---
 .../registry/default/ui/calendar/Calendar.vue    | 14 ++++++++++----
 .../registry/new-york/ui/calendar/Calendar.vue   | 16 +++++++++++-----
 .../public/registry/styles/default/calendar.json |  2 +-
 .../registry/styles/new-york/calendar.json       |  2 +-
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index f3c11d83..c4dfa33b 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -125,16 +125,22 @@ const vCalendarSlots = computed(() => {
   @apply flex;
 }
 .calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];
+  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
+}
+.calendar .vc-weekday-1 {
+	@apply pr-3;
+}
+.calendar .vc-weekday-7 {
+	@apply pl-3;
 }
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
 }
 .calendar .vc-day:has(.vc-highlights) {
-  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
+  @apply first:rounded-l-md last:rounded-r-md;
 }
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
-  @apply bg-secondary rounded-md;
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
 }
 .calendar .vc-day:has(.vc-highlight-base-start) {
   @apply rounded-l-md;
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index f5241ea2..33cc911b 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -124,16 +124,22 @@ const vCalendarSlots = computed(() => {
   @apply flex;
 }
 .calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];
-}
+    @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
+  }
+  .calendar .vc-weekday-1 {
+    @apply pr-3;
+  }
+  .calendar .vc-weekday-7 {
+    @apply pl-3;
+  }
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
 }
 .calendar .vc-day:has(.vc-highlights) {
-  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
+  @apply first:rounded-l-md last:rounded-r-md;
 }
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
-  @apply bg-secondary rounded-md;
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
 }
 .calendar .vc-day:has(.vc-highlight-base-start) {
   @apply rounded-l-md;
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index a538ad69..72fc5187 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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",
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index 07a8dec2..d17ed279 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-8 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 bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {\n  @apply bg-secondary 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-8 w-8 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n    @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n  }\n  .calendar .vc-weekday-1 {\n    @apply pr-3;\n  }\n  .calendar .vc-weekday-7 {\n    @apply pl-3;\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-8 w-8 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",

From a829212d4283d9312d6948bd979366706cf2b72d Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Fri, 2 Feb 2024 19:08:06 +0330
Subject: [PATCH 12/29] refactor: use `class` as prop to prevent class
 duplication with `cn` function (#241)

---
 apps/www/.vitepress/config.mts                |   8 +-
 .../.vitepress/theme/layout/DocsLayout.vue    |   4 +-
 .../.vitepress/theme/layout/MainLayout.vue    |   4 +-
 apps/www/.vitepress/theme/styles/shiki.css    |   7 +
 apps/www/package.json                         |  36 +-
 .../src/content/docs/components/data-table.md |  60 ++-
 .../docs/components/navigation-menu.md        |   2 +-
 .../dashboard/components/DateRangePicker.vue  |   2 +-
 .../examples/forms/components/AccountForm.vue |   4 +-
 .../registry/default/example/CardFormDemo.vue |   9 +-
 .../default/example/Cards/DataTable.vue       |   6 +-
 .../registry/default/example/ComboboxDemo.vue |   6 +-
 .../default/example/DatePickerWithRange.vue   |   2 +-
 .../default/example/RangePickerWithSlot.vue   |   2 +-
 .../default/ui/accordion/Accordion.vue        |   6 +-
 .../default/ui/accordion/AccordionContent.vue |  20 +-
 .../default/ui/accordion/AccordionItem.vue    |  17 +-
 .../default/ui/accordion/AccordionTrigger.vue |  21 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  11 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  11 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  19 +-
 .../alert-dialog/AlertDialogDescription.vue   |  13 +-
 .../ui/alert-dialog/AlertDialogFooter.vue     |  12 +-
 .../ui/alert-dialog/AlertDialogHeader.vue     |  12 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  13 +-
 .../lib/registry/default/ui/alert/Alert.vue   |  15 +-
 .../default/ui/alert/AlertDescription.vue     |   7 +-
 .../registry/default/ui/alert/AlertTitle.vue  |   7 +-
 .../lib/registry/default/ui/alert/index.ts    |   4 +-
 .../lib/registry/default/ui/avatar/Avatar.vue |  15 +-
 .../lib/registry/default/ui/avatar/index.ts   |   4 +-
 .../lib/registry/default/ui/badge/Badge.vue   |  16 +-
 .../lib/registry/default/ui/badge/index.ts    |   4 +-
 .../lib/registry/default/ui/button/Button.vue |  17 +-
 .../lib/registry/default/ui/button/index.ts   |   6 +-
 .../registry/default/ui/calendar/Calendar.vue |  14 +-
 .../src/lib/registry/default/ui/card/Card.vue |  10 +-
 .../registry/default/ui/card/CardContent.vue  |  10 +-
 .../default/ui/card/CardDescription.vue       |  10 +-
 .../registry/default/ui/card/CardFooter.vue   |  12 +-
 .../registry/default/ui/card/CardHeader.vue   |  12 +-
 .../registry/default/ui/card/CardTitle.vue    |  12 +-
 .../registry/default/ui/carousel/Carousel.vue |   1 -
 .../default/ui/carousel/CarouselContent.vue   |   2 +-
 .../default/ui/carousel/CarouselItem.vue      |   2 +-
 .../registry/default/ui/checkbox/Checkbox.vue |  17 +-
 .../default/ui/collapsible/Collapsible.vue    |   6 +-
 .../registry/default/ui/command/Command.vue   |  19 +-
 .../default/ui/command/CommandDialog.vue      |   8 +-
 .../default/ui/command/CommandEmpty.vue       |  11 +-
 .../default/ui/command/CommandGroup.vue       |  12 +-
 .../default/ui/command/CommandInput.vue       |  27 +-
 .../default/ui/command/CommandItem.vue        |  17 +-
 .../default/ui/command/CommandList.vue        |  13 +-
 .../default/ui/command/CommandSeparator.vue   |  13 +-
 .../default/ui/command/CommandShortcut.vue    |   7 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |  31 +-
 .../ui/context-menu/ContextMenuContent.vue    |  22 +-
 .../ui/context-menu/ContextMenuItem.vue       |  27 +-
 .../ui/context-menu/ContextMenuLabel.vue      |  13 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  21 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |  11 +-
 .../ui/context-menu/ContextMenuShortcut.vue   |   7 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  11 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  26 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |   6 +-
 .../lib/registry/default/ui/dialog/Dialog.vue |  28 +-
 .../default/ui/dialog/DialogContent.vue       |  24 +-
 .../default/ui/dialog/DialogDescription.vue   |  17 +-
 .../default/ui/dialog/DialogFooter.vue        |   9 +-
 .../default/ui/dialog/DialogHeader.vue        |  11 +-
 .../default/ui/dialog/DialogTitle.vue         |  17 +-
 .../DropdownMenuCheckboxItem.vue              |  15 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  18 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  27 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  22 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   9 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  18 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  14 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   7 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  13 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  24 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |   6 +-
 .../default/ui/form/FormDescription.vue       |  12 +-
 .../lib/registry/default/ui/form/FormItem.vue |  14 +-
 .../registry/default/ui/form/FormLabel.vue    |  15 +-
 .../default/ui/hover-card/HoverCard.vue       |   5 +-
 .../ui/hover-card/HoverCardContent.vue        |  15 +-
 .../lib/registry/default/ui/input/Input.vue   |   2 +-
 .../lib/registry/default/ui/label/Label.vue   |  13 +-
 .../registry/default/ui/menubar/Menubar.vue   |  18 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |  37 +-
 .../default/ui/menubar/MenubarContent.vue     |  19 +-
 .../default/ui/menubar/MenubarItem.vue        |  27 +-
 .../default/ui/menubar/MenubarLabel.vue       |   3 +-
 .../default/ui/menubar/MenubarRadioGroup.vue  |   8 +-
 .../default/ui/menubar/MenubarRadioItem.vue   |  37 +-
 .../default/ui/menubar/MenubarSeparator.vue   |  15 +-
 .../default/ui/menubar/MenubarShortcut.vue    |   7 +-
 .../default/ui/menubar/MenubarSubContent.vue  |  25 +-
 .../default/ui/menubar/MenubarSubTrigger.vue  |  27 +-
 .../default/ui/menubar/MenubarTrigger.vue     |  15 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  15 +-
 .../navigation-menu/NavigationMenuContent.vue |  25 +-
 .../NavigationMenuIndicator.vue               |  17 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |   6 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  17 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  16 +-
 .../NavigationMenuViewport.vue                |  16 +-
 .../ui/pagination/PaginationEllipsis.vue      |  18 +-
 .../default/ui/pagination/PaginationFirst.vue |  17 +-
 .../default/ui/pagination/PaginationLast.vue  |  17 +-
 .../default/ui/pagination/PaginationNext.vue  |  17 +-
 .../default/ui/pagination/PaginationPrev.vue  |  17 +-
 .../default/ui/popover/PopoverContent.vue     |  16 +-
 .../registry/default/ui/progress/Progress.vue |  19 +-
 .../default/ui/radio-group/RadioGroup.vue     |  16 +-
 .../default/ui/radio-group/RadioGroupItem.vue |  20 +-
 .../default/ui/scroll-area/ScrollArea.vue     |  21 +-
 .../default/ui/scroll-area/ScrollBar.vue      |  13 +-
 .../default/ui/select/SelectContent.vue       |  41 +-
 .../default/ui/select/SelectGroup.vue         |  11 +-
 .../registry/default/ui/select/SelectItem.vue |  16 +-
 .../default/ui/select/SelectLabel.vue         |   3 +-
 .../ui/select/SelectScrollDownButton.vue      |  24 ++
 .../ui/select/SelectScrollUpButton.vue        |  24 ++
 .../default/ui/select/SelectSeparator.vue     |  11 +-
 .../default/ui/select/SelectTrigger.vue       |  34 +-
 .../lib/registry/default/ui/select/index.ts   |   2 +
 .../default/ui/separator/Separator.vue        |  15 +-
 .../lib/registry/default/ui/sheet/Sheet.vue   |   9 +-
 .../default/ui/sheet/SheetContent.vue         |  46 +--
 .../default/ui/sheet/SheetDescription.vue     |  11 +-
 .../registry/default/ui/sheet/SheetFooter.vue |   5 +-
 .../registry/default/ui/sheet/SheetHeader.vue |   5 +-
 .../registry/default/ui/sheet/SheetTitle.vue  |  11 +-
 .../lib/registry/default/ui/sheet/index.ts    |  23 ++
 .../registry/default/ui/skeleton/Skeleton.vue |   5 +-
 .../lib/registry/default/ui/slider/Slider.vue |  17 +-
 .../lib/registry/default/ui/switch/Switch.vue |  28 +-
 .../lib/registry/default/ui/table/Table.vue   |   7 +-
 .../registry/default/ui/table/TableBody.vue   |   5 +-
 .../default/ui/table/TableCaption.vue         |   5 +-
 .../registry/default/ui/table/TableCell.vue   |   5 +-
 .../registry/default/ui/table/TableEmpty.vue  |  18 +-
 .../registry/default/ui/table/TableFooter.vue |   7 +-
 .../registry/default/ui/table/TableHead.vue   |   5 +-
 .../registry/default/ui/table/TableHeader.vue |   5 +-
 .../registry/default/ui/table/TableRow.vue    |   5 +-
 .../registry/default/ui/tabs/TabsContent.vue  |  11 +-
 .../lib/registry/default/ui/tabs/TabsList.vue |  21 +-
 .../registry/default/ui/tabs/TabsTrigger.vue  |  25 +-
 .../registry/default/ui/textarea/Textarea.vue |   4 +-
 .../lib/registry/default/ui/toast/Toast.vue   |  32 +-
 .../registry/default/ui/toast/ToastAction.vue |  11 +-
 .../registry/default/ui/toast/ToastClose.vue  |  19 +-
 .../default/ui/toast/ToastDescription.vue     |  11 +-
 .../registry/default/ui/toast/ToastTitle.vue  |  11 +-
 .../default/ui/toast/ToastViewport.vue        |  11 +-
 .../lib/registry/default/ui/toast/index.ts    |  13 +-
 .../registry/default/ui/toast/use-toast.ts    |   2 +-
 .../default/ui/toggle-group/ToggleGroup.vue   |   2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |   2 +-
 .../lib/registry/default/ui/toggle/Toggle.vue |  46 +--
 .../lib/registry/default/ui/toggle/index.ts   |   4 +-
 .../default/ui/tooltip/TooltipContent.vue     |  18 +-
 .../new-york/example/CardFormDemo.vue         |   9 +-
 .../new-york/example/DatePickerWithRange.vue  |   2 +-
 .../new-york/example/RangePickerWithSlot.vue  |   2 +-
 .../new-york/ui/accordion/Accordion.vue       |   6 +-
 .../ui/accordion/AccordionContent.vue         |  20 +-
 .../new-york/ui/accordion/AccordionItem.vue   |  17 +-
 .../ui/accordion/AccordionTrigger.vue         |  21 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  11 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  11 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  20 +-
 .../alert-dialog/AlertDialogDescription.vue   |  13 +-
 .../ui/alert-dialog/AlertDialogFooter.vue     |  12 +-
 .../ui/alert-dialog/AlertDialogHeader.vue     |  12 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  13 +-
 .../lib/registry/new-york/ui/alert/Alert.vue  |  15 +-
 .../new-york/ui/alert/AlertDescription.vue    |   7 +-
 .../registry/new-york/ui/alert/AlertTitle.vue |   7 +-
 .../lib/registry/new-york/ui/alert/index.ts   |   4 +-
 .../registry/new-york/ui/avatar/Avatar.vue    |  15 +-
 .../new-york/ui/avatar/AvatarImage.vue        |   2 +-
 .../lib/registry/new-york/ui/avatar/index.ts  |   6 +-
 .../lib/registry/new-york/ui/badge/Badge.vue  |  16 +-
 .../lib/registry/new-york/ui/badge/index.ts   |   4 +-
 .../registry/new-york/ui/button/Button.vue    |  17 +-
 .../lib/registry/new-york/ui/button/index.ts  |  15 +-
 .../lib/registry/new-york/ui/card/Card.vue    |  12 +-
 .../registry/new-york/ui/card/CardContent.vue |  10 +-
 .../new-york/ui/card/CardDescription.vue      |  10 +-
 .../registry/new-york/ui/card/CardFooter.vue  |  10 +-
 .../registry/new-york/ui/card/CardHeader.vue  |  12 +-
 .../registry/new-york/ui/card/CardTitle.vue   |  10 +-
 .../new-york/ui/carousel/Carousel.vue         |   1 -
 .../new-york/ui/checkbox/Checkbox.vue         |  19 +-
 .../new-york/ui/collapsible/Collapsible.vue   |   6 +-
 .../registry/new-york/ui/command/Command.vue  |  18 +-
 .../new-york/ui/command/CommandDialog.vue     |   6 +-
 .../new-york/ui/command/CommandEmpty.vue      |  11 +-
 .../new-york/ui/command/CommandGroup.vue      |  12 +-
 .../new-york/ui/command/CommandInput.vue      |  27 +-
 .../new-york/ui/command/CommandItem.vue       |  17 +-
 .../new-york/ui/command/CommandList.vue       |  13 +-
 .../new-york/ui/command/CommandSeparator.vue  |  13 +-
 .../new-york/ui/command/CommandShortcut.vue   |   7 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |  29 +-
 .../ui/context-menu/ContextMenuContent.vue    |  22 +-
 .../ui/context-menu/ContextMenuItem.vue       |  27 +-
 .../ui/context-menu/ContextMenuLabel.vue      |  13 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  21 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |  11 +-
 .../ui/context-menu/ContextMenuShortcut.vue   |   7 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  13 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  26 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |   6 +-
 .../new-york/ui/dialog/DialogContent.vue      |  24 +-
 .../new-york/ui/dialog/DialogDescription.vue  |  17 +-
 .../new-york/ui/dialog/DialogFooter.vue       |   9 +-
 .../new-york/ui/dialog/DialogHeader.vue       |  11 +-
 .../new-york/ui/dialog/DialogTitle.vue        |  17 +-
 .../DropdownMenuCheckboxItem.vue              |  15 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  18 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  27 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  22 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   9 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  18 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  14 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   7 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  13 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  24 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |   6 +-
 .../new-york/ui/form/FormDescription.vue      |   7 +-
 .../registry/new-york/ui/form/FormItem.vue    |   8 +-
 .../registry/new-york/ui/form/FormLabel.vue   |   9 +-
 .../new-york/ui/hover-card/HoverCard.vue      |   5 +-
 .../ui/hover-card/HoverCardContent.vue        |  15 +-
 .../lib/registry/new-york/ui/input/Input.vue  |   2 +-
 .../lib/registry/new-york/ui/label/Label.vue  |  13 +-
 .../registry/new-york/ui/menubar/Menubar.vue  |  16 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |  37 +-
 .../new-york/ui/menubar/MenubarContent.vue    |  14 +-
 .../new-york/ui/menubar/MenubarItem.vue       |  27 +-
 .../new-york/ui/menubar/MenubarLabel.vue      |   3 +-
 .../new-york/ui/menubar/MenubarRadioGroup.vue |   8 +-
 .../new-york/ui/menubar/MenubarRadioItem.vue  |  37 +-
 .../new-york/ui/menubar/MenubarSeparator.vue  |  15 +-
 .../new-york/ui/menubar/MenubarShortcut.vue   |   7 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |  27 +-
 .../new-york/ui/menubar/MenubarSubTrigger.vue |  27 +-
 .../new-york/ui/menubar/MenubarTrigger.vue    |  15 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  15 +-
 .../navigation-menu/NavigationMenuContent.vue |  25 +-
 .../NavigationMenuIndicator.vue               |  17 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |   6 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  17 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  16 +-
 .../NavigationMenuViewport.vue                |  18 +-
 .../ui/pagination/PaginationEllipsis.vue      |  18 +-
 .../ui/pagination/PaginationFirst.vue         |  17 +-
 .../new-york/ui/pagination/PaginationLast.vue |  17 +-
 .../new-york/ui/pagination/PaginationNext.vue |  17 +-
 .../new-york/ui/pagination/PaginationPrev.vue |  17 +-
 .../new-york/ui/popover/PopoverContent.vue    |  16 +-
 .../new-york/ui/popover/PopoverTrigger.vue    |   2 +-
 .../lib/registry/new-york/ui/popover/index.ts |   1 +
 .../new-york/ui/progress/Progress.vue         |  19 +-
 .../new-york/ui/radio-group/RadioGroup.vue    |  16 +-
 .../ui/radio-group/RadioGroupItem.vue         |  18 +-
 .../new-york/ui/scroll-area/ScrollArea.vue    |  21 +-
 .../new-york/ui/scroll-area/ScrollBar.vue     |  13 +-
 .../new-york/ui/select/SelectContent.vue      |  41 +-
 .../new-york/ui/select/SelectGroup.vue        |  11 +-
 .../new-york/ui/select/SelectItem.vue         |  18 +-
 .../new-york/ui/select/SelectLabel.vue        |   5 +-
 .../ui/select/SelectScrollDownButton.vue      |  24 ++
 .../ui/select/SelectScrollUpButton.vue        |  24 ++
 .../new-york/ui/select/SelectSeparator.vue    |  11 +-
 .../new-york/ui/select/SelectTrigger.vue      |  38 +-
 .../lib/registry/new-york/ui/select/index.ts  |   2 +
 .../new-york/ui/separator/Separator.vue       |  15 +-
 .../lib/registry/new-york/ui/sheet/Sheet.vue  |   9 +-
 .../new-york/ui/sheet/SheetContent.vue        |  48 +--
 .../new-york/ui/sheet/SheetDescription.vue    |  11 +-
 .../new-york/ui/sheet/SheetFooter.vue         |   5 +-
 .../new-york/ui/sheet/SheetHeader.vue         |   5 +-
 .../registry/new-york/ui/sheet/SheetTitle.vue |  11 +-
 .../lib/registry/new-york/ui/sheet/index.ts   |  23 ++
 .../new-york/ui/skeleton/Skeleton.vue         |   5 +-
 .../registry/new-york/ui/slider/Slider.vue    |  17 +-
 .../registry/new-york/ui/switch/Switch.vue    |  28 +-
 .../lib/registry/new-york/ui/table/Table.vue  |   7 +-
 .../registry/new-york/ui/table/TableBody.vue  |   5 +-
 .../new-york/ui/table/TableCaption.vue        |   5 +-
 .../registry/new-york/ui/table/TableCell.vue  |   5 +-
 .../registry/new-york/ui/table/TableEmpty.vue |  18 +-
 .../new-york/ui/table/TableFooter.vue         |   7 +-
 .../registry/new-york/ui/table/TableHead.vue  |   5 +-
 .../new-york/ui/table/TableHeader.vue         |   5 +-
 .../registry/new-york/ui/table/TableRow.vue   |   5 +-
 .../registry/new-york/ui/tabs/TabsContent.vue |  11 +-
 .../registry/new-york/ui/tabs/TabsList.vue    |  21 +-
 .../registry/new-york/ui/tabs/TabsTrigger.vue |  25 +-
 .../new-york/ui/textarea/Textarea.vue         |   4 +-
 .../lib/registry/new-york/ui/toast/Toast.vue  |  32 +-
 .../new-york/ui/toast/ToastAction.vue         |  11 +-
 .../registry/new-york/ui/toast/ToastClose.vue |  15 +-
 .../new-york/ui/toast/ToastDescription.vue    |  11 +-
 .../registry/new-york/ui/toast/ToastTitle.vue |  11 +-
 .../new-york/ui/toast/ToastViewport.vue       |  11 +-
 .../lib/registry/new-york/ui/toast/index.ts   |  15 +-
 .../registry/new-york/ui/toast/use-toast.ts   |   2 +-
 .../new-york/ui/toggle-group/ToggleGroup.vue  |   2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |   2 +-
 .../registry/new-york/ui/toggle/Toggle.vue    |  46 +--
 .../lib/registry/new-york/ui/toggle/index.ts  |   4 +-
 .../new-york/ui/tooltip/TooltipContent.vue    |  18 +-
 .../new-york/ui/tooltip/TooltipTrigger.vue    |   2 +-
 apps/www/src/public/registry/index.json       |  10 +-
 .../registry/styles/default/accordion.json    |   8 +-
 .../registry/styles/default/alert-dialog.json |  14 +-
 .../public/registry/styles/default/alert.json |   8 +-
 .../registry/styles/default/avatar.json       |   4 +-
 .../public/registry/styles/default/badge.json |   4 +-
 .../registry/styles/default/button.json       |   4 +-
 .../registry/styles/default/calendar.json     |   2 +-
 .../public/registry/styles/default/card.json  |  12 +-
 .../registry/styles/default/carousel.json     |  11 +-
 .../registry/styles/default/checkbox.json     |   2 +-
 .../registry/styles/default/collapsible.json  |   2 +-
 .../registry/styles/default/command.json      |  18 +-
 .../registry/styles/default/context-menu.json |  20 +-
 .../registry/styles/default/dialog.json       |  10 +-
 .../styles/default/dropdown-menu.json         |  22 +-
 .../public/registry/styles/default/form.json  |   9 +-
 .../registry/styles/default/hover-card.json   |   4 +-
 .../public/registry/styles/default/input.json |   2 +-
 .../public/registry/styles/default/label.json |   2 +-
 .../registry/styles/default/menubar.json      |  24 +-
 .../styles/default/navigation-menu.json       |  14 +-
 .../registry/styles/default/pagination.json   |  10 +-
 .../registry/styles/default/popover.json      |   2 +-
 .../registry/styles/default/progress.json     |   2 +-
 .../registry/styles/default/radio-group.json  |   4 +-
 .../registry/styles/default/scroll-area.json  |   4 +-
 .../registry/styles/default/select.json       |  22 +-
 .../registry/styles/default/separator.json    |   2 +-
 .../public/registry/styles/default/sheet.json |  14 +-
 .../registry/styles/default/skeleton.json     |   2 +-
 .../registry/styles/default/slider.json       |   2 +-
 .../registry/styles/default/switch.json       |   2 +-
 .../public/registry/styles/default/table.json |  18 +-
 .../public/registry/styles/default/tabs.json  |   6 +-
 .../registry/styles/default/textarea.json     |   2 +-
 .../public/registry/styles/default/toast.json |  16 +-
 .../registry/styles/default/toggle-group.json |   4 +-
 .../registry/styles/default/toggle.json       |   4 +-
 .../registry/styles/default/tooltip.json      |   2 +-
 .../registry/styles/new-york/accordion.json   |   8 +-
 .../styles/new-york/alert-dialog.json         |  14 +-
 .../registry/styles/new-york/alert.json       |   8 +-
 .../registry/styles/new-york/avatar.json      |   6 +-
 .../registry/styles/new-york/badge.json       |   4 +-
 .../registry/styles/new-york/button.json      |   4 +-
 .../public/registry/styles/new-york/card.json |  12 +-
 .../registry/styles/new-york/carousel.json    |   7 +-
 .../registry/styles/new-york/checkbox.json    |   2 +-
 .../registry/styles/new-york/collapsible.json |   2 +-
 .../registry/styles/new-york/command.json     |  18 +-
 .../styles/new-york/context-menu.json         |  20 +-
 .../registry/styles/new-york/dialog.json      |  10 +-
 .../styles/new-york/dropdown-menu.json        |  22 +-
 .../public/registry/styles/new-york/form.json |   9 +-
 .../registry/styles/new-york/hover-card.json  |   4 +-
 .../registry/styles/new-york/input.json       |   2 +-
 .../registry/styles/new-york/label.json       |   2 +-
 .../registry/styles/new-york/menubar.json     |  24 +-
 .../styles/new-york/navigation-menu.json      |  14 +-
 .../registry/styles/new-york/pagination.json  |  10 +-
 .../registry/styles/new-york/popover.json     |   6 +-
 .../registry/styles/new-york/progress.json    |   2 +-
 .../registry/styles/new-york/radio-group.json |   4 +-
 .../registry/styles/new-york/scroll-area.json |   4 +-
 .../registry/styles/new-york/select.json      |  22 +-
 .../registry/styles/new-york/separator.json   |   2 +-
 .../registry/styles/new-york/sheet.json       |  14 +-
 .../registry/styles/new-york/skeleton.json    |   2 +-
 .../registry/styles/new-york/slider.json      |   2 +-
 .../registry/styles/new-york/switch.json      |   2 +-
 .../registry/styles/new-york/table.json       |  18 +-
 .../public/registry/styles/new-york/tabs.json |   6 +-
 .../registry/styles/new-york/textarea.json    |   2 +-
 .../registry/styles/new-york/toast.json       |  16 +-
 .../styles/new-york/toggle-group.json         |   4 +-
 .../registry/styles/new-york/toggle.json      |   4 +-
 .../registry/styles/new-york/tooltip.json     |   4 +-
 apps/www/tailwind.config.js                   |   2 +-
 package.json                                  |   2 +-
 pnpm-lock.yaml                                | 369 ++++++++++--------
 402 files changed, 3480 insertions(+), 2058 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 48579d2b..b6cf67bd 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -3,9 +3,9 @@ import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
-import { createCssVariablesTheme } from 'shikiji'
+import { createCssVariablesTheme } from 'shiki'
 
-// import { transformerMetaWordHighlight } from 'shikiji-transformers'
+// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
@@ -61,6 +61,7 @@ export default defineConfig({
     theme: cssVariables,
     codeTransformers: [
       // transformerMetaWordHighlight(),
+      // transformerNotationWordHighlight(),
     ],
     config(md) {
       md.use(ComponentPreviewPlugin)
@@ -86,8 +87,5 @@ export default defineConfig({
         '@': path.resolve(__dirname, '../src'),
       },
     },
-    ssr: {
-      noExternal: ['vue-sonner'],
-    },
   },
 })
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 388301e0..1ab12142 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -46,9 +46,9 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
                 >
                   {{ doc.title }}
 
-                  <Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
+                  <span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
                     {{ doc.label }}
-                  </Badge>
+                  </span>
                 </a>
               </div>
             </div>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 3caf425d..946f26bb 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -288,7 +288,9 @@ watch(() => $route.path, (n) => {
       </DialogContent>
     </Dialog>
     <DefaultToaster />
-    <NewYorkSonner :theme="isDark ? 'dark' : 'light'" />
+    <ClientOnly>
+      <NewYorkSonner :theme="isDark ? 'dark' : 'light'" />
+    </ClientOnly>
     <NewYorkToaster />
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/styles/shiki.css b/apps/www/.vitepress/theme/styles/shiki.css
index 9c0d7eda..db002829 100644
--- a/apps/www/.vitepress/theme/styles/shiki.css
+++ b/apps/www/.vitepress/theme/styles/shiki.css
@@ -10,4 +10,11 @@
   --shiki-token-string-expression: #ebebeb;
   --shiki-token-punctuation: #ffffff;
   --shiki-token-link: #EE0000;
+}
+
+.shiki .highlighted-word {
+	border-radius: calc(var(--radius) - 2px);
+    border-color: rgba(63,63,70,.7);
+    background-color: rgba(63,63,70,.5);
+    padding: 0.25rem;
 }
\ No newline at end of file
diff --git a/apps/www/package.json b/apps/www/package.json
index 186171f7..b4cbca68 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -19,25 +19,25 @@
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.11.7",
-    "@unovis/ts": "^1.3.1",
-    "@unovis/vue": "^1.3.1",
-    "@vee-validate/zod": "^4.12.4",
+    "@tanstack/vue-table": "^8.11.8",
+    "@unovis/ts": "^1.3.3",
+    "@unovis/vue": "^1.3.3",
+    "@vee-validate/zod": "^4.12.5",
     "@vueuse/core": "^10.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
-    "embla-carousel": "8.0.0-rc19",
-    "embla-carousel-autoplay": "8.0.0-rc19",
-    "embla-carousel-vue": "8.0.0-rc19",
+    "embla-carousel": "^8.0.0-rc22",
+    "embla-carousel-autoplay": "^8.0.0-rc22",
+    "embla-carousel-vue": "^8.0.0-rc22",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.3.2",
+    "radix-vue": "^1.4.0",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vee-validate": "4.12.4",
+    "vee-validate": "4.12.5",
     "vue": "^3.4.15",
-    "vue-sonner": "^1.0.2",
+    "vue-sonner": "^1.0.3",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
@@ -46,26 +46,26 @@
     "@iconify-json/tabler": "^1.1.89",
     "@iconify/json": "^2.2.108",
     "@iconify/vue": "^4.1.1",
+    "@shikijs/transformers": "^1.0.0-beta.3",
     "@types/lodash.template": "^4.5.2",
     "@types/node": "^20.8.10",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/compiler-core": "^3.4.14",
-    "@vue/compiler-dom": "^3.4.14",
+    "@vue/compiler-core": "^3.4.15",
+    "@vue/compiler-dom": "^3.4.15",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
-    "shikiji": "^0.10.0-beta.9",
-    "shikiji-transformers": "^0.10.0-beta.9",
-    "tailwind-merge": "^2.2.0",
+    "shiki": "^1.0.0-beta.3",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
-    "unplugin-icons": "^0.17.1",
+    "unplugin-icons": "^0.18.3",
     "vite": "^5.0.12",
-    "vitepress": "^1.0.0-rc.39",
+    "vitepress": "^1.0.0-rc.41",
     "vue-tsc": "^1.8.27"
   }
 }
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index e479e4de..1e8c7b3c 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -25,7 +25,7 @@ We'll start with the basic `<Table />` component and build a complex data table
 
 ## Table of Contents
 
-This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the <Table /> component to build your own custom data table. We'll cover the following topics:
+This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the `<Table />` component to build your own custom data table. We'll cover the following topics:
 
 - [Basic Table](#basic-table)
 - [Row Actions](#row-actions)
@@ -109,31 +109,23 @@ Let's start by building a basic table.
 
 First, we'll define our columns in the `columns.ts` file.
 
-```ts:line-numbers title="components/payments/columns.ts" {1,12-27}
-import type { ColumnDef } from '@tanstack/vue-table'
-
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export interface Payment {
-  id: string
-  amount: number
-  status: 'pending' | 'processing' | 'success' | 'failed'
-  email: string
-}
+```ts:line-numbers {1,12-27}
+import { h } from 'vue'
 
 export const columns: ColumnDef<Payment>[] = [
-  {
-    accessorKey: 'status',
-    header: 'Status',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
   {
     accessorKey: 'amount',
-    header: 'Amount',
-  },
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+  }
 ]
 ```
 
@@ -149,7 +141,7 @@ formatted, sorted and filtered.
 
 Next, we'll create a `<DataTable />` component to render our table.
 
-```ts:line-numbers
+```vue:line-numbers
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
 import {
@@ -225,7 +217,7 @@ const table = useVueTable({
 
 Finally, we'll render our table in our index component.
 
-```ts:line-numbers {28}
+```vue:line-numbers {28}
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { columns } from "./components/columns"
@@ -302,7 +294,7 @@ Let's add row actions to our table. We'll use a `<Dropdown />` component for thi
 
 ### Add the following into your `DataTableDropDown.vue` component:
 
-```ts:line-numbers
+```vue:line-numbers
 // DataTableDropDown.vue
 <script setup lang="ts">
 import { MoreHorizontal } from 'lucide-vue-next'
@@ -402,8 +394,7 @@ This will automatically paginate your rows into pages of 10. See the [pagination
 
 We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
 
-```ts:line-numbers {3,15,21-39}
-// components/payments/DataTable.vue
+```vue:line-numbers {3,15,21-39}
 <script lang="ts" generic="TData, TValue">
 import { Button } from "@/components/ui/button"
 
@@ -482,7 +473,7 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
 
 ### Update `<DataTable>`
 
-```ts:line-numbers {4,7,16,34,41-44}
+```vue:line-numbers {4,7,16,34,41-44}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -579,7 +570,7 @@ Let's add a search input to filter emails in our table.
 
 ### Update `<DataTable>`
 
-```ts:line-numbers {4,11,19,39,48-49,52,60-64}
+```vue:line-numbers {4,11,19,39,48-49,52,60-64}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -664,7 +655,7 @@ Adding column visibility is fairly simple using `@tanstack/vue-table` visibility
 
 ### Update `<DataTable>`
 
-```ts:line-numbers {6,9-14,48,59,63,75-91}
+```vue:line-numbers {6,9-14,48,59,63,75-91}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
@@ -829,7 +820,7 @@ export const columns: ColumnDef<Payment>[] = [
 
 ### Update `<DataTable>`
 
-```ts:line-numbers {10,22,27}
+```vue:line-numbers {10,22,27}
 <script setup lang="ts" generic="TData, TValue">
 const props = defineProps<{
     columns: ColumnDef<TData, TValue>[]
@@ -895,7 +886,7 @@ Here are some components you can use to build your data tables. This is from the
 
 Make any column header sortable and hideable.
 
-```ts:line-numbers
+```vue:line-numbers
 <script setup lang="ts">
 import type { Column } from '@tanstack/vue-table'
 import { type Task } from '../data/schema'
@@ -988,7 +979,7 @@ export const columns = [
 
 Add pagination controls to your table including page size and selection count.
 
-```ts:line-numbers
+```vue:line-numbers
 <script setup lang="ts">
 import { type Table } from '@tanstack/vue-table'
 import { type Task } from '../data/schema'
@@ -1093,8 +1084,7 @@ defineProps<DataTablePaginationProps>()
 
 A component to toggle column visibility.
 
-```ts:line-numbers
-
+```vue:line-numbers
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import { computed } from 'vue'
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 16669984..e8530cf6 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -47,7 +47,7 @@ import {
 
 ### Link Component
 
-When using the Nuxt.js <NuxtLink /> component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+When using the Nuxt.js `<NuxtLink />` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
 
 ```ts
 import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 1951070a..87e7f589 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -40,7 +40,7 @@ const date = ref({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" :align="'end'" :avoid-collisions="true">
+      <PopoverContent class="w-auto p-0" :align="'end'">
         <Calendar
           v-model.range="date"
           :columns="2"
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 325301a4..e5aeff88 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -95,7 +95,7 @@ async function onSubmit(values: any) {
     </FormField>
 
     <FormField v-slot="{ componentField, value }" name="dob">
-      <FormItem>
+      <FormItem class="flex flex-col">
         <FormLabel>Date of birth</FormLabel>
         <Popover>
           <PopoverTrigger as-child>
@@ -123,7 +123,7 @@ async function onSubmit(values: any) {
     </FormField>
 
     <FormField v-slot="{ value }" name="language">
-      <FormItem>
+      <FormItem class="flex flex-col">
         <FormLabel>Language</FormLabel>
 
         <Popover v-model:open="open">
diff --git a/apps/www/src/lib/registry/default/example/CardFormDemo.vue b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
index 4ba3383a..a9da077e 100644
--- a/apps/www/src/lib/registry/default/example/CardFormDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
@@ -1,5 +1,12 @@
 <script setup lang='ts'>
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
 import {
   Select,
   SelectContent,
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index b4a8d36e..e208a04a 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -14,7 +14,7 @@ import {
   useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'
 import DropdownAction from '../DataTableDemoColumn.vue'
 
 import { Button } from '@/lib/registry/default/ui/button'
@@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -179,7 +179,7 @@ const table = useVueTable({
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
               <Button variant="outline" class="ml-auto">
-                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+                Columns <ChevronDown class="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
index 8e37ef5d..da21cf4e 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
@@ -44,7 +44,7 @@ const value = ref<string>('')
         {{ value
           ? frameworks.find((framework) => framework.value === value)?.label
           : "Select framework..." }}
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -65,7 +65,7 @@ const value = ref<string>('')
               }"
             >
               {{ framework.label }}
-              <CheckIcon
+              <Check
                 :class="cn(
                   'ml-auto h-4 w-4',
                   value === framework.value ? 'opacity-100' : 'opacity-0',
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index b892d3d8..212b9c06 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -40,7 +40,7 @@ const date = ref({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+      <PopoverContent class="w-auto p-0" align="start">
         <Calendar
           v-model.range="date"
           :columns="2"
diff --git a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
index be4ab976..2add61c6 100644
--- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
@@ -40,7 +40,7 @@ const date = ref({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+      <PopoverContent class="w-auto p-0" align="start">
         <Calendar
           v-model.range="date"
           mode="date"
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
index 1bfac8de..8ce8571b 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -3,15 +3,17 @@ import {
   AccordionRoot,
   type AccordionRootEmits,
   type AccordionRootProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <AccordionRoot v-bind="forwarded">
     <slot />
   </AccordionRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
index 740f4e66..d8ec9889 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AccordionContent, type AccordionContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionContentProps & { class?: string }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AccordionContent
-    v-bind="props"
-    :class="
-      cn(
-        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-        props.class,
-      )
-    "
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
   >
-    <div class="pb-4 pt-0">
+    <div :class="cn('pb-4 pt-0', props.class)">
       <slot />
     </div>
   </AccordionContent>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
index c78bf5aa..9975c238 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { AccordionItem, type AccordionItemProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionItemProps & { class?: string }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <AccordionItem
-    v-bind="props"
-    :class="cn('border-b', props.class ?? '')"
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
   >
     <slot />
   </AccordionItem>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
index 512a8fdf..17c15ca2 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AccordionHeader,
   AccordionTrigger,
@@ -7,13 +8,19 @@ import {
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionTriggerProps & { class?: string }>()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AccordionHeader class="flex" as="div">
+  <AccordionHeader class="flex">
     <AccordionTrigger
-      v-bind="props"
+      v-bind="delegatedProps"
       :class="
         cn(
           'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
@@ -22,9 +29,11 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
       "
     >
       <slot />
-      <ChevronDown
-        class="h-4 w-4 shrink-0 transition-transform duration-200"
-      />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
     </AccordionTrigger>
   </AccordionHeader>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
index 8ebf7157..cd87a927 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 
-const props = defineProps<AlertDialogActionProps>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
     <slot />
   </AlertDialogAction>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
index fe3531b3..d42179c4 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 
-const props = defineProps<AlertDialogCancelProps>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
     <slot />
   </AlertDialogCancel>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 8af818b9..5a5dcdf7 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -1,30 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
   type AlertDialogContentProps,
   AlertDialogOverlay,
   AlertDialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogContentProps & { class?: string }>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <AlertDialogContent
-      v-bind="{ ...props, ...emitsAsProps }"
+      v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
index 7ff155e6..9682cbb1 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogDescription
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    :as-child="props.asChild"
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </AlertDialogDescription>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
index de4af93b..55d0a0eb 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..c61c4495 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
index 9b6491f2..50c583d0 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogTitle
-    :as-child="props.asChild"
-    :class="cn('text-lg text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
   >
     <slot />
   </AlertDialogTitle>
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
index b95d5c89..b3502d52 100644
--- a/apps/www/src/lib/registry/default/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { alertVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
-  class?: string
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
index a539b631..2971a877 100644
--- a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: String,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
index c5dd22c2..e28dd37e 100644
--- a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
     <slot />
   </h5>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts
index 5ca03a7f..765f704d 100644
--- a/apps/www/src/lib/registry/default/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/default/ui/alert/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
@@ -19,3 +19,5 @@ export const alertVariants = cva(
     },
   },
 )
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
index 39f71b65..5b7b9fbf 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { AvatarRoot } from 'radix-vue'
-import { avatarVariant } from '.'
+import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
   size: 'sm',
   shape: 'circle',
 })
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/src/lib/registry/default/ui/avatar/index.ts
index 6e53cdc8..c4af1a66 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/avatar/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
 export { default as AvatarImage } from './AvatarImage.vue'
@@ -20,3 +20,5 @@ export const avatarVariant = cva(
     },
   },
 )
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
index b459c145..2e8bdffa 100644
--- a/apps/www/src/lib/registry/default/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
-
-interface Props {
-  variant?: BadgeVariantProps['variant']
-}
-defineProps<Props>()
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/src/lib/registry/default/ui/badge/index.ts
index 771c75f1..d90c2ef4 100644
--- a/apps/www/src/lib/registry/default/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/default/ui/badge/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
@@ -21,3 +21,5 @@ export const badgeVariants = cva(
     },
   },
 )
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/src/lib/registry/default/ui/button/Button.vue
index 8bd71364..a7641026 100644
--- a/apps/www/src/lib/registry/default/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { buttonVariants } from '.'
+import { type ButtonVariants, buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
-
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariantProps['variant']
-  size?: ButtonVariantProps['size']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
   as?: string
+  class?: HTMLAttributes['class']
 }
 
-withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  size: 'default',
+const props = withDefaults(defineProps<Props>(), {
   as: 'button',
 })
 </script>
@@ -23,7 +20,7 @@ withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
   >
     <slot />
   </Primitive>
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/src/lib/registry/default/ui/button/index.ts
index 93a07008..e18f26bb 100644
--- a/apps/www/src/lib/registry/default/ui/button/index.ts
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -1,9 +1,9 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md whitespace-nowrap 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',
+  'inline-flex items-center justify-center 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',
   {
     variants: {
       variant: {
@@ -30,3 +30,5 @@ export const buttonVariants = cva(
     },
   },
 )
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index c4dfa33b..dd24b246 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -29,8 +29,7 @@ interface SimpleDateParts {
 defineOptions({
   inheritAttrs: false,
 })
-
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps< {
   modelValue?: string | number | Date | DatePickerModel
   modelModifiers?: object
   columns?: number
@@ -90,8 +89,8 @@ const vCalendarSlots = computed(() => {
 
     <DatePicker
       ref="datePicker"
-      v-model="modelValue"
       v-bind="$attrs"
+      v-model="modelValue"
       :model-modifiers="modelModifiers"
       class="calendar"
       trim-weeks
@@ -152,7 +151,7 @@ const vCalendarSlots = computed(() => {
   @apply rounded-md;
 }
 .calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
 }
 .calendar .vc-day-content:not(.vc-highlight-content-light) {
   @apply rounded-md;
@@ -178,6 +177,7 @@ const vCalendarSlots = computed(() => {
 	--vc-slide-duration: 0.15s;
 	--vc-slide-timing: ease;
 }
+
 .calendar .vc-fade-enter-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-enter-active,
@@ -204,6 +204,7 @@ const vCalendarSlots = computed(() => {
 	backface-visibility: hidden;
 	pointer-events: none;
 }
+
 .calendar .vc-none-leave-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-leave-active,
@@ -213,6 +214,7 @@ const vCalendarSlots = computed(() => {
 	position: absolute !important;
 	width: 100%;
 }
+
 .calendar .vc-none-enter-from,
 .calendar .vc-none-leave-to,
 .calendar .vc-fade-enter-from,
@@ -229,6 +231,7 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-fade-leave-to {
 	opacity: 0;
 }
+
 .calendar .vc-slide-left-enter-from,
 .calendar .vc-slide-right-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-left,
@@ -236,6 +239,7 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(var(--vc-slide-translate));
 	transform: translateX(var(--vc-slide-translate));
 }
+
 .calendar .vc-slide-right-enter-from,
 .calendar .vc-slide-left-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-right,
@@ -243,6 +247,7 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
 	transform: translateX(calc(-1 * var(--vc-slide-translate)));
 }
+
 .calendar .vc-slide-up-enter-from,
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-top,
@@ -250,6 +255,7 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateY(var(--vc-slide-translate));
 	transform: translateY(var(--vc-slide-translate));
 }
+
 .calendar .vc-slide-down-enter-from,
 .calendar .vc-slide-up-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-bottom,
diff --git a/apps/www/src/lib/registry/default/ui/card/Card.vue b/apps/www/src/lib/registry/default/ui/card/Card.vue
index 3f5e10c7..12dd5ec7 100644
--- a/apps/www/src/lib/registry/default/ui/card/Card.vue
+++ b/apps/www/src/lib/registry/default/ui/card/Card.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardContent.vue b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
index 9dc5a661..785913a1 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardContent.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
index 6f1fc0ee..d5faedd5 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
index 9dc5a661..1ed2efe5 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
index 7422a5ad..951d227e 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
index 34f898d6..842e1689 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <h3
     :class="
-      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index c88d61ad..b6147c27 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import emblaCarouselVue from 'embla-carousel-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index f432d015..87f0e308 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from './interface'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
index 53ea50da..801e5c16 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from './interface'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<WithClassAsProps>()
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
index 900ca771..4621bf75 100644
--- a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<CheckboxRootProps>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -15,10 +22,12 @@ const forwarded = useForwardPropsEmits(props, emits)
     v-bind="forwarded"
     :class="
       cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         $attrs.class ?? '')"
+         props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <Check class="h-4 w-4" />
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
index a0fd96c4..52bff5f2 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { CollapsibleRoot, useEmitAsProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
     <slot :open="open" />
   </CollapsibleRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/Command.vue b/apps/www/src/lib/registry/default/ui/command/Command.vue
index e72cd7cc..fe7445c0 100644
--- a/apps/www/src/lib/registry/default/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/default/ui/command/Command.vue
@@ -1,20 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
 import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxRootProps>()
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
 const emits = defineEmits<ComboboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ComboboxRoot
     v-bind="forwarded"
-    :open="true"
-    :model-value="''"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
   </ComboboxRoot>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
index ff7747fe..37c8406a 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEmitAsProps } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
@@ -7,12 +7,12 @@ import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <Dialog v-bind="{ ...props, ...emitsAsProps }">
-    <DialogContent class="p-0 overflow-hidden shadow-lg">
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
       <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">
         <slot />
       </Command>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
index da609fc5..1295d2a0 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxEmptyProps } from 'radix-vue'
 import { ComboboxEmpty } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxEmptyProps>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="props" :class="cn('py-6 text-center text-sm', $attrs.class ?? '')">
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
   </ComboboxEmpty>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
index 1d994b9a..ba6433e5 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxGroupProps } from 'radix-vue'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
   heading?: string
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxGroup
-    v-bind="props"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :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)"
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
index 9aef2ae7..66923733 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
@@ -1,24 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxInputProps>()
-</script>
-
-<script lang="ts">
-export default {
+defineOptions({
   inheritAttrs: false,
-}
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
-      v-bind="{ ...props, ...$attrs }"
+      v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
-      :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', $attrs.class ?? '')"
+      :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)"
     />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
index 6d2167be..29725b18 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useEmitAsProps } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxItemProps>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ComboboxItem
-    v-bind="{ ...props, ...emitsAsProps }"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
     @select.prevent
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index be8a46f9..710d0bc5 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
 import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxContentProps>()
+const props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
index 6219e585..477799cc 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxSeparatorProps } from 'radix-vue'
 import { ComboboxSeparator } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxSeparatorProps>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxSeparator
-    v-bind="props"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
index 5ff539ad..3025e5aa 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,33 +1,38 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuItemIndicator
-        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
-      >
-        <Check class="h-4 h-w" />
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
index 4e201ff0..441c72eb 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
@@ -8,23 +9,26 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuContentProps & { class?: string }>()
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuPortal>
     <ContextMenuContent
-      :align-offset="props.alignOffset"
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
-        ),
-      ]"
       v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
     >
       <slot />
     </ContextMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
index 0071251c..0ac2f253 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </ContextMenuItem>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
index 3702f395..a10aef12 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuLabel
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class ?? '',
+         inset && 'pl-8', props.class,
       )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
index 67309f09..37a39a4e 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -9,21 +10,25 @@ import {
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
     v-bind="forwarded"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
index bf1eca8b..ae55f3a4 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSeparatorProps>()
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ContextMenuSeparator v-bind="props" :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')" />
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index bfdf27bf..2cddc5ce 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
@@ -7,10 +8,16 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
index 258a6df7..057ae675 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <ContextMenuSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRight class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
index 9747cc1a..22e417b5 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <ContextMenuTrigger v-bind="props">
+  <ContextMenuTrigger v-bind="forwardedProps">
     <slot />
   </ContextMenuTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
index 179f5841..a04c0262 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
@@ -1,14 +1,14 @@
-<script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index c8b64caa..20981efa 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -6,35 +7,40 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogContentProps & { class?: string }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <DialogContent
+      v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
           props.class,
-        )
-      "
-      v-bind="{ ...props, ...emitsAsProps }"
+        )"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        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"
       >
         <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
index 05018228..3637b7ec 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogDescription
-    v-bind="props"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
index 734623f2..ac2d0c18 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogFooterProps {
-  class?: string
-}
-
-const props = defineProps<DialogFooterProps>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
index ad3340bd..b2c9085d 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogHeaderProps {
-  class?: string
-}
-
-const props = defineProps<DialogHeaderProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
index 5e748aae..1bb40461 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogTitle
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        'text-lg text-foreground font-semibold leading-none tracking-tight',
+        'text-lg font-semibold leading-none tracking-tight',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index fc815348..cd21fdeb 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class=" cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
index 71e9a9a5..04f4a127 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
@@ -9,26 +10,27 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: string }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
-        ),
-      ]"
       v-bind="forwarded"
+      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
index b632e09f..3360e872 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </DropdownMenuItem>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
index c94782d7..ecf9b2fc 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & {
-  inset?: boolean
-  class?: string
-}>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuLabel
-    v-bind="props"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8', props.class)"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 5bdc41f7..4a727904 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -3,18 +3,17 @@ import {
   DropdownMenuRadioGroup,
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
-
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <DropdownMenuRadioGroup v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
index fa031895..c8b9029c 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,29 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuRadioItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="cn(
-      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-
       <DropdownMenuItemIndicator>
         <Circle class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
index 9cb171be..fc51205b 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSeparatorProps>()
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
index 008520cb..abaeda64 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
index c5dc686c..a730438c 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
@@ -7,16 +8,22 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
+    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index e4a77f47..3474553d 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRight class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
index 73d88670..8efd5a92 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <DropdownMenuTrigger class="outline-none" v-bind="props">
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
     <slot />
   </DropdownMenuTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
index 070c9064..6085f76c 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
@@ -1,21 +1,19 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const { formDescriptionId } = useFormField()
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', className ?? '')"
-    v-bind="rest"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index 6bccf027..ad120be9 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,27 +1,25 @@
 <script lang="ts">
-import { type InjectionKey } from 'vue'
+import type { HTMLAttributes, InjectionKey } from 'vue'
 
 export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
 </script>
 
 <script lang="ts" setup>
-import { provide, useAttrs } from 'vue'
+import { provide } from 'vue'
 import { useId } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const id = useId()
 provide(FORM_ITEM_INJECTION_KEY, id)
-
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
-  <div :class="cn('space-y-2', className ?? '')" v-bind="rest">
+  <div :class="cn('space-y-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
index a85dbc09..5757aed9 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -1,27 +1,22 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'radix-vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
+import { Label } from '@/lib/registry/default/ui/label'
 
-defineOptions({
-  inheritAttrs: false,
-})
-const props = defineProps<LabelProps>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const { error, formItemId } = useFormField()
-const { class: className, ...rest } = useAttrs()
 </script>
 
 <template>
   <Label
     :class="cn(
-      'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
-      className ?? '',
+      props.class,
     )"
     :for="formItemId"
-    v-bind="rest"
   >
     <slot />
   </Label>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
index b39d7d92..5c6d9030 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
@@ -2,11 +2,12 @@
 import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<HoverCardRootProps>()
-const forwarded = useForwardProps(props)
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <HoverCardRoot v-bind="forwarded">
+  <HoverCardRoot v-bind="forwardedProps">
     <slot />
   </HoverCardRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
index 2a109d6c..8affac42 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   HoverCardContent,
   type HoverCardContentProps,
@@ -8,22 +9,28 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: string }>(),
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 
-const forwarded = useForwardProps(props)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <HoverCardPortal>
     <HoverCardContent
-      v-bind="forwarded"
+      v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/src/lib/registry/default/ui/input/Input.vue
index fdaa54eb..39c9cee6 100644
--- a/apps/www/src/lib/registry/default/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/default/ui/input/Input.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <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 ?? '')">
+  <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)">
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/src/lib/registry/default/ui/label/Label.vue
index e44d139e..8fba8db4 100644
--- a/apps/www/src/lib/registry/default/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<LabelProps & { class?: string }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Label
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
index fec5208e..a016e106 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
@@ -1,26 +1,34 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRootProps & { class?: string }>()
-
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarRoot
-    v-bind="props"
+    v-bind="forwarded"
     :class="
       cn(
-        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',
+        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',
         props.class,
       )
     "
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
   </MenubarRoot>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
index b0274d9b..1e7c3a9f 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -1,35 +1,40 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
 
-const emit = defineEmits<MenubarCheckboxItemEmits>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarCheckboxItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
-    @update:checked="emit('update:checked', $event)"
-    @select="emit('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <Check class="w-4 h-4" />
-    </MenubarItemIndicator>
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check class="w-4 h-4" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarCheckboxItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
index 8b0dab3c..03061025 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -1,30 +1,35 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
+  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<MenubarContentProps & { class?: string }>(),
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     align: 'start',
     alignOffset: -4,
     sideOffset: 8,
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarContent
-      :loop="props.loop"
-      :as-child="props.asChild"
-      :side-offset="props.sideOffset"
-      :side="props.side"
-      :align="props.align"
-      :align-offset="props.alignOffset"
+      v-bind="forwardedProps"
       :class="
         cn(
           'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
index 279dd243..742e3018 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
@@ -1,27 +1,34 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 
 const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
-    @select="emits('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </MenubarItem>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
index 04296b44..168df904 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
index 29ec574a..60a8cd1d 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
@@ -3,18 +3,18 @@ import {
   MenubarRadioGroup,
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<MenubarRadioGroupProps>()
 
 const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <MenubarRadioGroup
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <MenubarRadioGroup v-bind="forwarded">
     <slot />
   </MenubarRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
index 4619f96a..c97b00db 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -1,35 +1,40 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRadioItemProps & { class?: string }>()
-
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarRadioItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
-    @select="emits('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <Circle class="h-2 w-2 fill-curren" />
-    </MenubarItemIndicator>
-
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarRadioItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
index 1198dd94..ed437697 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSeparatorProps>()
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')" v-bind="props" />
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
index 192d8847..0d4da921 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
index cd52f2f0..028ed4c9 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -1,32 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarPortal,
   MenubarSubContent,
   type MenubarSubContentEmits,
   type MenubarSubContentProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<MenubarSubContentProps & { class?: string }>(),
-  {
-    sideOffset: 2,
-    alignOffset: 0,
-  },
-)
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarSubContent
-      :loop="props.loop"
-      :as-child="props.asChild"
-      :side-offset="props.sideOffset"
-      :side="props.side"
-      :align="props.align"
-      :align-offset="props.alignOffset"
+      v-bind="forwarded"
       :class="
         cn(
           'z-50 min-w-[8rem] 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',
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
index 0d46a7ee..3cf8b858 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRight class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
index 5380c426..895f1ba6 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarTriggerProps & { class?: string }>()
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarTrigger
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
         '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',
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
index 39d79fb2..080d3bb1 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
@@ -1,22 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuRootProps & { class?: string }>()
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuRoot
-    v-bind="props"
+    v-bind="forwarded"
     :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
     <NavigationMenuViewport />
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
index 87718859..03d8fbbc 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuContent,
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuContentProps & { class?: string }>()
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuContent
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="
-      cn(
-        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
-        props.class,
-      )
-    "
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
   >
     <slot />
   </NavigationMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
index 1a64e069..1d53291e 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuIndicatorProps>()
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuIndicator
-    v-bind="props"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')"
+    v-bind="forwardedProps"
+    :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)"
   >
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
index 598bde48..30c91c61 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
@@ -3,15 +3,17 @@ import {
   NavigationMenuLink,
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<NavigationMenuLinkProps>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <NavigationMenuLink v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <NavigationMenuLink v-bind="forwarded">
     <slot />
   </NavigationMenuLink>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
index c30dcde3..354365c5 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuListProps & { class?: string }>()
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuList
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        'group flex flex-1 list-none items-center justify-center space-x-1',
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
index 08634ccd..f93d9c22 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -1,23 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronDown } from 'lucide-vue-next'
 import { navigationMenuTriggerStyle } from '.'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuTrigger
+    v-bind="forwardedProps"
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-    v-bind="props"
   >
     <slot />
     <ChevronDown
-      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index 40f1f7b0..20c57b9e 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
+  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuViewportProps>()
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <div class="absolute left-0 top-full flex justify-center">
     <NavigationMenuViewport
-      v-bind="props"
+      v-bind="forwardedProps"
       :class="
         cn(
           'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-          $attrs.class ?? '',
+          props.class,
         )
       "
     />
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
index 6d0174a7..09ffa359 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
-const props = defineProps<PaginationEllipsisProps>()
-const forwarded = useForwardProps(props)
-const { class: className, ...rest } = useAttrs()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationEllipsis :class="cn('w-9 h-9 flex items-center justify-center', className ?? '')" v-bind="{ ...forwarded, ...rest }">
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
       <MoreHorizontal />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
index 8820a747..cd3a0d29 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
 import { ChevronsLeft } from 'lucide-vue-next'
 import {
   Button,
 } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationFirstProps>(), {
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationFirst v-bind="forwarded">
-    <Button class="w-10 h-10 p-0" variant="outline">
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
         <ChevronsLeft class="h-4 w-4" />
       </slot>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
index c92ad34b..b155e12a 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationLast, type PaginationLastProps } from 'radix-vue'
 import { ChevronsRight } from 'lucide-vue-next'
 import {
   Button,
 } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationLastProps>(), {
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationLast v-bind="forwarded">
-    <Button class="w-10 h-10 p-0" variant="outline">
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
         <ChevronsRight class="h-4 w-4" />
       </slot>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
index c58986d9..360cb43d 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationNext, type PaginationNextProps } from 'radix-vue'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   Button,
 } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationNextProps>(), {
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationNext v-bind="forwarded">
-    <Button class="w-10 h-10 p-0" variant="outline">
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
         <ChevronRight class="h-4 w-4" />
       </slot>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
index 018a17f8..e37aeb64 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
 import { ChevronLeft } from 'lucide-vue-next'
 import {
   Button,
 } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationPrevProps>(), {
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationPrev v-bind="forwarded">
-    <Button class="w-10 h-10 p-0" variant="outline">
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
         <ChevronLeft class="h-4 w-4" />
       </slot>
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
index bfcf1980..e691fe82 100644
--- a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   PopoverContent,
   type PopoverContentEmits,
@@ -8,15 +9,26 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: string }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
   {
+    align: 'center',
     sideOffset: 4,
   },
 )
 const emits = defineEmits<PopoverContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/progress/Progress.vue b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
index 37df7e6c..6e006ffa 100644
--- a/apps/www/src/lib/registry/default/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ProgressIndicator,
   ProgressRoot,
@@ -7,31 +8,31 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: string }>(),
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
   {
-    class: '',
     modelValue: 0,
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ProgressRoot
+    v-bind="delegatedProps"
     :class="
       cn(
         'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
         props.class,
       )
     "
-    v-bind="props"
   >
     <ProgressIndicator
-      :class="
-        cn(
-          'h-full w-full flex-1 duration-300 bg-foreground transition-all',
-          props.class,
-        )
-      "
+      class="h-full w-full flex-1 bg-primary transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
index 2835f72d..9262656e 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupRootProps & { class?: string }>()
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
     <slot />
   </RadioGroupRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
index 92ae3af9..b147fd86 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
@@ -1,29 +1,39 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   type RadioGroupItemProps,
+  useForwardProps,
 } from 'radix-vue'
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupItemProps & { class?: string }>()
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <RadioGroupItem
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',
+        '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',
         props.class,
       )
     "
   >
     <RadioGroupIndicator
-      :class="cn('flex items-center justify-center', props.class)"
+      class="flex items-center justify-center"
     >
-      <Circle class="w-2.5 h-2.5 text-current fill-current" />
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
index c56cf87d..8f501cce 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -8,20 +9,18 @@ import {
 import ScrollBar from './ScrollBar.vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<
-    ScrollAreaRootProps & { class?: string }
-  >(),
-  {
-    class: '',
-    orientation: 'vertical',
-  },
-)
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full  rounded-[inherit]">
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar />
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index 6171a593..f5e366a6 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -1,22 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ScrollAreaScrollbar
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
            && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-         $attrs.class ?? '')"
+         props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index c3a0c0fa..64809a28 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -7,41 +8,45 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: string }>(), {
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
-    sideOffset: 4,
-    avoidCollisions: true,
   },
 )
 const emits = defineEmits<SelectContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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 max-h-[--radix-popper-available-height]',
-          position === 'popper'
-            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          props.class,
-        )
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-[8rem] 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',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
       "
     >
-      <SelectViewport
-        :class="
-          cn('p-1',
-             position === 'popper'
-               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
-      >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
         <slot />
       </SelectViewport>
+      <SelectScrollDownButton />
     </SelectContent>
   </SelectPortal>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
index e31301c7..407d8ad3 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectGroupProps & { class?: string }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
     <slot />
   </SelectGroup>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
index cae5d6ec..282c7cd3 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -1,19 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
+  useForwardProps,
 } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectItemProps & { class?: string }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectItem
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
         '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',
@@ -21,7 +31,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
         <Check class="h-4 w-4" />
       </SelectItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
index 9674ccb1..3d45cdb6 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: string }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue b/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..54b6c6ac
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue b/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..5535f1c7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUp } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
index b1473cb4..5ae593d2 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectSeparatorProps & { class?: string }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
index bb301915..cfac8eb9 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
@@ -1,29 +1,27 @@
 <script setup lang="ts">
-import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
-  {
-    class: '',
-    invalid: false,
-  },
-)
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        '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 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
-        props.class,
-      ),
-      props.invalid
-        ? '!ring-destructive ring-2 placeholder:!text-destructive'
-        : '',
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      '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 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]:line-clamp-1',
+      props.class,
+    )"
   >
     <slot />
     <SelectIcon as-child>
diff --git a/apps/www/src/lib/registry/default/ui/select/index.ts b/apps/www/src/lib/registry/default/ui/select/index.ts
index f188cc49..b1d89eed 100644
--- a/apps/www/src/lib/registry/default/ui/select/index.ts
+++ b/apps/www/src/lib/registry/default/ui/select/index.ts
@@ -7,3 +7,5 @@ export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
 export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
diff --git a/apps/www/src/lib/registry/default/ui/separator/Separator.vue b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
index 2cc88b0c..791626c2 100644
--- a/apps/www/src/lib/registry/default/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: string }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Separator
-    :class="[
-      cn('shrink-0 bg-border', props.class),
-      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-    ]"
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
   />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue b/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
index 65d92c86..a04c0262 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { DialogRoot } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot>
+  <DialogRoot v-bind="forwarded">
     <slot />
   </DialogRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
index c6d05b04..79625182 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -6,56 +7,47 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { X } from 'lucide-vue-next'
-import { cva } from 'class-variance-authority'
+import { type SheetVariants, sheetVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  class?: string
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<SheetContentProps>()
 
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
 
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  },
-)
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <DialogContent
-      :class="cn(sheetVariants({ side: props.side }), props.class)"
-      v-bind="{ ...props, ...emitsAsProps }"
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        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"
       >
         <X class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
index 9f166647..842cd08a 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogDescription
     :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue
index 72e1e2e7..ac2d0c18 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
index d2eb9b23..541f48f5 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
-      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
index 9a47c633..2ca0c543 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogTitle
     :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogTitle>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/index.ts b/apps/www/src/lib/registry/default/ui/sheet/index.ts
index 51c631e3..fae3f08c 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/default/ui/sheet/index.ts
@@ -1,3 +1,5 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
 export { default as Sheet } from './Sheet.vue'
 export { default as SheetTrigger } from './SheetTrigger.vue'
 export { default as SheetClose } from './SheetClose.vue'
@@ -6,3 +8,24 @@ export { default as SheetHeader } from './SheetHeader.vue'
 export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue b/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
index bf3b943a..b49e3d9b 100644
--- a/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
+++ b/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SkeletonProps>()
 </script>
 
 <template>
-  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/slider/Slider.vue b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
index 0f52ef04..c3dd6d78 100644
--- a/apps/www/src/lib/registry/default/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SliderRootProps>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SliderRoot
     :class="cn(
       'relative flex w-full touch-none select-none items-center',
-      $attrs.class ?? '',
+      props.class,
     )"
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="forwarded"
   >
     <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderRange class="absolute h-full bg-primary" />
diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
index 25dd554f..f2ee993c 100644
--- a/apps/www/src/lib/registry/default/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SwitchRoot,
   type SwitchRootEmits,
@@ -8,28 +9,29 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SwitchRootProps & { class?: string }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
 const emits = defineEmits<SwitchRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SwitchRoot
     v-bind="forwarded"
-    :class="
-      cn(
-        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        props.class,
-      )
-    "
+    :class="cn(
+      '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',
+      props.class,
+    )"
   >
     <SwitchThumb
-      :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 data-[state=unchecked]:translate-x-0',
-        )
-      "
+      :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 data-[state=unchecked]:translate-x-0')"
     />
   </SwitchRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/table/Table.vue b/apps/www/src/lib/registry/default/ui/table/Table.vue
index e64c4516..a4238918 100644
--- a/apps/www/src/lib/registry/default/ui/table/Table.vue
+++ b/apps/www/src/lib/registry/default/ui/table/Table.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div class="w-full overflow-auto">
+  <div class="relative w-full overflow-auto">
     <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableBody.vue b/apps/www/src/lib/registry/default/ui/table/TableBody.vue
index eb0f663a..ab7a937d 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableBody.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableBody.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCaption.vue b/apps/www/src/lib/registry/default/ui/table/TableCaption.vue
index 513caa7e..3904c563 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableCaption.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableCaption.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCell.vue b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
index af16c0a7..4a4da400 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
index 7e60756f..43fe7e0c 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import TableRow from './TableRow.vue'
 import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  class?: string
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
   colspan?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
+}>(), {
   colspan: 1,
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
           props.class,
         )
       "
-      :colspan="props.colspan"
+      v-bind="delegatedProps"
     >
       <div class="flex items-center justify-center py-10">
         <slot />
diff --git a/apps/www/src/lib/registry/default/ui/table/TableFooter.vue b/apps/www/src/lib/registry/default/ui/table/TableFooter.vue
index 6e34e4c6..693a4386 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableFooter.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableFooter.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <tfoot :class="cn('bg-primary font-medium text-primary-foreground', props.class)">
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
index 3f1aa5b2..e882b608 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHeader.vue b/apps/www/src/lib/registry/default/ui/table/TableHeader.vue
index 3af2117f..220352f6 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableHeader.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableRow.vue b/apps/www/src/lib/registry/default/ui/table/TableRow.vue
index f752f46f..5b9e8749 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableRow.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableRow.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
index a39a666b..c0aa0f35 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsContentProps & { class?: string }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsContent
     :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)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </TabsContent>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
index 36ee8625..9644cdc3 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsListProps & { class?: string }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsList
-    v-bind="props"
-    :class="
-      cn(
-        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-        props.class,
-      )
-    "
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
   >
     <slot />
   </TabsList>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
index 5255c621..5fa6748d 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsTriggerProps & { class?: string }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <TabsTrigger
-    v-bind="props"
-    :class="
-      cn(
-        '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',
-        props.class,
-      )
-    "
+    v-bind="forwardedProps"
+    :class="cn(
+      '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',
+      props.class,
+    )"
   >
     <slot />
   </TabsTrigger>
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
index 3f752587..ddf8dd01 100644
--- a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
+  class?: HTMLAttributes['class']
   defaultValue?: string | number
   modelValue?: string | number
 }>()
@@ -18,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] 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', $attrs.class ?? '')" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] 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)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toast.vue b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
index 980f2fb4..b74762cb 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
@@ -1,30 +1,26 @@
-<script lang="ts">
-import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
-import type { VariantProps } from 'class-variance-authority'
-
-interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
-
-export interface ToastProps extends ToastRootProps {
-  class?: string
-  variant?: ToastVariantProps['variant']
-  'onOpenChange'?: ((value: boolean) => void) | undefined
-};
-</script>
-
 <script setup lang="ts">
-import { ToastRoot, useEmitAsProps } from 'radix-vue'
-
-import { toastVariants } from '.'
+import { computed } from 'vue'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { type ToastProps, toastVariants } from '.'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
+
 const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ToastRoot
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="cn(toastVariants({ variant: props.variant }), props.class)"
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
     @update:open="onOpenChange"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue b/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
index b5ccbefe..28ca8c8e 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastActionProps & { class?: string }>()
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastAction v-bind="props" :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)">
+  <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)">
     <slot />
   </ToastAction>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
index 766593cf..ab685a51 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import { ToastClose } from 'radix-vue'
-import { XIcon } from 'lucide-vue-next'
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: string
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastClose v-bind="props" :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)">
-    <XIcon class="h-4 w-4" />
+  <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)">
+    <X class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
index 5f71b1a8..58520378 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastDescriptionProps & { class?: string }>()
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue b/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
index b317850a..0a1dffbe 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastTitleProps & { class?: string }>()
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
     <slot />
   </ToastTitle>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
index 5f2f2b95..57deec81 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastViewportProps & { class?: string }>()
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastViewport v-bind="props" :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)" />
+  <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)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index 331bf98c..ddfdfbf3 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -1,3 +1,6 @@
+import type { ToastRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
 export { default as Toaster } from './Toaster.vue'
 export { default as Toast } from './Toast.vue'
 export { default as ToastViewport } from './ToastViewport.vue'
@@ -8,7 +11,7 @@ export { default as ToastDescription } from './ToastDescription.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
 export { toast, useToast } from './use-toast'
 
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
   '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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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',
@@ -25,3 +28,11 @@ export const toastVariants = cva(
     },
   },
 )
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  'onOpenChange'?: ((value: boolean) => void) | undefined
+}
diff --git a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
index 02e6973b..500e929e 100644
--- a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 import type { Component, VNode } from 'vue'
-import type { ToastProps } from './Toast.vue'
+import type { ToastProps } from '.'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
index c182163e..4e725137 100644
--- a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
@@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
index 17819b31..79cf4709 100644
--- a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
index bb15d616..29a69102 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -1,48 +1,34 @@
 <script setup lang="ts">
-import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useForwardPropsEmits } from 'radix-vue'
-import type { VariantProps } from 'class-variance-authority'
-import { computed, useAttrs } from 'vue'
-import { toggleVariants } from '.'
+import { type HTMLAttributes, computed } from 'vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { type ToggleVariants, toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
-
-interface Props extends ToggleProps {
-  variant?: ToggleVariantProps['variant']
-  size?: ToggleVariantProps['size']
-  disabled?: boolean
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>(), {
   variant: 'default',
   size: 'default',
   disabled: false,
 })
+
 const emits = defineEmits<ToggleEmits>()
 
-const toggleProps = computed(() => {
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, disabled, ...otherProps } = props
-  return otherProps
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
+
+  return delegated
 })
 
-const { class: className, ...rest } = useAttrs()
-const forwarded = useForwardPropsEmits(toggleProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="{
-      ...forwarded,
-      ...rest,
-    }"
-    :class="cn(toggleVariants({ variant, size }), className ?? '')"
-    :disabled="props.disabled"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
   >
     <slot />
   </Toggle>
diff --git a/apps/www/src/lib/registry/default/ui/toggle/index.ts b/apps/www/src/lib/registry/default/ui/toggle/index.ts
index ad34b648..7e35be2f 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toggle/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Toggle } from './Toggle.vue'
 
@@ -23,3 +23,5 @@ export const toggleVariants = cva(
     },
   },
 )
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
index c06b932f..1f12009a 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
@@ -1,18 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<TooltipContentProps>(), {
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
   sideOffset: 4,
 })
+
 const emits = defineEmits<TooltipContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <TooltipPortal>
-    <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', $attrs.class ?? '')">
+    <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)">
       <slot />
     </TooltipContent>
   </TooltipPortal>
diff --git a/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue b/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
index cea8c946..b8d0a9ab 100644
--- a/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
@@ -1,5 +1,12 @@
 <script setup lang='ts'>
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
 import {
   Select,
   SelectContent,
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
index 2d6c7784..7b8c3084 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -40,7 +40,7 @@ const date = ref({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+      <PopoverContent class="w-auto p-0" align="start">
         <Calendar
           v-model.range="date"
           :columns="2"
diff --git a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
index 95dcd021..6099b11c 100644
--- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
@@ -40,7 +40,7 @@ const date = ref({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+      <PopoverContent class="w-auto p-0" align="start">
         <Calendar
           v-model.range="date"
           mode="date"
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
index 1bfac8de..8ce8571b 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
@@ -3,15 +3,17 @@ import {
   AccordionRoot,
   type AccordionRootEmits,
   type AccordionRootProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <AccordionRoot v-bind="forwarded">
     <slot />
   </AccordionRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
index 10703dec..68632ef4 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AccordionContent, type AccordionContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionContentProps & { class?: string }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AccordionContent
-    v-bind="props"
-    :class="
-      cn(
-        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-        props.class,
-      )
-    "
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
   >
-    <div class="pb-4 pt-0">
+    <div :class="cn('pb-4 pt-0', props.class)">
       <slot />
     </div>
   </AccordionContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
index c78bf5aa..9975c238 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { AccordionItem, type AccordionItemProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionItemProps & { class?: string }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <AccordionItem
-    v-bind="props"
-    :class="cn('border-b', props.class ?? '')"
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
   >
     <slot />
   </AccordionItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
index 264aa7f6..6eef10a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AccordionHeader,
   AccordionTrigger,
@@ -7,13 +8,19 @@ import {
 import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AccordionTriggerProps & { class?: string }>()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AccordionHeader class="flex" as="div">
+  <AccordionHeader class="flex">
     <AccordionTrigger
-      v-bind="props"
+      v-bind="delegatedProps"
       :class="
         cn(
           'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
@@ -22,9 +29,11 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
       "
     >
       <slot />
-      <ChevronDownIcon
-        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
-      />
+      <slot name="icon">
+        <ChevronDownIcon
+          class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+        />
+      </slot>
     </AccordionTrigger>
   </AccordionHeader>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
index b7898320..985f6447 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
-const props = defineProps<AlertDialogActionProps>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
     <slot />
   </AlertDialogAction>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
index 33305f27..d3dbb805 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
-const props = defineProps<AlertDialogCancelProps>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
     <slot />
   </AlertDialogCancel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index 54d1f4e0..962124d7 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -1,31 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
   type AlertDialogContentProps,
   AlertDialogOverlay,
   AlertDialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogContentProps & { class?: string }>()
-
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <AlertDialogContent
-      v-bind="{ ...props, ...emitsAsProps }"
+      v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
index 7ff155e6..9682cbb1 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogDescription
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    :as-child="props.asChild"
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </AlertDialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
index de4af93b..55d0a0eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..c61c4495 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
index 9b6491f2..50c583d0 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogTitle
-    :as-child="props.asChild"
-    :class="cn('text-lg text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
   >
     <slot />
   </AlertDialogTitle>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
index b95d5c89..b3502d52 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { alertVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
-  class?: string
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
index a539b631..2971a877 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: String,
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
index c5dd22c2..e28dd37e 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
     <slot />
   </h5>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
index 499ee68a..1ef58723 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
@@ -19,3 +19,5 @@ export const alertVariants = cva(
     },
   },
 )
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
index 39f71b65..5b7b9fbf 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { AvatarRoot } from 'radix-vue'
-import { avatarVariant } from '.'
+import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
   size: 'sm',
   shape: 'circle',
 })
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
index 28861feb..43499fa2 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
@@ -5,5 +5,5 @@ const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full aspect-square" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts b/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
index 147e9d2a..c4af1a66 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
@@ -1,11 +1,11 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
 export { default as AvatarImage } from './AvatarImage.vue'
 export { default as AvatarFallback } from './AvatarFallback.vue'
 
 export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-muted overflow-hidden',
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
   {
     variants: {
       size: {
@@ -20,3 +20,5 @@ export const avatarVariant = cva(
     },
   },
 )
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue b/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
index b459c145..2e8bdffa 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
-
-interface Props {
-  variant?: BadgeVariantProps['variant']
-}
-defineProps<Props>()
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/index.ts b/apps/www/src/lib/registry/new-york/ui/badge/index.ts
index 6bcca9b1..20eda06a 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/badge/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
@@ -21,3 +21,5 @@ export const badgeVariants = cva(
     },
   },
 )
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/Button.vue b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
index 8bd71364..a7641026 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { buttonVariants } from '.'
+import { type ButtonVariants, buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
-
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariantProps['variant']
-  size?: ButtonVariantProps['size']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
   as?: string
+  class?: HTMLAttributes['class']
 }
 
-withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  size: 'default',
+const props = withDefaults(defineProps<Props>(), {
   as: 'button',
 })
 </script>
@@ -23,7 +20,7 @@ withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
   >
     <slot />
   </Primitive>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
index be8da738..4bb4bdb9 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -1,20 +1,19 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md whitespace-nowrap 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',
+  'inline-flex items-center justify-center 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',
   {
     variants: {
       variant: {
-        default:
-            'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
-            'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-            'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
-            'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
@@ -31,3 +30,5 @@ export const buttonVariants = cva(
     },
   },
 )
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/Card.vue b/apps/www/src/lib/registry/new-york/ui/card/Card.vue
index d39baad7..94b69033 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/Card.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/Card.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'rounded-lg border bg-card text-card-foreground shadow',
+        'rounded-xl border bg-card text-card-foreground shadow',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue b/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
index 9dc5a661..785913a1 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue b/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
index 6f1fc0ee..d5faedd5 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue b/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
index fb1205b9..1ed2efe5 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue b/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
index 7422a5ad..951d227e 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue b/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
index b5c27b34..fc302e25 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index c88d61ad..b6147c27 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import emblaCarouselVue from 'embla-carousel-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
index 33d498cc..486f26ae 100644
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@@ -1,24 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<CheckboxRootProps>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         $attrs.class ?? '')"
+      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',
+         props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <CheckIcon class="h-4 w-4" />
+      <slot>
+        <CheckIcon class="h-4 w-4" />
+      </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
index a0fd96c4..52bff5f2 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { CollapsibleRoot, useEmitAsProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
     <slot :open="open" />
   </CollapsibleRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/Command.vue b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
index 632ee8d9..fe7445c0 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
@@ -1,19 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
 import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxRootProps>()
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
 const emits = defineEmits<ComboboxRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ComboboxRoot
     v-bind="forwarded"
-    :open="true"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
   </ComboboxRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
index 7a5e3ff8..b4881ee4 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { useEmitAsProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <Dialog v-bind="{ ...props, ...emitsAsProps }">
+  <Dialog v-bind="forwarded">
     <DialogContent class="overflow-hidden p-0 shadow-lg">
       <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">
         <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
index da609fc5..1295d2a0 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxEmptyProps } from 'radix-vue'
 import { ComboboxEmpty } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxEmptyProps>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="props" :class="cn('py-6 text-center text-sm', $attrs.class ?? '')">
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
   </ComboboxEmpty>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
index 1d994b9a..ba6433e5 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxGroupProps } from 'radix-vue'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
   heading?: string
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxGroup
-    v-bind="props"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :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)"
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
index e8a809fd..c0a67265 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
@@ -1,24 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
-import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxInputProps>()
-</script>
-
-<script lang="ts">
-export default {
+defineOptions({
   inheritAttrs: false,
-}
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
-      v-bind="{ ...props, ...$attrs }"
+      v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
-      :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', $attrs.class ?? '')"
+      :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)"
     />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
index 6d2167be..29725b18 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useEmitAsProps } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxItemProps>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ComboboxItem
-    v-bind="{ ...props, ...emitsAsProps }"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
     @select.prevent
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index be8a46f9..710d0bc5 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
 import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxContentProps>()
+const props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
index 6219e585..477799cc 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxSeparatorProps } from 'radix-vue'
 import { ComboboxSeparator } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ComboboxSeparatorProps>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ComboboxSeparator
-    v-bind="props"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index aca044cf..aca45cd8 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,32 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuItemIndicator
-        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
-      >
+      <ContextMenuItemIndicator>
         <CheckIcon class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index 4e201ff0..d926efd8 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
@@ -8,23 +9,26 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuContentProps & { class?: string }>()
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuPortal>
     <ContextMenuContent
-      :align-offset="props.alignOffset"
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
-        ),
-      ]"
       v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
     >
       <slot />
     </ContextMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
index 0071251c..0ac2f253 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </ContextMenuItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
index 3702f395..a10aef12 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ContextMenuLabel
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class ?? '',
+         inset && 'pl-8', props.class,
       )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index 298e6f77..b1df7802 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -9,21 +10,25 @@ import {
 import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ContextMenuRadioItem
     v-bind="forwarded"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
index bf1eca8b..ae55f3a4 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSeparatorProps>()
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ContextMenuSeparator v-bind="props" :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')" />
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
index e97f3c2b..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index bfdf27bf..aa248fec 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
@@ -7,10 +8,16 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -18,7 +25,7 @@ const forwarded = useForwardPropsEmits(props, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 6469f5f2..9ba6176a 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <ContextMenuSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRightIcon class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
index 9747cc1a..22e417b5 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <ContextMenuTrigger v-bind="props">
+  <ContextMenuTrigger v-bind="forwardedProps">
     <slot />
   </ContextMenuTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index 5ca33e38..35fa84c4 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -6,35 +7,40 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogContentProps & { class?: string }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <DialogContent
+      v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
           props.class,
-        )
-      "
-      v-bind="{ ...props, ...emitsAsProps }"
+        )"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        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"
       >
         <Cross2Icon class="w-4 h-4" />
         <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
index 05018228..3637b7ec 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogDescription
-    v-bind="props"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
index 734623f2..ac2d0c18 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogFooterProps {
-  class?: string
-}
-
-const props = defineProps<DialogFooterProps>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
index ad3340bd..b2c9085d 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-interface DialogHeaderProps {
-  class?: string
-}
-
-const props = defineProps<DialogHeaderProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
index 5e748aae..1bb40461 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogTitle
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        'text-lg text-foreground font-semibold leading-none tracking-tight',
+        'text-lg font-semibold leading-none tracking-tight',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 9fe6e511..a6792a7a 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class=" cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 71e9a9a5..04f4a127 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
@@ -9,26 +10,27 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: string }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
-        ),
-      ]"
       v-bind="forwarded"
+      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
index b632e09f..3360e872 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </DropdownMenuItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
index c94782d7..ecf9b2fc 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & {
-  inset?: boolean
-  class?: string
-}>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuLabel
-    v-bind="props"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold',
-         inset && 'pl-8', props.class)"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 5bdc41f7..4a727904 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -3,18 +3,17 @@ import {
   DropdownMenuRadioGroup,
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
-
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <DropdownMenuRadioGroup v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c37cf67a..a2fef4c9 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,29 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuRadioItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
     :class="cn(
-      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-
       <DropdownMenuItemIndicator>
         <DotFilledIcon class="h-4 w-4 fill-current" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
index 9cb171be..fc51205b 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSeparatorProps>()
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
index 008520cb..abaeda64 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index c5dc686c..a730438c 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
@@ -7,16 +8,22 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
+    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 9dfe76d5..00d04e09 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRightIcon class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
index 73d88670..8efd5a92 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <DropdownMenuTrigger class="outline-none" v-bind="props">
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
     <slot />
   </DropdownMenuTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
index fed2ca34..6085f76c 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
@@ -1,14 +1,19 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
 const { formDescriptionId } = useFormField()
 </script>
 
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index 2e5feaf1..ad120be9 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type InjectionKey } from 'vue'
+import type { HTMLAttributes, InjectionKey } from 'vue'
 
 export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
@@ -10,12 +10,16 @@ import { provide } from 'vue'
 import { useId } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
 const id = useId()
 provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>
-  <div :class="cn('space-y-2', $attrs.class ?? '')">
+  <div :class="cn('space-y-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
index 84f95ae4..292eb616 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { Label, type LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'radix-vue'
 import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
+import { Label } from '@/lib/registry/new-york/ui/label'
 
-const props = defineProps<LabelProps>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const { error, formItemId } = useFormField()
 </script>
@@ -11,9 +13,8 @@ const { error, formItemId } = useFormField()
 <template>
   <Label
     :class="cn(
-      'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
-      $attrs.class ?? '',
+      props.class,
     )"
     :for="formItemId"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
index b39d7d92..5c6d9030 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
@@ -2,11 +2,12 @@
 import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<HoverCardRootProps>()
-const forwarded = useForwardProps(props)
+
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <HoverCardRoot v-bind="forwarded">
+  <HoverCardRoot v-bind="forwardedProps">
     <slot />
   </HoverCardRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
index 2a109d6c..8affac42 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   HoverCardContent,
   type HoverCardContentProps,
@@ -8,22 +9,28 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: string }>(),
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
 )
 
-const forwarded = useForwardProps(props)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <HoverCardPortal>
     <HoverCardContent
-      v-bind="forwarded"
+      v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/input/Input.vue b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
index a0e7654e..54517946 100644
--- a/apps/www/src/lib/registry/new-york/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <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 ?? '')">
+  <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)">
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
index e44d139e..8fba8db4 100644
--- a/apps/www/src/lib/registry/new-york/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<LabelProps & { class?: string }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Label
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
index 515cad4c..f41f106e 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
@@ -1,26 +1,34 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRootProps & { class?: string }>()
-
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarRoot
-    v-bind="props"
+    v-bind="forwarded"
     :class="
       cn(
         'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
         props.class,
       )
     "
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
   </MenubarRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index 53d1ceb2..e2724bff 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -1,35 +1,40 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
 
-const emit = defineEmits<MenubarCheckboxItemEmits>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarCheckboxItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
-    @update:checked="emit('update:checked', $event)"
-    @select="emit('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <CheckIcon class="w-4 h-4" />
-    </MenubarItemIndicator>
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <CheckIcon class="w-4 h-4" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarCheckboxItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index 59d6a66a..03061025 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarContent,
   type MenubarContentProps,
@@ -8,20 +9,27 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<MenubarContentProps & { class?: string }>(),
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     align: 'start',
     alignOffset: -4,
     sideOffset: 8,
   },
 )
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarContent
-      v-bind="forwarded"
+      v-bind="forwardedProps"
       :class="
         cn(
           'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
index 279dd243..742e3018 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
@@ -1,27 +1,34 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 
 const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
-    @select="emits('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
   </MenubarItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
index 04296b44..168df904 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
index 29ec574a..60a8cd1d 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
@@ -3,18 +3,18 @@ import {
   MenubarRadioGroup,
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<MenubarRadioGroupProps>()
 
 const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <MenubarRadioGroup
-    v-bind="props"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
+  <MenubarRadioGroup v-bind="forwarded">
     <slot />
   </MenubarRadioGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index 2c832661..c3ddbe3b 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -1,35 +1,40 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarRadioItemProps & { class?: string }>()
-
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarRadioItem
-    v-bind="props"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      ),
-    ]"
-    @select="emits('select', $event)"
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
   >
-    <MenubarItemIndicator
-      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    >
-      <DotFilledIcon class="h-4 w-4 fill-current" />
-    </MenubarItemIndicator>
-
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <DotFilledIcon class="h-4 w-4 fill-current" />
+      </MenubarItemIndicator>
+    </span>
     <slot />
   </MenubarRadioItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
index 1198dd94..ed437697 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSeparatorProps>()
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')" v-bind="props" />
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
index 31bc729b..0d4da921 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <span :class="cn('text-xs ml-auto tracking-widest opacity-50', $attrs.class ?? '')">
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index cd52f2f0..66d816cf 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
@@ -1,35 +1,34 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   MenubarPortal,
   MenubarSubContent,
   type MenubarSubContentEmits,
   type MenubarSubContentProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<MenubarSubContentProps & { class?: string }>(),
-  {
-    sideOffset: 2,
-    alignOffset: 0,
-  },
-)
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <MenubarPortal>
     <MenubarSubContent
-      :loop="props.loop"
-      :as-child="props.asChild"
-      :side-offset="props.sideOffset"
-      :side="props.side"
-      :align="props.align"
-      :align-offset="props.alignOffset"
+      v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-[8rem] 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',
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index 10023836..80b2a891 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        inset && 'pl-8',
-        props.class,
-      ),
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
   >
     <slot />
     <ChevronRightIcon class="ml-auto h-4 w-4" />
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
index 824e0a6b..62311578 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarTriggerProps & { class?: string }>()
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <MenubarTrigger
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
         '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',
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
index 39d79fb2..080d3bb1 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
@@ -1,22 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuRootProps & { class?: string }>()
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuRoot
-    v-bind="props"
+    v-bind="forwarded"
     :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-    @update:model-value="emits('update:modelValue', $event)"
   >
     <slot />
     <NavigationMenuViewport />
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
index 87718859..03d8fbbc 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuContent,
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuContentProps & { class?: string }>()
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuContent
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="
-      cn(
-        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
-        props.class,
-      )
-    "
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
   >
     <slot />
   </NavigationMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
index 1a64e069..1d53291e 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuIndicatorProps>()
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuIndicator
-    v-bind="props"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')"
+    v-bind="forwardedProps"
+    :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)"
   >
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
index 598bde48..30c91c61 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
@@ -3,15 +3,17 @@ import {
   NavigationMenuLink,
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
 
 const props = defineProps<NavigationMenuLinkProps>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <NavigationMenuLink v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <NavigationMenuLink v-bind="forwarded">
     <slot />
   </NavigationMenuLink>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
index c30dcde3..354365c5 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuListProps & { class?: string }>()
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuList
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        'group flex flex-1 list-none items-center justify-center space-x-1',
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 29ac7207..3b4b13b0 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -1,23 +1,33 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
+  useForwardProps,
 } from 'radix-vue'
 import { ChevronDownIcon } from '@radix-icons/vue'
 import { navigationMenuTriggerStyle } from '.'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <NavigationMenuTrigger
+    v-bind="forwardedProps"
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-    v-bind="props"
   >
     <slot />
     <ChevronDownIcon
-      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 40f1f7b0..7c2a9470 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
+  useForwardProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<NavigationMenuViewportProps>()
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <div class="absolute left-0 top-full flex justify-center">
     <NavigationMenuViewport
-      v-bind="props"
+      v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-          $attrs.class ?? '',
+          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          props.class,
         )
       "
     />
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
index cc5a6eed..716f690c 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
 import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
-const props = defineProps<PaginationEllipsisProps>()
-const forwarded = useForwardProps(props)
-const { class: className, ...rest } = useAttrs()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationEllipsis :class="cn('w-9 h-9 flex items-center justify-center', className ?? '')" v-bind="{ ...forwarded, ...rest }">
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
       <DotsHorizontalIcon />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
index 03e489c7..ecb8735d 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
 import { DoubleArrowLeftIcon } from '@radix-icons/vue'
 import {
   Button,
 } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationFirstProps>(), {
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationFirst v-bind="forwarded">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
         <DoubleArrowLeftIcon />
       </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
index de2aff1d..d1c06f84 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationLast, type PaginationLastProps } from 'radix-vue'
 import { DoubleArrowRightIcon } from '@radix-icons/vue'
 import {
   Button,
 } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationLastProps>(), {
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationLast v-bind="forwarded">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
         <DoubleArrowRightIcon />
       </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
index 897e47b5..360f5f28 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationNext, type PaginationNextProps } from 'radix-vue'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import {
   Button,
 } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationNextProps>(), {
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationNext v-bind="forwarded">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
         <ChevronRightIcon />
       </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
index 12eb8be0..12d51205 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import {
   Button,
 } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<PaginationPrevProps>(), {
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
 })
-const forwarded = useForwardProps(props)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <PaginationPrev v-bind="forwarded">
-    <Button class="w-9 h-9 p-0" variant="outline">
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
         <ChevronLeftIcon />
       </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
index bfcf1980..e691fe82 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   PopoverContent,
   type PopoverContentEmits,
@@ -8,15 +9,26 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: string }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
   {
+    align: 'center',
     sideOffset: 4,
   },
 )
 const emits = defineEmits<PopoverContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
index 202ebdf8..22f4772a 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
@@ -5,7 +5,7 @@ const props = defineProps<PopoverTriggerProps>()
 </script>
 
 <template>
-  <PopoverTrigger v-bind="props" class="">
+  <PopoverTrigger v-bind="props">
     <slot />
   </PopoverTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/index.ts b/apps/www/src/lib/registry/new-york/ui/popover/index.ts
index 495d55a8..87f034a1 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/popover/index.ts
@@ -1,3 +1,4 @@
+export { PopoverAnchor } from 'radix-vue'
 export { default as Popover } from './Popover.vue'
 export { default as PopoverTrigger } from './PopoverTrigger.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
index 947f1b36..872e73e8 100644
--- a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ProgressIndicator,
   ProgressRoot,
@@ -7,31 +8,31 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: string }>(),
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
   {
-    class: '',
     modelValue: 0,
   },
 )
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ProgressRoot
+    v-bind="delegatedProps"
     :class="
       cn(
         'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
         props.class,
       )
     "
-    v-bind="props"
   >
     <ProgressIndicator
-      :class="
-        cn(
-          'h-full w-full flex-1 bg-primary transition-all',
-          props.class,
-        )
-      "
+      class="h-full w-full flex-1 bg-primary transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
index 2835f72d..9262656e 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupRootProps & { class?: string }>()
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
     <slot />
   </RadioGroupRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 4780263a..b95b43ae 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -1,18 +1,28 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   type RadioGroupItemProps,
+  useForwardProps,
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<RadioGroupItemProps & { class?: string }>()
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <RadioGroupItem
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
         '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',
@@ -20,9 +30,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
       )
     "
   >
-    <RadioGroupIndicator
-      :class="cn('flex items-center justify-center', props.class)"
-    >
+    <RadioGroupIndicator class="flex items-center justify-center">
       <CheckIcon class="h-3.5 w-3.5 fill-primary" />
     </RadioGroupIndicator>
   </RadioGroupItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
index c56cf87d..8f501cce 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -8,20 +9,18 @@ import {
 import ScrollBar from './ScrollBar.vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<
-    ScrollAreaRootProps & { class?: string }
-  >(),
-  {
-    class: '',
-    orientation: 'vertical',
-  },
-)
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full  rounded-[inherit]">
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar />
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index 6171a593..f5e366a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -1,22 +1,29 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <ScrollAreaScrollbar
-    v-bind="props"
+    v-bind="delegatedProps"
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
            && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-         $attrs.class ?? '')"
+         props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index 41f9f1ae..64809a28 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -7,41 +8,45 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/lib/utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: string }>(), {
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
-    sideOffset: 4,
-    avoidCollisions: true,
   },
 )
 const emits = defineEmits<SelectContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'relative z-50 min-w-[8rem] 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 max-h-[--radix-popper-available-height]',
-          position === 'popper'
-            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          props.class,
-        )
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-[8rem] 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',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
       "
     >
-      <SelectViewport
-        :class="
-          cn('p-0',
-             position === 'popper'
-               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
-      >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
         <slot />
       </SelectViewport>
+      <SelectScrollDownButton />
     </SelectContent>
   </SelectPortal>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
index e31301c7..407d8ad3 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectGroupProps & { class?: string }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
     <slot />
   </SelectGroup>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index e5c533c3..c9a5cf7b 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -1,27 +1,37 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
+  useForwardProps,
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectItemProps & { class?: string }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectItem
-    v-bind="props"
+    v-bind="forwardedProps"
     :class="
       cn(
-        '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',
+        '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',
         props.class,
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
         <CheckIcon class="h-4 w-4" />
       </SelectItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
index 9674ccb1..e2025650 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: string }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..846411e4
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDownIcon />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..308f0bd8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUpIcon />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
index b1473cb4..5ae593d2 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectSeparatorProps & { class?: string }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 00d47131..e9ecdbe3 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { CaretSortIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
-  {
-    class: '',
-    invalid: false,
-  },
-)
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
-        props.class,
-      ),
-      props.invalid
-        ? '!ring-destructive ring-2 placeholder:!text-destructive'
-        : '',
-    ]"
+    v-bind="forwardedProps"
+    :class="cn(
+      '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 placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      props.class,
+    )"
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDownIcon class="w-4 h-4 opacity-50" />
+      <CaretSortIcon class="w-4 h-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/index.ts b/apps/www/src/lib/registry/new-york/ui/select/index.ts
index f188cc49..b1d89eed 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/select/index.ts
@@ -7,3 +7,5 @@ export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
 export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
index 2cc88b0c..791626c2 100644
--- a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { Separator, type SeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: string }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <Separator
-    :class="[
-      cn('shrink-0 bg-border', props.class),
-      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-    ]"
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
   />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
index 65d92c86..a04c0262 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { DialogRoot } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot>
+  <DialogRoot v-bind="forwarded">
     <slot />
   </DialogRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index a9a0a5fa..188b69d7 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
@@ -6,58 +7,49 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useEmitAsProps,
+  useForwardPropsEmits,
 } from 'radix-vue'
-import { cva } from 'class-variance-authority'
 import { Cross2Icon } from '@radix-icons/vue'
+import { type SheetVariants, sheetVariants } from '.'
 import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  class?: string
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<SheetContentProps>()
 
 const emits = defineEmits<DialogContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
 
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  },
-)
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      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"
     />
     <DialogContent
-      :class="cn(sheetVariants({ side: props.side }), props.class)"
-      v-bind="{ ...props, ...emitsAsProps }"
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        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"
       >
-        <Cross2Icon class="w-4 h-4 text-muted-foreground" />
+        <Cross2Icon class="w-4 h-4" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
index 9f166647..842cd08a 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: string }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogDescription
     :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogDescription>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
index 72e1e2e7..ac2d0c18 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index d2eb9b23..541f48f5 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
   <div
     :class="
-      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
index 9a47c633..2ca0c543 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: string }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <DialogTitle
     :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </DialogTitle>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
index 51c631e3..fae3f08c 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
@@ -1,3 +1,5 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
 export { default as Sheet } from './Sheet.vue'
 export { default as SheetTrigger } from './SheetTrigger.vue'
 export { default as SheetClose } from './SheetClose.vue'
@@ -6,3 +8,24 @@ export { default as SheetHeader } from './SheetHeader.vue'
 export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
index bf3b943a..94bc183a 100644
--- a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<SkeletonProps>()
 </script>
 
 <template>
-  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
index fbc62a21..d464ba16 100644
--- a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
@@ -1,19 +1,28 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SliderRootProps>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SliderRoot
     :class="cn(
       'relative flex w-full touch-none select-none items-center',
-      $attrs.class ?? '',
+      props.class,
     )"
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-bind="forwarded"
   >
     <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
       <SliderRange class="absolute h-full bg-primary" />
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
index 2814d323..ae4d13ae 100644
--- a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import {
   SwitchRoot,
   type SwitchRootEmits,
@@ -8,28 +9,29 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<SwitchRootProps & { class?: string }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
 const emits = defineEmits<SwitchRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SwitchRoot
     v-bind="forwarded"
-    :class="
-      cn(
-        'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        props.class,
-      )
-    "
+    :class="cn(
+      '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',
+      props.class,
+    )"
   >
     <SwitchThumb
-      :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',
-        )
-      "
+      :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')"
     />
   </SwitchRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/Table.vue b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
index e64c4516..a4238918 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/Table.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/Table.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <div class="w-full overflow-auto">
+  <div class="relative w-full overflow-auto">
     <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue b/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
index eb0f663a..ab7a937d 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
index 513caa7e..3904c563 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
index eb2e18fb..93cd12da 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
index 7e60756f..43fe7e0c 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import TableRow from './TableRow.vue'
 import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
 
-interface Props {
-  class?: string
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
   colspan?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
+}>(), {
   colspan: 1,
 })
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
           props.class,
         )
       "
-      :colspan="props.colspan"
+      v-bind="delegatedProps"
     >
       <div class="flex items-center justify-center py-10">
         <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
index 6e34e4c6..693a4386 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-  <tfoot :class="cn('bg-primary font-medium text-primary-foreground', props.class)">
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index c5528062..e0b80d16 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
index 3af2117f..220352f6 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue b/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
index f752f46f..5b9e8749 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
index a39a666b..c0aa0f35 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsContentProps & { class?: string }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsContent
     :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)"
-    v-bind="props"
+    v-bind="delegatedProps"
   >
     <slot />
   </TabsContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
index 0486a244..a21fc439 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsListProps & { class?: string }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TabsList
-    v-bind="props"
-    :class="
-      cn(
-        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-        props.class,
-      )
-    "
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
   >
     <slot />
   </TabsList>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
index 2be5601d..0b24a3b7 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<TabsTriggerProps & { class?: string }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <TabsTrigger
-    v-bind="props"
-    :class="
-      cn(
-        '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',
-        props.class,
-      )
-    "
+    v-bind="forwardedProps"
+    :class="cn(
+      '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',
+      props.class,
+    )"
   >
     <slot />
   </TabsTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
index 326d2509..e0d07a60 100644
--- a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
+  class?: HTMLAttributes['class']
   defaultValue?: string | number
   modelValue?: string | number
 }>()
@@ -18,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <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', $attrs.class ?? '')" />
+  <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)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
index 980f2fb4..b74762cb 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
@@ -1,30 +1,26 @@
-<script lang="ts">
-import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
-import type { VariantProps } from 'class-variance-authority'
-
-interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
-
-export interface ToastProps extends ToastRootProps {
-  class?: string
-  variant?: ToastVariantProps['variant']
-  'onOpenChange'?: ((value: boolean) => void) | undefined
-};
-</script>
-
 <script setup lang="ts">
-import { ToastRoot, useEmitAsProps } from 'radix-vue'
-
-import { toastVariants } from '.'
+import { computed } from 'vue'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { type ToastProps, toastVariants } from '.'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
+
 const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <ToastRoot
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="cn(toastVariants({ variant: props.variant }), props.class)"
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
     @update:open="onOpenChange"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
index 20747e70..ef139a90 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastActionProps & { class?: string }>()
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastAction v-bind="props" :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)">
+  <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)">
     <slot />
   </ToastAction>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
index e1686592..782cf184 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import { ToastClose } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
 import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: string
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
 }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastClose v-bind="props" :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)">
+  <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)">
     <Cross2Icon class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
index 5f71b1a8..58520378 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastDescriptionProps & { class?: string }>()
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
index 0230bd31..57375423 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastTitleProps & { class?: string }>()
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
     <slot />
   </ToastTitle>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
index 5f2f2b95..57deec81 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastViewportProps & { class?: string }>()
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-  <ToastViewport v-bind="props" :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)" />
+  <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)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index 331bf98c..a90780c6 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -1,3 +1,6 @@
+import type { ToastRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
 export { default as Toaster } from './Toaster.vue'
 export { default as Toast } from './Toast.vue'
 export { default as ToastViewport } from './ToastViewport.vue'
@@ -8,10 +11,10 @@ export { default as ToastDescription } from './ToastDescription.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
 export { toast, useToast } from './use-toast'
 
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  '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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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',
+  '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(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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',
   {
     variants: {
       variant: {
@@ -25,3 +28,11 @@ export const toastVariants = cva(
     },
   },
 )
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  'onOpenChange'?: ((value: boolean) => void) | undefined
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
index 02e6973b..500e929e 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 import type { Component, VNode } from 'vue'
-import type { ToastProps } from './Toast.vue'
+import type { ToastProps } from '.'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
index 9f46322a..b6580c14 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
@@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
index 7b1e35fb..a794ff62 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwardedProps = useForwardProps(delegatedProps.value)
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
index bb15d616..29a69102 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
@@ -1,48 +1,34 @@
 <script setup lang="ts">
-import type { ToggleEmits, ToggleProps } from 'radix-vue'
-import { Toggle, useForwardPropsEmits } from 'radix-vue'
-import type { VariantProps } from 'class-variance-authority'
-import { computed, useAttrs } from 'vue'
-import { toggleVariants } from '.'
+import { type HTMLAttributes, computed } from 'vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { type ToggleVariants, toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
-
-interface Props extends ToggleProps {
-  variant?: ToggleVariantProps['variant']
-  size?: ToggleVariantProps['size']
-  disabled?: boolean
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>(), {
   variant: 'default',
   size: 'default',
   disabled: false,
 })
+
 const emits = defineEmits<ToggleEmits>()
 
-const toggleProps = computed(() => {
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, disabled, ...otherProps } = props
-  return otherProps
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
+
+  return delegated
 })
 
-const { class: className, ...rest } = useAttrs()
-const forwarded = useForwardPropsEmits(toggleProps.value, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="{
-      ...forwarded,
-      ...rest,
-    }"
-    :class="cn(toggleVariants({ variant, size }), className ?? '')"
-    :disabled="props.disabled"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
   >
     <slot />
   </Toggle>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
index f3093fac..b12c2a2e 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 export { default as Toggle } from './Toggle.vue'
 
@@ -23,3 +23,5 @@ export const toggleVariants = cva(
     },
   },
 )
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
index 6252db72..a885caa1 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
@@ -1,18 +1,30 @@
 <script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
 import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<TooltipContentProps>(), {
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
   sideOffset: 4,
 })
+
 const emits = defineEmits<TooltipContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <TooltipPortal>
-    <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', $attrs.class ?? '')">
+    <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)">
       <slot />
     </TooltipContent>
   </TooltipPortal>
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
index f47721bd..f5b0e57f 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
@@ -5,7 +5,7 @@ const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-  <TooltipTrigger v-bind="props" class="">
+  <TooltipTrigger v-bind="props">
     <slot />
   </TooltipTrigger>
 </template>
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index efe8fe5b..d6b78da7 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -132,10 +132,7 @@
   },
   {
     "name": "carousel",
-    "dependencies": [
-      "embla-carousel-vue",
-      "embla-carousel"
-    ],
+    "dependencies": [],
     "registryDependencies": [
       "utils",
       "button"
@@ -275,7 +272,8 @@
       "zod"
     ],
     "registryDependencies": [
-      "utils"
+      "utils",
+      "label"
     ],
     "files": [
       "ui/form/FormControl.vue",
@@ -455,6 +453,8 @@
       "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",
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index 37d2eeb1..a9cc9e42 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"pb-4 pt-0\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"props\"\n    :class=\"cn('border-b', props.class ?? '')\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\" as=\"div\">\n    <AccordionTrigger\n      v-bind=\"props\"\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      <ChevronDown\n        class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index af4e23bf..eb365c4e 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -12,31 +12,31 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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 {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogDescription\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogTitle\n    :as-child=\"props.asChild\"\n    :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/alert.json b/apps/www/src/public/registry/styles/default/alert.json
index 2155bad8..7bc3f44c 100644
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ b/apps/www/src/public/registry/styles/default/alert.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n  class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: String,\n})\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n    <slot />\n  </h5>\n</template>\n"
+      "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 } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index 590f559d..a3be030c 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.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"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.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
index d94584f2..b964534b 100644
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ b/apps/www/src/public/registry/styles/default/badge.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n  variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\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 } 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"
+      "content": "import { type VariantProps, cva } 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/button.json b/apps/www/src/public/registry/styles/default/button.json
index ded45d7c..4a5fac91 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  as?: string\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 } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground 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-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground 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-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\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
index 72fc5187..d5fddf13 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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",
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
index b1c1ca0c..a9a8f43b 100644
--- a/apps/www/src/public/registry/styles/default/card.json
+++ b/apps/www/src/public/registry/styles/default/card.json
@@ -7,27 +7,27 @@
   "files": [
     {
       "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index dfcd4e20..f49cc2e0 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -1,9 +1,6 @@
 {
   "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "embla-carousel"
-  ],
+  "dependencies": [],
   "registryDependencies": [
     "utils",
     "button"
@@ -11,15 +8,15 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\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    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.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 v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\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    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.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 v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\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"
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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 { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\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"
+      "content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 80b1a66c..86d0a16e 100644
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ b/apps/www/src/public/registry/styles/default/checkbox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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         $attrs.class ?? '')\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <Check class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
index f2e586fd..39e79fca 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useEmitAsProps } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index d25e631c..8264aa4e 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -8,39 +8,39 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :open=\"true\"\n    :model-value=\"''\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n    <DialogContent class=\"p-0 overflow-hidden 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"
+      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\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 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps>()\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"props\" :class=\"cn('py-6 text-center text-sm', $attrs.class ?? '')\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string\n}>()\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n}\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=\"{ ...props, ...$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', $attrs.class ?? '')\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"{ ...props, ...emitsAsProps }\"\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', $attrs.class ?? '')\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps>()\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"props\"\n    :class=\"cn('-mx-1 h-px bg-border', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 0ed87d58..971bba3a 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -11,11 +11,11 @@
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      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  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator\n        class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n      >\n        <Check class=\"h-4 h-w\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"forwarded\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      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  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,15 +39,15 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"[\n      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  >\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -55,15 +55,15 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"props\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 76ff177f..f4b3b8c7 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -15,23 +15,23 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\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  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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 { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"props\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n  class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'text-lg text-foreground font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 01d3c940..44e56edf 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -11,11 +11,11 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"forwarded\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -23,27 +23,27 @@
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 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',\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 { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n  inset?: boolean\n  class?: string\n}>()\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(\n      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -51,15 +51,15 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 50d60bcb..5e61096e 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -6,7 +6,8 @@
     "zod"
   ],
   "registryDependencies": [
-    "utils"
+    "utils",
+    "label"
   ],
   "files": [
     {
@@ -15,15 +16,15 @@
     },
     {
       "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst { formDescriptionId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', className ?? '')\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </p>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\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\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide, useAttrs } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', className ?? '')\" v-bind=\"rest\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-left',\n      error && 'text-destructive',\n      className ?? '',\n    )\"\n    :for=\"formItemId\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/default/ui/label'\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",
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
index e178651c..bf4eb7dc 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwardedProps\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
index ae1e2ad9..7f500be6 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/apps/www/src/public/registry/styles/default/input.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index 1b1b058d..0cfedee1 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index f3fbd6df..c816fcbc 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',\n        props.class,\n      )\n    \"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <Check class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: string }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @select=\"emits('select', $event)\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -35,19 +35,19 @@
     },
     {
       "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n  <MenubarRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <Circle class=\"h-2 w-2 fill-curren\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -55,15 +55,15 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarSubContentProps & { class?: string }>(),\n  {\n    sideOffset: 2,\n    alignOffset: 0,\n  },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[8rem] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] 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 { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"props\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index 6517995b..32d828b7 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"props\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\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 {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      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  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"props\"\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', $attrs.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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -23,19 +23,19 @@
     },
     {
       "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center space-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-[1px] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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 {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          $attrs.class ?? '',\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
index e3a3fea4..6d25fc6f 100644
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -8,23 +8,23 @@
   "files": [
     {
       "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationLast v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationNext v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index e7e15493..916e0eab 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
index 20ab6d19..cd2edde9 100644
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ b/apps/www/src/public/registry/styles/default/progress.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: string }>(),\n  {\n    class: '',\n    modelValue: 0,\n  },\n)\n</script>\n\n<template>\n  <ProgressRoot\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n    v-bind=\"props\"\n  >\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full w-full flex-1 duration-300 bg-foreground transition-all',\n          props.class,\n        )\n      \"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
index 7d408e4e..beae81f5 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-current fill-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index 494c05bd..a717c4ea 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ScrollAreaRootProps & { class?: string }\n  >(),\n  {\n    class: '',\n    orientation: 'vertical',\n  },\n)\n</script>\n\n<template>\n  <ScrollAreaRoot :type=\"type\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\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 { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 border-t border-t-transparent p-[1px]',\n         $attrs.class ?? '')\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index 77a62ecb..d8df5cb7 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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 max-h-[--radix-popper-available-height]',\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      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[8rem] 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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-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 { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n    <slot />\n  </SelectGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
     },
     {
       "name": "SelectItemText.vue",
@@ -27,15 +27,23 @@
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 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]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
@@ -43,7 +51,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\n"
+      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.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
index 0b0b92a2..da6dd655 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-border', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\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=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index 161f4c42..33287e21 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\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",
@@ -15,23 +15,23 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: 'left' | 'right' | 'top' | 'bottom'\n  class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst 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 border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-border 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 border-border 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 border-border 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</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.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/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
index 2c0fd3ef..13be9875 100644
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ b/apps/www/src/public/registry/styles/default/skeleton.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index f939b86d..bc124110 100644
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ b/apps/www/src/public/registry/styles/default/slider.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb 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  </SliderRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb 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  </SliderRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index a59df47a..3b09a00e 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n        props.class,\n      )\n    \"\n  >\n    <SwitchThumb\n      :class=\"\n        cn(\n          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 data-[state=unchecked]:translate-x-0')\"\n    />\n  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
index fb0d4341..cd605e4f 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -7,39 +7,39 @@
   "files": [
     {
       "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div class=\"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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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 TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: string\n  colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  colspan: 1,\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      :colspan=\"props.colspan\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
index c6d9a76e..cc0e099d 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\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=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 h-10 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 { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"props\"\n    :class=\"\n      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  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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    <slot />\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 78d5ea2f..57c8fb8c 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\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-[80px] 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', $attrs.class ?? '')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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-[80px] 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",
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 353a9c03..7abff558 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script lang=\"ts\">\nimport type { ToastRootEmits, ToastRootProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\n\ninterface ToastVariantProps extends VariantProps<typeof toastVariants> {}\n\nexport interface ToastProps extends ToastRootProps {\n  class?: string\n  variant?: ToastVariantProps['variant']\n  'onOpenChange'?: ((value: boolean) => void) | undefined\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastRoot, useEmitAsProps } from 'radix-vue'\n\nimport { toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\nconst emits = defineEmits<ToastRootEmits>()\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(toastVariants({ variant: props.variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastAction v-bind=\"props\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ToastClose } from 'radix-vue'\nimport { XIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <ToastClose v-bind=\"props\" :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    <XIcon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"props\">\n    <slot />\n  </ToastDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -27,11 +27,11 @@
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastTitle v-bind=\"props\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastViewport v-bind=\"props\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,11 +39,11 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva } 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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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"
+      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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 { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from './Toast.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"
+      "content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\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
index 4cc43c6c..b0909535 100644
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ b/apps/www/src/public/registry/styles/default/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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.value, 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"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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.value)\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"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index a7d29b22..5ae5563a 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed, useAttrs } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, disabled, ...otherProps } = props\n  return otherProps\n})\n\nconst { class: className, ...rest } = useAttrs()\nconst forwarded = useForwardPropsEmits(toggleProps.value, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"{\n      ...forwarded,\n      ...rest,\n    }\"\n    :class=\"cn(toggleVariants({ variant, size }), className ?? '')\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { type ToggleVariants, toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\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 } 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"
+      "content": "import { type VariantProps, cva } 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
index 174df2e4..ab74ed0f 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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', $attrs.class ?? '')\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
index ecb5eb09..ecf40bab 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"pb-4 pt-0\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"props\"\n    :class=\"cn('border-b', props.class ?? '')\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\" as=\"div\">\n    <AccordionTrigger\n      v-bind=\"props\"\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      <ChevronDownIcon\n        class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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",
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
index 57a441a0..f79d3a78 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -12,31 +12,31 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\n\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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 {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogDescription\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogTitle\n    :as-child=\"props.asChild\"\n    :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/alert.json b/apps/www/src/public/registry/styles/new-york/alert.json
index be7bdcc0..43eaad08 100644
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ b/apps/www/src/public/registry/styles/new-york/alert.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n  class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: String,\n})\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n    <slot />\n  </h5>\n</template>\n"
+      "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 } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
index 47a50076..a3be030c 100644
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ b/apps/www/src/public/registry/styles/new-york/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\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",
@@ -15,11 +15,11 @@
     },
     {
       "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full aspect-square\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\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 } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-muted 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"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.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
index 53f363b9..1057abff 100644
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ b/apps/www/src/public/registry/styles/new-york/badge.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n  variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\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 } 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"
+      "content": "import { type VariantProps, cva } 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/button.json b/apps/www/src/public/registry/styles/new-york/button.json
index 1856324a..28daef14 100644
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ b/apps/www/src/public/registry/styles/new-york/button.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariantProps['variant']\n  size?: ButtonVariantProps['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  as?: string\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 } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md whitespace-nowrap 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',\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-transparent 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"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center 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',\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        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/card.json b/apps/www/src/public/registry/styles/new-york/card.json
index ebf6a3c7..b2ccbb05 100644
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ b/apps/www/src/public/registry/styles/new-york/card.json
@@ -7,27 +7,27 @@
   "files": [
     {
       "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\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"
+      "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",
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index 749e2788..530ca629 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -1,9 +1,6 @@
 {
   "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "embla-carousel"
-  ],
+  "dependencies": [],
   "registryDependencies": [
     "utils",
     "button"
@@ -11,7 +8,7 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\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    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.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 v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\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    carouselArgs.scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    carouselArgs.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 v-bind=\"carouselArgs\" />\n  </div>\n</template>\n"
     },
     {
       "name": "CarouselContent.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
index 0f59f148..35fa7f1d 100644
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/src/public/registry/styles/new-york/checkbox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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         $attrs.class ?? '')\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <CheckIcon class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
index f2e586fd..39e79fca 100644
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/src/public/registry/styles/new-york/collapsible.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useEmitAsProps } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index cc68699a..bf2d343b 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -8,39 +8,39 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :open=\"true\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\nimport { useEmitAsProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\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"
+      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\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 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps>()\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"props\" :class=\"cn('py-6 text-center text-sm', $attrs.class ?? '')\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string\n}>()\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n}\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=\"{ ...props, ...$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', $attrs.class ?? '')\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"{ ...props, ...emitsAsProps }\"\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', $attrs.class ?? '')\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps>()\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"props\"\n    :class=\"cn('-mx-1 h-px bg-border', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
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
index aef71c40..bc2cc5e2 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -11,11 +11,11 @@
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      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  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator\n        class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n      >\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"forwarded\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      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  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,15 +39,15 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"[\n      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  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -55,15 +55,15 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"props\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index cb379fd1..254ba0bd 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -15,23 +15,23 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\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  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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 { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"props\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n  class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'text-lg text-foreground font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
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
index 60dc289a..7ad3075b 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -11,11 +11,11 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"forwarded\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -23,27 +23,27 @@
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 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',\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 { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n  inset?: boolean\n  class?: string\n}>()\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(\n      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -51,15 +51,15 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index db6c31fa..2c69a3a5 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -6,7 +6,8 @@
     "zod"
   ],
   "registryDependencies": [
-    "utils"
+    "utils",
+    "label"
   ],
   "files": [
     {
@@ -15,15 +16,15 @@
     },
     {
       "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </p>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\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\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-left',\n      error && 'text-destructive',\n      $attrs.class ?? '',\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/new-york/ui/label'\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",
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
index e178651c..bf4eb7dc 100644
--- a/apps/www/src/public/registry/styles/new-york/hover-card.json
+++ b/apps/www/src/public/registry/styles/new-york/hover-card.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwardedProps\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/input.json b/apps/www/src/public/registry/styles/new-york/input.json
index fb565151..7b840496 100644
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ b/apps/www/src/public/registry/styles/new-york/input.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
index 1b1b058d..0cfedee1 100644
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ b/apps/www/src/public/registry/styles/new-york/label.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 813c3234..82c536df 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"props\"\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    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <CheckIcon class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: string }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @select=\"emits('select', $event)\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -35,19 +35,19 @@
     },
     {
       "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n  <MenubarRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      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    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('text-xs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+      "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",
@@ -55,15 +55,15 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarSubContentProps & { class?: string }>(),\n  {\n    sideOffset: 2,\n    alignOffset: 0,\n  },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[8rem] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      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  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"props\"\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
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
index 2fedbded..22142536 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"props\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\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 {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      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  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"props\"\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', $attrs.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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -23,19 +23,19 @@
     },
     {
       "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\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 { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center space-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-[1px] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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-[1px] 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 {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          $attrs.class ?? '',\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[var(--radix-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-[var(--radix-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
index cf1cb0e3..e07f0b04 100644
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -8,23 +8,23 @@
   "files": [
     {
       "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationLast v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationNext v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/popover.json b/apps/www/src/public/registry/styles/new-york/popover.json
index 836490dc..034bb416 100644
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ b/apps/www/src/public/registry/styles/new-york/popover.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\" class=\"\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\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 PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
+      "content": "export { PopoverAnchor } from 'radix-vue'\nexport { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\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
index cec0555e..03f8fe71 100644
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ b/apps/www/src/public/registry/styles/new-york/progress.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: string }>(),\n  {\n    class: '',\n    modelValue: 0,\n  },\n)\n</script>\n\n<template>\n  <ProgressRoot\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n    v-bind=\"props\"\n  >\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full w-full flex-1 bg-primary transition-all',\n          props.class,\n        )\n      \"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
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
index 30c51702..1a38f59a 100644
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/src/public/registry/styles/new-york/radio-group.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\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\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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",
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
index 494c05bd..a717c4ea 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ScrollAreaRootProps & { class?: string }\n  >(),\n  {\n    class: '',\n    orientation: 'vertical',\n  },\n)\n</script>\n\n<template>\n  <ScrollAreaRoot :type=\"type\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\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 { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 border-t border-t-transparent p-[1px]',\n         $attrs.class ?? '')\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index d3dad40a..a17cfb57 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n    avoidCollisions: true,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[8rem] 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 max-h-[--radix-popper-available-height]',\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      <SelectViewport\n        :class=\"\n          cn('p-0',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[8rem] 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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-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 { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n    <slot />\n  </SelectGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\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        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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",
@@ -27,15 +27,23 @@
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
@@ -43,7 +51,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\n"
+      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.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
index 0b0b92a2..da6dd655 100644
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ b/apps/www/src/public/registry/styles/new-york/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-border', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\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=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index 8888b5fe..215d8f67 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\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",
@@ -15,23 +15,23 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: 'left' | 'right' | 'top' | 'bottom'\n  class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst 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 border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-border 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 border-border 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 border-border 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</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\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 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "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 { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.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/skeleton.json b/apps/www/src/public/registry/styles/new-york/skeleton.json
index 2c0fd3ef..1487c9e2 100644
--- a/apps/www/src/public/registry/styles/new-york/skeleton.json
+++ b/apps/www/src/public/registry/styles/new-york/skeleton.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/new-york/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
index 3efa0554..0b6e4bc8 100644
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ b/apps/www/src/public/registry/styles/new-york/slider.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index e664dfa6..7cc55c5b 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n        props.class,\n      )\n    \"\n  >\n    <SwitchThumb\n      :class=\"\n        cn(\n          '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      \"\n    />\n  </SwitchRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index efaf66a6..6ad9f35f 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -7,39 +7,39 @@
   "files": [
     {
       "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div class=\"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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
+      "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-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
     },
     {
       "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: string\n  colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  colspan: 1,\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      :colspan=\"props.colspan\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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-[2px]', props.class)\">\n    <slot />\n  </th>\n</template>\n"
+      "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-[2px]', props.class)\">\n    <slot />\n  </th>\n</template>\n"
     },
     {
       "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
+      "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 { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\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"
+      "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",
diff --git a/apps/www/src/public/registry/styles/new-york/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
index 09817a44..f238ee00 100644
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ b/apps/www/src/public/registry/styles/new-york/tabs.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\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=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 h-9 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 { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"props\"\n    :class=\"\n      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  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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    <slot />\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/textarea.json b/apps/www/src/public/registry/styles/new-york/textarea.json
index 1f8441be..40b5b596 100644
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ b/apps/www/src/public/registry/styles/new-york/textarea.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\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', $attrs.class ?? '')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index 063937ae..a0c0fee5 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script lang=\"ts\">\nimport type { ToastRootEmits, ToastRootProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\n\ninterface ToastVariantProps extends VariantProps<typeof toastVariants> {}\n\nexport interface ToastProps extends ToastRootProps {\n  class?: string\n  variant?: ToastVariantProps['variant']\n  'onOpenChange'?: ((value: boolean) => void) | undefined\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastRoot, useEmitAsProps } from 'radix-vue'\n\nimport { toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\nconst emits = defineEmits<ToastRootEmits>()\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(toastVariants({ variant: props.variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\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 { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastAction v-bind=\"props\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ToastClose } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"props\">\n    <slot />\n  </ToastDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -27,11 +27,11 @@
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastTitle v-bind=\"props\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: string }>()\n</script>\n\n<template>\n  <ToastViewport v-bind=\"props\" :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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -39,11 +39,11 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva } 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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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"
+      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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 { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from './Toast.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"
+      "content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\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
index 37473576..c1e79760 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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.value, 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"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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.value)\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"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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",
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
index 8098dc59..4ccde5ca 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed, useAttrs } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, disabled, ...otherProps } = props\n  return otherProps\n})\n\nconst { class: className, ...rest } = useAttrs()\nconst forwarded = useForwardPropsEmits(toggleProps.value, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"{\n      ...forwarded,\n      ...rest,\n    }\"\n    :class=\"cn(toggleVariants({ variant, size }), className ?? '')\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { type ToggleVariants, toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\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 } 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"
+      "content": "import { type VariantProps, cva } 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
index 317a169d..975435fe 100644
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/src/public/registry/styles/new-york/tooltip.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, 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', $attrs.class ?? '')\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\" class=\"\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\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",
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index b6fb15c1..2cfff6f8 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -3,7 +3,7 @@ import tailwindcssAnimate from 'tailwindcss-animate'
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: 'class',
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     container: {
       center: true,
diff --git a/package.json b/package.json
index 46bf4963..30d43952 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "shadcn-vue",
   "version": "0.8.7",
   "private": true,
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.1",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e227bc8e..c42dfad8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,17 +57,17 @@ importers:
         specifier: ^1.9.0
         version: 1.9.0
       '@tanstack/vue-table':
-        specifier: ^8.11.7
-        version: 8.11.7(vue@3.4.15)
+        specifier: ^8.11.8
+        version: 8.11.8(vue@3.4.15)
       '@unovis/ts':
-        specifier: ^1.3.1
-        version: 1.3.1
+        specifier: ^1.3.3
+        version: 1.3.3
       '@unovis/vue':
-        specifier: ^1.3.1
-        version: 1.3.1(@unovis/ts@1.3.1)(vue@3.4.15)
+        specifier: ^1.3.3
+        version: 1.3.3(@unovis/ts@1.3.3)(vue@3.4.15)
       '@vee-validate/zod':
-        specifier: ^4.12.4
-        version: 4.12.4(vue@3.4.15)
+        specifier: ^4.12.5
+        version: 4.12.5(vue@3.4.15)
       '@vueuse/core':
         specifier: ^10.7.2
         version: 10.7.2(vue@3.4.15)
@@ -84,20 +84,20 @@ importers:
         specifier: ^2.30.0
         version: 2.30.0
       embla-carousel:
-        specifier: 8.0.0-rc19
-        version: 8.0.0-rc19
+        specifier: ^8.0.0-rc22
+        version: 8.0.0-rc22
       embla-carousel-autoplay:
-        specifier: 8.0.0-rc19
-        version: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
+        specifier: ^8.0.0-rc22
+        version: 8.0.0-rc22(embla-carousel@8.0.0-rc22)
       embla-carousel-vue:
-        specifier: 8.0.0-rc19
-        version: 8.0.0-rc19(vue@3.4.15)
+        specifier: ^8.0.0-rc22
+        version: 8.0.0-rc22(vue@3.4.15)
       lucide-vue-next:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.4.15)
       radix-vue:
-        specifier: ^1.3.2
-        version: 1.3.2(vue@3.4.15)
+        specifier: ^1.4.0
+        version: 1.4.0(vue@3.4.15)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
@@ -105,14 +105,14 @@ importers:
         specifier: ^3.1.2
         version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.15)
       vee-validate:
-        specifier: 4.12.4
-        version: 4.12.4(vue@3.4.15)
+        specifier: 4.12.5
+        version: 4.12.5(vue@3.4.15)
       vue:
         specifier: ^3.4.15
         version: 3.4.15(typescript@5.3.3)
       vue-sonner:
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: ^1.0.3
+        version: 1.0.3
       vue-wrap-balancer:
         specifier: ^1.1.3
         version: 1.1.3(vue@3.4.15)
@@ -132,6 +132,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.1
         version: 4.1.1(vue@3.4.15)
+      '@shikijs/transformers':
+        specifier: ^1.0.0-beta.3
+        version: 1.0.0-beta.3
       '@types/lodash.template':
         specifier: ^4.5.2
         version: 4.5.2
@@ -145,17 +148,17 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0(vite@5.0.12)(vue@3.4.15)
       '@vue/compiler-core':
-        specifier: ^3.4.14
-        version: 3.4.14
+        specifier: ^3.4.15
+        version: 3.4.15
       '@vue/compiler-dom':
-        specifier: ^3.4.14
-        version: 3.4.14
+        specifier: ^3.4.15
+        version: 3.4.15
       '@vue/tsconfig':
         specifier: ^0.5.1
         version: 0.5.1
       autoprefixer:
-        specifier: ^10.4.16
-        version: 10.4.16(postcss@8.4.33)
+        specifier: ^10.4.17
+        version: 10.4.17(postcss@8.4.33)
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
@@ -165,15 +168,12 @@ importers:
       rimraf:
         specifier: ^5.0.5
         version: 5.0.5
-      shikiji:
-        specifier: ^0.10.0-beta.9
-        version: 0.10.0-beta.9
-      shikiji-transformers:
-        specifier: ^0.10.0-beta.9
-        version: 0.10.0-beta.9
+      shiki:
+        specifier: ^1.0.0-beta.3
+        version: 1.0.0-beta.3
       tailwind-merge:
-        specifier: ^2.2.0
-        version: 2.2.0
+        specifier: ^2.2.1
+        version: 2.2.1
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.1(ts-node@10.9.1)
@@ -184,14 +184,14 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
       unplugin-icons:
-        specifier: ^0.17.1
-        version: 0.17.1
+        specifier: ^0.18.3
+        version: 0.18.3
       vite:
         specifier: ^5.0.12
         version: 5.0.12(@types/node@20.8.10)
       vitepress:
-        specifier: ^1.0.0-rc.39
-        version: 1.0.0-rc.39(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
+        specifier: ^1.0.0-rc.41
+        version: 1.0.0-rc.41(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -629,6 +629,12 @@ packages:
       find-up: 5.0.0
     dev: true
 
+  /@antfu/install-pkg@0.3.1:
+    resolution: {integrity: sha512-A3zWY9VeTPnxlMiZtsGHw2lSd3ghwvL8s9RiGOtqvDxhhFfZ781ynsGBa/iUnDJ5zBrmTFQrJDud3TGgRISaxw==}
+    dependencies:
+      execa: 8.0.1
+    dev: true
+
   /@antfu/ni@0.21.8:
     resolution: {integrity: sha512-90X8pU2szlvw0AJo9EZMbYc2eQKkmO7mAdC4tD4r5co2Mm56MT37MIG8EyB7p4WRheuzGxuLDxJ63mF6+Zajiw==}
     hasBin: true
@@ -1131,7 +1137,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.0
-    dev: true
 
   /@babel/standalone@7.23.1:
     resolution: {integrity: sha512-a4muOYz1qUaSoybuUKwK90mRG4sf5rBeUbuzpuGLzG32ZDE/Y2YEebHDODFJN+BtyOKi19hrLfq2qbNyKMx0TA==}
@@ -1423,7 +1428,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.8
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.2
@@ -2393,6 +2398,12 @@ packages:
       '@floating-ui/utils': 0.1.4
     dev: false
 
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
     dependencies:
@@ -2400,10 +2411,21 @@ packages:
       '@floating-ui/utils': 0.1.4
     dev: false
 
+  /@floating-ui/dom@1.6.1:
+    resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/utils@0.1.4:
     resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
     dev: false
 
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
   /@floating-ui/vue@1.0.2(vue@3.4.15):
     resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
     dependencies:
@@ -2414,6 +2436,17 @@ packages:
       - vue
     dev: false
 
+  /@floating-ui/vue@1.0.6(vue@3.4.15):
+    resolution: {integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==}
+    dependencies:
+      '@floating-ui/dom': 1.6.1
+      '@floating-ui/utils': 0.2.1
+      vue-demi: 0.14.6(vue@3.4.15)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@formkit/auto-animate@0.8.1:
     resolution: {integrity: sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig==}
     dev: false
@@ -2461,15 +2494,15 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.11:
-    resolution: {integrity: sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==}
+  /@iconify/utils@2.1.20:
+    resolution: {integrity: sha512-t8TeKlYK/5i9yTY9VAGAE4P0qQHd/0vH+VSRO+bdpxlt8wqB6f2I0/IrciRsdeFZPMoL8IICgP7lgl2ZtbG8Tw==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.6
       '@iconify/types': 2.0.0
       debug: 4.3.4
       kolorist: 1.8.0
-      local-pkg: 0.4.3
+      local-pkg: 0.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3136,7 +3169,7 @@ packages:
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
       '@vitejs/plugin-vue': 4.5.0(vite@4.5.1)(vue@3.4.15)
       '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.5.1)(vue@3.4.15)
-      autoprefixer: 10.4.16(postcss@8.4.33)
+      autoprefixer: 10.4.17(postcss@8.4.33)
       clear: 0.1.0
       consola: 3.2.3
       cssnano: 6.0.1(postcss@8.4.33)
@@ -3759,6 +3792,16 @@ packages:
     resolution: {integrity: sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==}
     dev: true
 
+  /@shikijs/core@1.0.0-beta.3:
+    resolution: {integrity: sha512-SCwPom2Wn8XxNlEeqdzycU93SKgzYeVsedjqDsgZaz4XiiPpZUzlHt2NAEQTwTnPcHNZapZ6vbkwJ8P11ggL3Q==}
+    dev: true
+
+  /@shikijs/transformers@1.0.0-beta.3:
+    resolution: {integrity: sha512-ASQQQqxW4dANxMGw4yGkTjtMSsUaRhImv/lzJEdfJ3/eP8TVlVYnohOFQVgpLjBBYGy9P0l0oKrlbjiGosTJ/Q==}
+    dependencies:
+      shiki: 1.0.0-beta.3
+    dev: true
+
   /@sigstore/bundle@2.1.0:
     resolution: {integrity: sha512-89uOo6yh/oxaU8AeOUnVrTdVMcGk9Q1hJa7Hkvalc6G3Z3CupWk4Xe9djSgJm9fMkH69s0P0cVHUoKSOemLdng==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3832,18 +3875,18 @@ packages:
       - supports-color
     dev: true
 
-  /@tanstack/table-core@8.11.7:
-    resolution: {integrity: sha512-N3ksnkbPbsF3PjubuZCB/etTqvctpXWRHIXTmYfJFnhynQKjeZu8BCuHvdlLPpumKbA+bjY4Ay9AELYLOXPWBg==}
+  /@tanstack/table-core@8.11.8:
+    resolution: {integrity: sha512-DECHvtq4YW4U/gqg6etup7ydt/RB1Bi1pJaMpHUXl65ooW1d71Nv7BzD66rUdHrBSNdyiW3PLTPUQlpXjAgDeA==}
     engines: {node: '>=12'}
     dev: false
 
-  /@tanstack/vue-table@8.11.7(vue@3.4.15):
-    resolution: {integrity: sha512-uNAuthA5+6pd5Vfw0brm6E++mxAfLrzsuz/MPXOY5rtGowCu3TPsyVcaMExYMrAKEBJJsUVp4zKtzC/UdCbTtw==}
+  /@tanstack/vue-table@8.11.8(vue@3.4.15):
+    resolution: {integrity: sha512-soIgSJNgFJ9520mExVw1LfcMi/ubNQc31BuZCyh0qsZSZUxbZt95aXkq8xDM7al+GH8OGz9wvE2nVP2gEAzNIQ==}
     engines: {node: '>=12'}
     peerDependencies:
       vue: ^3.2.33
     dependencies:
-      '@tanstack/table-core': 8.11.7
+      '@tanstack/table-core': 8.11.8
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
@@ -4705,8 +4748,8 @@ packages:
       lodash-es: 4.17.21
     dev: false
 
-  /@unovis/ts@1.3.1:
-    resolution: {integrity: sha512-a+smFbUgTtqH2IYjfTNSC7mDaxX40Mvc6ZH6HZ5fXXZ5YLbdu821/QIh4oWTsQBFB4804rsK/vXX/lhK4pEv6g==}
+  /@unovis/ts@1.3.3:
+    resolution: {integrity: sha512-eHCDsymslgxeKCwG05KjziJLVWzMunwvaZW3sAUNkK8b8epI4U5Lc+6rvR5bggNNrzAJTlerrEbJ88yDPGvzCA==}
     dependencies:
       '@emotion/css': 11.11.2
       '@juggle/resize-observer': 3.4.0
@@ -4742,21 +4785,21 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@unovis/vue@1.3.1(@unovis/ts@1.3.1)(vue@3.4.15):
-    resolution: {integrity: sha512-SqtK7hTpLJgSWg+8OMDpjf/X1lPWsMY0xfiMEeq/7+70Lka99G/hQrk7IaJBapcZpinZa6gNa8xfnjyfNHesKw==}
+  /@unovis/vue@1.3.3(@unovis/ts@1.3.3)(vue@3.4.15):
+    resolution: {integrity: sha512-q+F92sPY/LBYmuC36zaoMoVf2nsgydcZh3KqiQVchu839kOwjAfjzwdY73FSTkBjcyGxSAvbRGgkQIlmf/OTOw==}
     peerDependencies:
       '@unovis/ts': 1.2.1
       vue: ^3
     dependencies:
-      '@unovis/ts': 1.3.1
+      '@unovis/ts': 1.3.3
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /@vee-validate/zod@4.12.4(vue@3.4.15):
-    resolution: {integrity: sha512-iNFhkBfGkre2b+eBXgBpNlNVStxDrI59sJUbzBr01EjyTkFOUgc/0wPJrhY/kBp+0pnGzNi04jklJaKfNK2ibg==}
+  /@vee-validate/zod@4.12.5(vue@3.4.15):
+    resolution: {integrity: sha512-hUjvXaa4HHvlZeosucViIDOUikQmyKaXXuL6P8LR1ETOUrBV6ntTsafJGvRYtwhXosoLYuolUD6Km737okK4Gg==}
     dependencies:
       type-fest: 4.8.3
-      vee-validate: 4.12.4(vue@3.4.15)
+      vee-validate: 4.12.5(vue@3.4.15)
       zod: 3.22.4
     transitivePeerDependencies:
       - vue
@@ -5007,15 +5050,6 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
-  /@vue/compiler-core@3.4.14:
-    resolution: {integrity: sha512-ro4Zzl/MPdWs7XwxT7omHRxAjMbDFRZEEjD+2m3NBf8YzAe3HuoSEZosXQo+m1GQ1G3LQ1LdmNh1RKTYe+ssEg==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/shared': 3.4.14
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-
   /@vue/compiler-core@3.4.15:
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
     dependencies:
@@ -5042,12 +5076,6 @@ packages:
       '@vue/shared': 3.3.7
     dev: false
 
-  /@vue/compiler-dom@3.4.14:
-    resolution: {integrity: sha512-nOZTY+veWNa0DKAceNWxorAbWm0INHdQq7cejFaWM1WYnoNSJbSEKYtE7Ir6lR/+mo9fttZpPVI9ZFGJ1juUEQ==}
-    dependencies:
-      '@vue/compiler-core': 3.4.14
-      '@vue/shared': 3.4.14
-
   /@vue/compiler-dom@3.4.15:
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
     dependencies:
@@ -5126,6 +5154,33 @@ packages:
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
+  /@vue/devtools-api@7.0.14:
+    resolution: {integrity: sha512-TluWR9qZ6aO11bwtYK8+fzXxBqLfsE0mWZz1q/EQBmO9k82Cm6deieLwNNXjNFJz7xutazoia5Qa+zTYkPPOfw==}
+    dependencies:
+      '@vue/devtools-kit': 7.0.14
+    dev: true
+
+  /@vue/devtools-kit@7.0.14:
+    resolution: {integrity: sha512-wAAJazr4hI0aVRpgWOCVPw+NzMQdthhnprHHIg4njp1MkKrpCNGQ7MtQbZF1AltAA7xpMCGyyt+0kYH0FqTiPg==}
+    dependencies:
+      '@vue/devtools-schema': 7.0.14
+      '@vue/devtools-shared': 7.0.14
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+    dev: true
+
+  /@vue/devtools-schema@7.0.14:
+    resolution: {integrity: sha512-tpUeCLVrdHX+KzWMLTAwx/vAPFbo6jAUi7sr6Q+0mBIqIVSSIxNr5wEhegiFvYva+OtDeM2OrT+f7/X/5bvZNg==}
+    dev: true
+
+  /@vue/devtools-shared@7.0.14:
+    resolution: {integrity: sha512-79RP1NDakBVWou9rDpVnT1WMjTbL1lJKm6YEOodjQ0dq5ehf0wsRbeYDhgAlnjehWRzTq5GAYFBFUPYBs0/QpA==}
+    dependencies:
+      rfdc: 1.3.1
+    dev: true
+
   /@vue/language-core@1.8.27(typescript@5.3.3):
     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
     peerDependencies:
@@ -5136,8 +5191,8 @@ packages:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.14
-      '@vue/shared': 3.4.8
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
       computeds: 0.0.1
       minimatch: 9.0.3
       muggle-string: 0.3.1
@@ -5191,9 +5246,6 @@ packages:
     resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
     dev: true
 
-  /@vue/shared@3.4.14:
-    resolution: {integrity: sha512-nmi3BtLpvqXAWoRZ6HQ+pFJOHBU4UnH3vD3opgmwXac7vhaHKA9nj1VeGjMggdB9eLtW83eHyPCmOU1qzdsC7Q==}
-
   /@vue/shared@3.4.15:
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
 
@@ -5208,7 +5260,7 @@ packages:
   /@vuedx/compiler-sfc@0.7.1:
     resolution: {integrity: sha512-M+j3COLqmTFgtsDOJEeeijUFCk7FF8x7vQsdORPPxipZF1S2vPvlcLg1bKVE6NF4wh7Gaq9Wvwv0zPi87pWRVA==}
     dependencies:
-      '@vue/compiler-core': 3.4.14
+      '@vue/compiler-core': 3.4.15
       lru-cache: 6.0.0
       source-map: 0.6.1
     dev: false
@@ -5216,7 +5268,7 @@ packages:
   /@vuedx/template-ast-types@0.7.1:
     resolution: {integrity: sha512-Mqugk/F0lFN2u9bhimH6G1kSu2hhLi2WoqgCVxrMvgxm2kDc30DtdvVGRq+UgEmKVP61OudcMtZqkUoGQeFBUQ==}
     dependencies:
-      '@vue/compiler-core': 3.4.14
+      '@vue/compiler-core': 3.4.15
     dev: false
 
   /@vueuse/core@10.7.2(vue@3.4.15):
@@ -5638,16 +5690,16 @@ packages:
     resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
     dev: true
 
-  /autoprefixer@10.4.16(postcss@8.4.33):
-    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
+  /autoprefixer@10.4.17(postcss@8.4.33):
+    resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.22.0
-      caniuse-lite: 1.0.30001540
-      fraction.js: 4.3.6
+      browserslist: 4.22.2
+      caniuse-lite: 1.0.30001583
+      fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
       postcss: 8.4.33
@@ -5677,7 +5729,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.8
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
@@ -5787,7 +5839,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001576
+      caniuse-lite: 1.0.30001583
       electron-to-chromium: 1.4.628
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
@@ -6043,7 +6095,7 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.22.2
-      caniuse-lite: 1.0.30001540
+      caniuse-lite: 1.0.30001576
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
@@ -6055,6 +6107,10 @@ packages:
     resolution: {integrity: sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==}
     dev: true
 
+  /caniuse-lite@1.0.30001583:
+    resolution: {integrity: sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==}
+    dev: true
+
   /capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
     engines: {node: '>=0.10.0'}
@@ -7189,7 +7245,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.0
       '@babel/preset-typescript': 7.23.2(@babel/core@7.23.0)
-      '@vue/compiler-dom': 3.4.14
+      '@vue/compiler-dom': 3.4.15
       '@vue/compiler-sfc': 3.3.7
       '@vuedx/compiler-sfc': 0.7.1
       '@vuedx/template-ast-types': 0.7.1
@@ -7342,34 +7398,34 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
-  /embla-carousel-autoplay@8.0.0-rc19(embla-carousel@8.0.0-rc19):
-    resolution: {integrity: sha512-c1pxsGHuWbYD3outH5y4L+kzg15smyHKFIDmXLaXlI6rCiizzf6hWMW0ZgxJLV4y4nUwDrYhM6TtzxvvOcsfUw==}
+  /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
+    resolution: {integrity: sha512-UFR9ocKapxuYwcAOv8mb6Rmy7TENpzzHTymKADzB1L5dAJJxjUtOci/OpE3KrZedQaniLMz3HIO9hHqgj1h/3w==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc19
+      embla-carousel: 8.0.0-rc22
     dependencies:
-      embla-carousel: 8.0.0-rc19
+      embla-carousel: 8.0.0-rc22
     dev: false
 
-  /embla-carousel-reactive-utils@8.0.0-rc19(embla-carousel@8.0.0-rc19):
-    resolution: {integrity: sha512-ed9NppY0OxTtrSIwTCYNcMLlQfSNcNy8Zsw8uIG0te3qrhvQ2ePPsbcElK2SRAV8VMU6G7JQweQIb6amzYMDXA==}
+  /embla-carousel-reactive-utils@8.0.0-rc22(embla-carousel@8.0.0-rc22):
+    resolution: {integrity: sha512-K4b8QhQGXYW5wr4l+U6XryhafsFV5c/IyohDnZN3MGoYIB9xY7qpjUWAcs5bTDjAD+qCZPOuXre0D3IVa28mqw==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc19
+      embla-carousel: 8.0.0-rc22
     dependencies:
-      embla-carousel: 8.0.0-rc19
+      embla-carousel: 8.0.0-rc22
     dev: false
 
-  /embla-carousel-vue@8.0.0-rc19(vue@3.4.15):
-    resolution: {integrity: sha512-dqkmatB7/WNXHEwFGtQNpYT8TWnE6KRcVBfnPTswBba8I33RdBRuj0CqRHem02dlIS1ySgS9sBVVdDXe+6IGKQ==}
+  /embla-carousel-vue@8.0.0-rc22(vue@3.4.15):
+    resolution: {integrity: sha512-QTMZ/q987KNc8yCSHs+q8hVa/c65yD/m04vHY5BkU5yqLTAde0jmisNVRAZhiLKin5U7CJKkd+vVIZvQIfBggQ==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
-      embla-carousel: 8.0.0-rc19
-      embla-carousel-reactive-utils: 8.0.0-rc19(embla-carousel@8.0.0-rc19)
+      embla-carousel: 8.0.0-rc22
+      embla-carousel-reactive-utils: 8.0.0-rc22(embla-carousel@8.0.0-rc22)
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /embla-carousel@8.0.0-rc19:
-    resolution: {integrity: sha512-PAChVyYoVZo8subkBN8LjZ7+0vk4CmVvMnxH0Y2ux76VUEUBl1wk5xDo8+MUhH5MXU6ZrgkBpMe++bKob1Z+2g==}
+  /embla-carousel@8.0.0-rc22:
+    resolution: {integrity: sha512-MeXnPT1LShfgAu8qXj3CskayV0R6OkHx7w3cPTx+Q5ZWKyShKpIuu7qVQJ5BoFegalE4n6yxqoQaRuGFbK9pYw==}
     dev: false
 
   /emoji-regex@10.2.1:
@@ -8356,8 +8412,8 @@ packages:
       fetch-blob: 3.2.0
     dev: false
 
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
+  /fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
   /fresh@0.5.2:
@@ -10339,6 +10395,10 @@ packages:
       through2: 2.0.5
     dev: false
 
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: true
+
   /mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -10369,7 +10429,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      autoprefixer: 10.4.16(postcss@8.4.33)
+      autoprefixer: 10.4.17(postcss@8.4.33)
       citty: 0.1.5
       cssnano: 6.0.1(postcss@8.4.33)
       defu: 6.1.3
@@ -11477,7 +11537,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.4.33
@@ -11490,7 +11550,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
@@ -11591,7 +11651,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       caniuse-api: 3.0.0
       cssnano-utils: 4.0.0(postcss@8.4.33)
       postcss: 8.4.33
@@ -11626,7 +11686,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       cssnano-utils: 4.0.0(postcss@8.4.33)
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
@@ -11716,7 +11776,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
@@ -11758,7 +11818,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       caniuse-api: 3.0.0
       postcss: 8.4.33
     dev: true
@@ -11982,11 +12042,11 @@ packages:
       - vue
     dev: false
 
-  /radix-vue@1.3.2(vue@3.4.15):
-    resolution: {integrity: sha512-XhY1Cs6AvRgb1DvTisrY4XfX4aLWj9S1u/u/NCqOjfEHYaJsZ61Fbo66xB5EC22TV258Eu4njYI2CBpwV0dVxg==}
+  /radix-vue@1.4.0(vue@3.4.15):
+    resolution: {integrity: sha512-KqG1Ed7/LL+9yh+VBPLZgWCkblBjGEo/AueMLD/g6Sx0Wb7ZAvfXPUSVTriVRj3IczMZecgleiLnVOEfwM2AXg==}
     dependencies:
-      '@floating-ui/dom': 1.5.3
-      '@floating-ui/vue': 1.0.2(vue@3.4.15)
+      '@floating-ui/dom': 1.6.1
+      '@floating-ui/vue': 1.0.6(vue@3.4.15)
       fast-deep-equal: 3.1.3
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -12260,6 +12320,10 @@ packages:
     resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
     dev: true
 
+  /rfdc@1.3.1:
+    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
+    dev: true
+
   /rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
     hasBin: true
@@ -12526,36 +12590,10 @@ packages:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
-  /shikiji-core@0.10.0-beta.9:
-    resolution: {integrity: sha512-7dgwTyN9PeKyc4KJeyKo/qW8gi8XbR//c1CO+0B5GaeozWexNTpEL/tSohyIKkj0Z+7spfm2REmAaS39NlC4Lw==}
-    dev: true
-
-  /shikiji-core@0.9.19:
-    resolution: {integrity: sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw==}
-    dev: true
-
-  /shikiji-transformers@0.10.0-beta.9:
-    resolution: {integrity: sha512-giqkVspbFtl7wwX1k/wcz+MKEHFlfEAxAkk+d7hU3XfPeLf38TTbTH0zEzr2cPfCZNnL6AN1uRkMnbDchjhKMw==}
+  /shiki@1.0.0-beta.3:
+    resolution: {integrity: sha512-z7cHTNSSvwGx2DfeLwjSNLo+HcVxifgNIzLm6Ye52eXcIwNHXT0wHbhy7FDOKSKveuEHBwt9opfj3Hoc8LE1Yg==}
     dependencies:
-      shikiji: 0.10.0-beta.9
-    dev: true
-
-  /shikiji-transformers@0.9.19:
-    resolution: {integrity: sha512-lGLI7Z8frQrIBbhZ74/eiJtxMoCQRbpaHEB+gcfvdIy+ZFaAtXncJGnc52932/UET+Y4GyKtwwC/vjWUCp+c/Q==}
-    dependencies:
-      shikiji: 0.9.19
-    dev: true
-
-  /shikiji@0.10.0-beta.9:
-    resolution: {integrity: sha512-I+sv642n9M7/FK/dVcXp9vMv7v5Wa8gU2UuKwkIWKQFvyo+qKB8eV1zNNtRYas+jC7BLwdAaflc5BFUozAonFQ==}
-    dependencies:
-      shikiji-core: 0.10.0-beta.9
-    dev: true
-
-  /shikiji@0.9.19:
-    resolution: {integrity: sha512-Kw2NHWktdcdypCj1GkKpXH4o6Vxz8B8TykPlPuLHOGSV8VkhoCLcFOH4k19K4LXAQYRQmxg+0X/eM+m2sLhAkg==}
-    dependencies:
-      shikiji-core: 0.9.19
+      '@shikijs/core': 1.0.0-beta.3
     dev: true
 
   /shortid@2.2.16:
@@ -12747,6 +12785,11 @@ packages:
   /spdx-license-ids@3.0.15:
     resolution: {integrity: sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ==}
 
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /split2@3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
     dependencies:
@@ -12945,7 +12988,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.2
       postcss: 8.4.33
       postcss-selector-parser: 6.0.13
     dev: true
@@ -13017,8 +13060,8 @@ packages:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
 
-  /tailwind-merge@2.2.0:
-    resolution: {integrity: sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==}
+  /tailwind-merge@2.2.1:
+    resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==}
     dependencies:
       '@babel/runtime': 7.23.8
     dev: true
@@ -13747,8 +13790,8 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
-  /unplugin-icons@0.17.1:
-    resolution: {integrity: sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==}
+  /unplugin-icons@0.18.3:
+    resolution: {integrity: sha512-6EHPMXOq7XL8JAULzX0o3KqOsJHhYfpDfB1WvBWwZJH/PutIkV/ahRpHytucQ1evfRFuv/DVIozEmFIhP1xRxA==}
     peerDependencies:
       '@svgr/core': '>=7.0.0'
       '@svgx/core': ^1.0.1
@@ -13767,13 +13810,13 @@ packages:
       vue-template-es2015-compiler:
         optional: true
     dependencies:
-      '@antfu/install-pkg': 0.1.1
+      '@antfu/install-pkg': 0.3.1
       '@antfu/utils': 0.7.6
-      '@iconify/utils': 2.1.11
+      '@iconify/utils': 2.1.20
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.5.0
-      unplugin: 1.5.0
+      unplugin: 1.6.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -14027,8 +14070,8 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vee-validate@4.12.4(vue@3.4.15):
-    resolution: {integrity: sha512-rqSjMdl0l/RiGKywKhkXttUKwDlQOoxTxe31uMQiMlwK4Hbtlvr3OcQvpREp/qPTARxNKudKWCUVW/mfzuxUVQ==}
+  /vee-validate@4.12.5(vue@3.4.15):
+    resolution: {integrity: sha512-rvaDfLPSLwTk+mf016XWE4drB8yXzOsKXiKHTb9gNXNLTtQSZ0Ww26O0/xbIFQe+n3+u8Wv1Y8uO/aLDX4fxOg==}
     peerDependencies:
       vue: ^3.3.11
     dependencies:
@@ -14170,7 +14213,7 @@ packages:
       '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
       '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
-      '@vue/compiler-dom': 3.4.14
+      '@vue/compiler-dom': 3.4.15
       kolorist: 1.8.0
       magic-string: 0.30.5
       vite: 4.5.1(@types/node@20.10.1)
@@ -14302,8 +14345,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.39(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
+  /vitepress@1.0.0-rc.41(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-PAEoIIc9J//k/Wg39C6k86hZpXPmLZjRiTBwieDNeYGdevD7xr5Ve8o1W/w+e9dtyQMkuvzgianEamXDX3aj7g==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -14316,18 +14359,18 @@ packages:
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
+      '@shikijs/core': 1.0.0-beta.3
+      '@shikijs/transformers': 1.0.0-beta.3
       '@types/markdown-it': 13.0.7
       '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
-      '@vue/devtools-api': 6.5.1
+      '@vue/devtools-api': 7.0.14
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.15)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
       postcss: 8.4.33
-      shikiji: 0.9.19
-      shikiji-core: 0.9.19
-      shikiji-transformers: 0.9.19
+      shiki: 1.0.0-beta.3
       vite: 5.0.12(@types/node@20.8.10)
       vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
@@ -14614,8 +14657,8 @@ packages:
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /vue-sonner@1.0.2:
-    resolution: {integrity: sha512-BXIyb9lGSMUjTpOukISp7oV9nrczgbfYz+TnDeoap3io3ayGXiWv+/3eQ9UKnmofwUlC4nh/H5jzBOO89lRItQ==}
+  /vue-sonner@1.0.3:
+    resolution: {integrity: sha512-uJPvtcftMjmiXfpsMtB77+TkzWn8gEPI0l5sN+X+UqYuAOVacf0dk7ONqRsc5DWy1ilJtLexz/wSggwjimkYKA==}
     dev: false
 
   /vue-template-compiler@2.7.14:

From 6d24fb801b441367582b173e947f7c325a208258 Mon Sep 17 00:00:00 2001
From: Wasim Thoufiq <wasimthoufiq21@gmail.com>
Date: Sat, 3 Feb 2024 02:31:07 +0800
Subject: [PATCH 13/29] fix: month and year popover (#317)

---
 .../registry/default/ui/calendar/Calendar.vue | 34 ++++++++--
 .../new-york/ui/calendar/Calendar.vue         | 64 ++++++++++++-------
 2 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index dd24b246..e44796a1 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
 import { isVCalendarSlot } from '.'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
@@ -100,11 +100,19 @@ const vCalendarSlots = computed(() => {
       <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope" />
       </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
     </DatePicker>
   </div>
 </template>
 
-<style lang="postcss">
+<style lang="css">
 .calendar {
   @apply p-3 text-center;
 }
@@ -112,7 +120,25 @@ const vCalendarSlots = computed(() => {
   @apply grid gap-4;
 }
 .calendar .vc-title {
-  @apply text-sm font-medium pointer-events-none;
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
 }
 .calendar .vc-pane-header-wrapper {
   @apply hidden;
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 33cc911b..6fadd9d1 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
 import { isVCalendarSlot } from '.'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
@@ -29,7 +29,8 @@ interface SimpleDateParts {
 defineOptions({
   inheritAttrs: false,
 })
-const props = withDefaults(defineProps< {
+
+const props = withDefaults(defineProps<{
   modelValue?: string | number | Date | DatePickerModel
   modelModifiers?: object
   columns?: number
@@ -89,8 +90,8 @@ const vCalendarSlots = computed(() => {
 
     <DatePicker
       ref="datePicker"
-      v-bind="$attrs"
       v-model="modelValue"
+      v-bind="$attrs"
       :model-modifiers="modelModifiers"
       class="calendar"
       trim-weeks
@@ -100,11 +101,19 @@ const vCalendarSlots = computed(() => {
       <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope" />
       </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
     </DatePicker>
   </div>
 </template>
 
-<style lang="postcss">
+<style lang="css">
 .calendar {
   @apply p-3 text-center;
 }
@@ -112,7 +121,25 @@ const vCalendarSlots = computed(() => {
   @apply grid gap-4;
 }
 .calendar .vc-title {
-  @apply text-sm font-medium pointer-events-none;
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
 }
 .calendar .vc-pane-header-wrapper {
   @apply hidden;
@@ -124,14 +151,14 @@ const vCalendarSlots = computed(() => {
   @apply flex;
 }
 .calendar .vc-weekday {
-    @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
-  }
-  .calendar .vc-weekday-1 {
-    @apply pr-3;
-  }
-  .calendar .vc-weekday-7 {
-    @apply pl-3;
-  }
+  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
+}
+.calendar .vc-weekday-1 {
+	@apply pr-3;
+}
+.calendar .vc-weekday-7 {
+	@apply pl-3;
+}
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
 }
@@ -151,7 +178,7 @@ const vCalendarSlots = computed(() => {
   @apply rounded-md;
 }
 .calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
 }
 .calendar .vc-day-content:not(.vc-highlight-content-light) {
   @apply rounded-md;
@@ -177,7 +204,6 @@ const vCalendarSlots = computed(() => {
 	--vc-slide-duration: 0.15s;
 	--vc-slide-timing: ease;
 }
-
 .calendar .vc-fade-enter-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-enter-active,
@@ -204,7 +230,6 @@ const vCalendarSlots = computed(() => {
 	backface-visibility: hidden;
 	pointer-events: none;
 }
-
 .calendar .vc-none-leave-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-leave-active,
@@ -214,7 +239,6 @@ const vCalendarSlots = computed(() => {
 	position: absolute !important;
 	width: 100%;
 }
-
 .calendar .vc-none-enter-from,
 .calendar .vc-none-leave-to,
 .calendar .vc-fade-enter-from,
@@ -231,7 +255,6 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-fade-leave-to {
 	opacity: 0;
 }
-
 .calendar .vc-slide-left-enter-from,
 .calendar .vc-slide-right-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-left,
@@ -239,7 +262,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(var(--vc-slide-translate));
 	transform: translateX(var(--vc-slide-translate));
 }
-
 .calendar .vc-slide-right-enter-from,
 .calendar .vc-slide-left-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-right,
@@ -247,7 +269,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
 	transform: translateX(calc(-1 * var(--vc-slide-translate)));
 }
-
 .calendar .vc-slide-up-enter-from,
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-top,
@@ -255,7 +276,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateY(var(--vc-slide-translate));
 	transform: translateY(var(--vc-slide-translate));
 }
-
 .calendar .vc-slide-down-enter-from,
 .calendar .vc-slide-up-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-bottom,

From fc718145ae321df32c005933a1c8fcba3f010a64 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Fri, 2 Feb 2024 21:18:58 +0200
Subject: [PATCH 14/29] refactor: tailwindcss, remove all unnecessary arbitrary
 values, update TailwindCSS to v3.4 (#269)

---
 .github/ISSUE_TEMPLATE/bug-report.yml         |  4 +-
 .github/workflows/publish.yaml                |  5 --
 apps/www/.vitepress/theme/components/Kbd.vue  |  6 +-
 apps/www/.vitepress/theme/config/docs.ts      |  1 -
 .../.vitepress/theme/layout/MainLayout.vue    |  4 +-
 apps/www/.vitepress/theme/style.css           | 90 +++++++++----------
 apps/www/package.json                         |  1 +
 .../src/content/docs/components/skeleton.md   |  4 +-
 .../examples/cards/components/GitHubCard.vue  |  4 +-
 .../forms/components/AppearanceForm.vue       |  4 +-
 apps/www/src/examples/playground/Example.vue  |  2 +-
 .../src/examples/tasks/components/columns.ts  |  6 +-
 .../lib/registry/default/example/CardDemo.vue |  2 +-
 .../registry/default/example/CardStats.vue    |  4 +-
 .../default/example/NavigationMenuDemo.vue    |  2 +-
 .../registry/default/example/ProgressDemo.vue |  2 +-
 .../registry/default/example/SliderDemo.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../default/ui/dialog/DialogContent.vue       |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../default/ui/menubar/MenubarContent.vue     |  2 +-
 .../default/ui/menubar/MenubarSubContent.vue  |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../default/ui/scroll-area/ScrollBar.vue      |  4 +-
 .../default/ui/select/SelectContent.vue       |  4 +-
 .../registry/default/ui/textarea/Textarea.vue |  2 +-
 .../lib/registry/default/ui/toast/index.ts    |  2 +-
 .../registry/new-york/example/CardDemo.vue    |  2 +-
 .../registry/new-york/example/CardStats.vue   |  4 +-
 .../new-york/example/NavigationMenuDemo.vue   |  2 +-
 .../new-york/example/ProgressDemo.vue         |  2 +-
 .../registry/new-york/example/SliderDemo.vue  |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../new-york/ui/dialog/DialogContent.vue      |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../new-york/ui/menubar/MenubarContent.vue    |  2 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |  2 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/scroll-area/ScrollBar.vue     |  4 +-
 .../new-york/ui/select/SelectContent.vue      |  4 +-
 .../registry/new-york/ui/table/TableCell.vue  |  2 +-
 .../registry/new-york/ui/table/TableHead.vue  |  2 +-
 apps/www/src/lib/registry/registry.ts         | 53 +++++++----
 apps/www/src/public/registry/index.json       |  2 +-
 .../registry/styles/default/alert-dialog.json |  2 +-
 .../registry/styles/default/carousel.json     |  2 +-
 .../registry/styles/default/context-menu.json |  2 +-
 .../registry/styles/default/data-table.json   |  4 +-
 .../registry/styles/default/dialog.json       |  2 +-
 .../styles/default/dropdown-menu.json         |  2 +-
 .../public/registry/styles/default/kbd.json   |  4 +-
 .../registry/styles/default/menubar.json      |  2 +-
 .../styles/default/navigation-menu.json       |  2 +-
 .../registry/styles/default/scroll-area.json  |  2 +-
 .../registry/styles/default/select.json       |  2 +-
 .../registry/styles/default/switch.json       |  2 +-
 .../registry/styles/default/textarea.json     |  2 +-
 .../public/registry/styles/default/toast.json |  2 +-
 .../styles/new-york/alert-dialog.json         |  2 +-
 .../registry/styles/new-york/carousel.json    |  2 +-
 .../styles/new-york/context-menu.json         |  2 +-
 .../registry/styles/new-york/dialog.json      |  2 +-
 .../styles/new-york/dropdown-menu.json        |  2 +-
 .../registry/styles/new-york/menubar.json     |  2 +-
 .../styles/new-york/navigation-menu.json      |  2 +-
 .../registry/styles/new-york/scroll-area.json |  2 +-
 .../registry/styles/new-york/select.json      |  2 +-
 .../registry/styles/new-york/switch.json      |  2 +-
 .../registry/styles/new-york/table.json       |  2 +-
 .../registry/styles/new-york/toast.json       |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../components/ui/carousel/Carousel.vue       |  1 -
 pnpm-lock.yaml                                | 10 +--
 80 files changed, 174 insertions(+), 167 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index d24f3294..54005550 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -19,7 +19,7 @@ body:
       label: Reproduction
       description: |
         A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required)
-        
+
         To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos:
         https://www.shadcn-vue.com/docs/components/accordion.html
 
@@ -52,4 +52,4 @@ body:
       label: Contributes
       options:
         - label: I am willing to submit a PR to fix this issue
-        - label: I am willing to submit a PR with failing tests 
+        - label: I am willing to submit a PR with failing tests
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index c614d0b5..9d347542 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -17,8 +17,6 @@ on:
       - opened
       # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
       - labeled
-    paths:
-      - 'apps/www/**'
   # Allows you to run this workflow manually from the Actions tab
   # eslint-disable-next-line yml/no-empty-mapping-value
   workflow_dispatch:
@@ -52,9 +50,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.ref }}
-          fetch-depth: 0
 
       # Run a build step here
       - name: Setup Node.js environment
diff --git a/apps/www/.vitepress/theme/components/Kbd.vue b/apps/www/.vitepress/theme/components/Kbd.vue
index 7e3bd02c..55428107 100644
--- a/apps/www/.vitepress/theme/components/Kbd.vue
+++ b/apps/www/.vitepress/theme/components/Kbd.vue
@@ -18,9 +18,9 @@ const kbdClass = computed(() => {
     {
       variants: {
         size: {
-          xs: 'min-h-[16px] text-[10px] h-4 px-1',
-          sm: 'min-h-[20px] text-[11px] h-5 px-1',
-          md: 'min-h-[24px] text-[12px] h-6 px-1.5',
+          xs: 'min-h-4 text-[10px] h-4 px-1',
+          sm: 'min-h-5 text-[11px] h-5 px-1',
+          md: 'min-h-6 text-[12px] h-6 px-1.5',
         },
       },
     },
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 646cc85a..4f69dc39 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -328,7 +328,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Toast',
           href: '/docs/components/toast',
-          label: 'New',
           items: [],
         },
         {
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 946f26bb..8ff32f0d 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -135,7 +135,7 @@ watch(() => $route.path, (n) => {
               :href="link.href" target="_blank"
               :variant="'ghost'" :size="'icon'"
             >
-              <component :is="link.icon" class="w-[20px] h-[20px]" />
+              <component :is="link.icon" class="w-[20px] h-5" />
             </Button>
 
             <Button
@@ -146,7 +146,7 @@ watch(() => $route.path, (n) => {
             >
               <component
                 :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                class="w-[20px] h-[20px] text-foreground"
+                class="w-[20px] h-5 text-foreground"
               />
             </Button>
           </div>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index c1b2d159..fddd8cfb 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -5,49 +5,49 @@
 
 @layer base {
 	:root {
-		--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 5% 64.9%;
-		--radius: 0.5rem;
-	}
+    --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 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
 
-	.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 85.7% 97.3%;
-		--border: 240 3.7% 15.9%;
-		--input: 240 3.7% 15.9%;
-		--ring: 240 4.9% 83.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 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
 
 
 	* {
@@ -116,7 +116,7 @@
 
 	.step:before {
 		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-		@apply ml-[-50px] mt-[-4px];
+		@apply -ml-[50px] -mt-1;
 		content: counter(step);
 	}	
 }
@@ -139,7 +139,7 @@ pre code {
 }
 
 pre code .line {
-	@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
+	@apply  px-4 min-h-6 !py-0.5 w-full inline-block;
 } 
 
 .line-number {
@@ -149,4 +149,4 @@ pre code .line {
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: 0.3s;
-}
\ No newline at end of file
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index b4cbca68..ba163c0f 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -56,6 +56,7 @@
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.17",
     "lodash.template": "^4.5.0",
+    "oxc-parser": "^0.2.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shiki": "^1.0.0-beta.3",
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index af07e1b8..628ba177 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -37,6 +37,6 @@ import { Skeleton } from '@/components/ui/skeleton'
 </script>
 
 <template>
-  <Skeleton class="w-[100px] h-[20px] rounded-full" />
+  <Skeleton class="w-[100px] h-5 rounded-full" />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
index 62c7b3a4..30450833 100644
--- a/apps/www/src/examples/cards/components/GitHubCard.vue
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -26,7 +26,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
 
 <template>
   <Card>
-    <CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+    <CardHeader class="grid grid-cols-[minmax(0,1fr)_110px] items-start gap-4 space-y-0">
       <div class="space-y-1">
         <CardTitle>shadcn/ui</CardTitle>
         <CardDescription>
@@ -39,7 +39,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
           <StarIcon class="mr-2 h-4 w-4" />
           Star
         </Button>
-        <Separator orientation="vertical" class="h-[20px]" />
+        <Separator orientation="vertical" class="h-5" />
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
             <Button variant="secondary" class="px-2 shadow-none">
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 0884a899..9a37f15c 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
               <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
                 <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
                   <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
-                    <div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+                    <div class="h-2 w-20 rounded-lg bg-[#ecedef]" />
                     <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
                   </div>
                   <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
@@ -127,7 +127,7 @@ const onSubmit = handleSubmit((values) => {
               <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                 <div class="space-y-2 rounded-sm bg-slate-950 p-2">
                   <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-                    <div class="h-2 w-[80px] rounded-lg bg-slate-400" />
+                    <div class="h-2 w-20 rounded-lg bg-slate-400" />
                     <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
                   </div>
                   <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
index d30c2e12..915a69bf 100644
--- a/apps/www/src/examples/playground/Example.vue
+++ b/apps/www/src/examples/playground/Example.vue
@@ -57,7 +57,7 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
     <Separator />
     <Tabs default-value="complete" class="flex-1">
       <div class="container h-full py-6">
-        <div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
+        <div class="grid h-full items-stretch gap-6 md:grid-cols-[minmax(0,1fr)_200px]">
           <div class="hidden flex-col space-y-4 sm:flex md:order-2">
             <div class="grid gap-2">
               <HoverCard :open-delay="200">
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index 70c14109..181f34b9 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -12,16 +12,16 @@ export const columns: ColumnDef<Task>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox,
-      { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-[2px]' }),
+      { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-0.5' }),
     cell: ({ row }) => h(Checkbox,
-      { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-[2px]' }),
+      { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
     enableSorting: false,
     enableHiding: false,
   },
   {
     accessorKey: 'id',
     header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Task' }),
-    cell: ({ row }) => h('div', { class: 'w-[80px]' }, row.getValue('id')),
+    cell: ({ row }) => h('div', { class: 'w-20' }, row.getValue('id')),
     enableSorting: false,
     enableHiding: false,
   },
diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue
index 1e3c5bc9..81e6eff7 100644
--- a/apps/www/src/lib/registry/default/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardDemo.vue
@@ -51,7 +51,7 @@ const notifications = [
       <div>
         <div
           v-for="(notification, index) in notifications" :key="index"
-          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+          class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
         >
           <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
           <div class="space-y-1">
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/src/lib/registry/default/example/CardStats.vue
index 772db8eb..b1d043dd 100644
--- a/apps/www/src/lib/registry/default/example/CardStats.vue
+++ b/apps/www/src/lib/registry/default/example/CardStats.vue
@@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
           +20.1% from last month
         </p>
 
-        <div class="h-[80px]">
+        <div class="h-20">
           <VisXYContainer
             height="80px"
             :data="data" :margin="{
@@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
           +54.8% from last month
         </p>
 
-        <div class="mt-4 h-[80px]">
+        <div class="mt-4 h-20">
           <VisXYContainer
             height="80px" :data="data" :style="{
               '--theme-primary': `hsl(${
diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
index de8b0a22..cee73472 100644
--- a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
@@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
       <NavigationMenuItem>
         <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
             <li class="row-span-3">
               <NavigationMenuLink as-child>
                 <a
diff --git a/apps/www/src/lib/registry/default/example/ProgressDemo.vue b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
index 744c9f49..110c3978 100644
--- a/apps/www/src/lib/registry/default/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
@@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
 </script>
 
 <template>
-  <Progress v-model="progress" class="w-[60%]" />
+  <Progress v-model="progress" class="w-3/5" />
 </template>
diff --git a/apps/www/src/lib/registry/default/example/SliderDemo.vue b/apps/www/src/lib/registry/default/example/SliderDemo.vue
index 3a6fc2be..219c6a7c 100644
--- a/apps/www/src/lib/registry/default/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SliderDemo.vue
@@ -11,6 +11,6 @@ const modelValue = ref([50])
     v-model="modelValue"
     :max="100"
     :step="1"
-    :class="cn('w-[60%]', $attrs.class ?? '')"
+    :class="cn('w-3/5', $attrs.class ?? '')"
   />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 5a5dcdf7..9f09909e 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
index 441c72eb..4651fb3d 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       v-bind="forwarded"
       :class="cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        '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',
         props.class,
       )"
     >
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index 2cddc5ce..744388b0 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        '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,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index 20981efa..7b3aeaba 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
+          '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',
           props.class,
         )"
     >
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
index 04f4a127..b33d58eb 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :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)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
index a730438c..446f9fb5 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    :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)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
index 03061025..a529f149 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
index 028ed4c9..0a0ad68e 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-[8rem] 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',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index 20c57b9e..8abf60d1 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index f5e366a6..efaaee2d 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
          orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index 64809a28..5a4eb446 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-[8rem] 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',
+        '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',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
index ddf8dd01..b72cb7e7 100644
--- a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] 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)" />
+  <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)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index ddfdfbf3..dd097c54 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  '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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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',
+  '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-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-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',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
index 6d1b36ce..ad8c0883 100644
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -50,7 +50,7 @@ const notifications = [
       <div>
         <div
           v-for="(notification, index) in notifications" :key="index"
-          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+          class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
         >
           <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
           <div class="space-y-1">
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index 540a627e..e95ebb2c 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
           +20.1% from last month
         </p>
 
-        <div class="h-[80px]">
+        <div class="h-20">
           <VisXYContainer
             height="80px"
             :data="data" :margin="{
@@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
           +54.8% from last month
         </p>
 
-        <div class="mt-4 h-[80px]">
+        <div class="mt-4 h-20">
           <VisXYContainer
             height="80px" :data="data" :style="{
               '--theme-primary': `hsl(${
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
index 19694063..1aa57522 100644
--- a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
@@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
       <NavigationMenuItem>
         <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
             <li class="row-span-3">
               <NavigationMenuLink as-child>
                 <a
diff --git a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
index 125c32f3..76cb5cfb 100644
--- a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
@@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
 </script>
 
 <template>
-  <Progress v-model="progress" class="w-[60%]" />
+  <Progress v-model="progress" class="w-3/5" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
index e4f38a77..a8447351 100644
--- a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
@@ -11,6 +11,6 @@ const modelValue = ref([50])
     v-model="modelValue"
     :max="100"
     :step="1"
-    :class="cn('w-[60%]', $attrs.class ?? '')"
+    :class="cn('w-3/5', $attrs.class ?? '')"
   />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index 962124d7..afc76e58 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index d926efd8..df946223 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       v-bind="forwarded"
       :class="cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        '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,
       )"
     >
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index aa248fec..49cdfff3 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        '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,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index 35fa84c4..d8699c29 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
+          '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',
           props.class,
         )"
     >
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 04f4a127..b33d58eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :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)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index a730438c..446f9fb5 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    :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)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index 03061025..a529f149 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          '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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index 66d816cf..9818d201 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          '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,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 3b4b13b0..3c37c3d6 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <ChevronDownIcon
-      class="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 7c2a9470..db240ccc 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center relative mt-1.5 h-[--radix-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-[--radix-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index f5e366a6..efaaee2d 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
          orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index 64809a28..5a4eb446 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-[8rem] 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',
+        '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',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
index 93cd12da..40c1f43e 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index e0b80d16..11fb1010 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <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-[2px]', props.class)">
+  <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)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index 6f35d036..2205d062 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -1,6 +1,7 @@
 import { readFile, readdir } from 'node:fs/promises'
 import { join, normalize, resolve } from 'pathe'
 import { compileScript, parse } from 'vue/compiler-sfc'
+import oxc from 'oxc-parser'
 
 import type { Registry } from '../../lib/registry'
 
@@ -135,31 +136,47 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
 
 async function getDependencies(filename: string) {
   const code = await readFile(filename, { encoding: 'utf8' })
-  const parsed = parse(code, { filename })
 
   const registryDependencies = new Set<string>()
   const dependencies = new Set<string>()
 
-  if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
-    const compiled = compileScript(parsed.descriptor, { id: '' })
+  const populateDeps = (source: string) => {
+    const peerDeps = DEPENDENCIES.get(source)
+    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
+    if (peerDeps !== undefined) {
+      if (taggedDeps !== undefined)
+        dependencies.add(taggedDeps)
+      else
+        dependencies.add(source)
+      peerDeps.forEach(dep => dependencies.add(dep))
+    }
 
-    Object.values(compiled.imports!).forEach((value) => {
-      const source = value.source
-      const peerDeps = DEPENDENCIES.get(source)
-      const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
-      if (peerDeps !== undefined) {
-        if (taggedDeps !== undefined)
-          dependencies.add(taggedDeps)
-        else
-          dependencies.add(source)
-        peerDeps.forEach(dep => dependencies.add(dep))
-      }
+    if (source.startsWith(REGISTRY_DEPENDENCY)) {
+      const component = source.split('/').at(-1)!
+      registryDependencies.add(component)
+    }
+  }
 
-      if (source.startsWith(REGISTRY_DEPENDENCY)) {
-        const component = source.split('/').at(-1)!
-        registryDependencies.add(component)
-      }
+  if (filename.endsWith('.ts')) {
+    const ast = oxc.parseSync(code, {
+      sourceType: 'module',
+      sourceFilename: filename,
     })
+
+    const sources = JSON.parse(ast.program).body.filter((i: any) => i.type === 'ImportDeclaration').map((i: any) => i.source)
+    sources.forEach((source: any) => {
+      populateDeps(source.value)
+    })
+  }
+  else {
+    const parsed = parse(code, { filename })
+    if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
+      const compiled = compileScript(parsed.descriptor, { id: '' })
+
+      Object.values(compiled.imports!).forEach((value) => {
+        populateDeps(value.source)
+      })
+    }
   }
 
   return { registryDependencies, dependencies }
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index d6b78da7..5b16fa1e 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -651,4 +651,4 @@
     ],
     "type": "components:ui"
   }
-]
\ No newline at end of file
+]
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index eb365c4e..96a0087e 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index f49cc2e0..45584196 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 971bba3a..6d2c9b81 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
index 6f15fbca..f1366992 100644
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ b/apps/www/src/public/registry/styles/default/data-table.json
@@ -7,7 +7,7 @@
   "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-[18rem]\">\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            :checked=\"column.getIsVisible()\"\n            @update:checked=\"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          :col-span=\"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"
+      "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            :checked=\"column.getIsVisible()\"\n            @update:checked=\"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          :col-span=\"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",
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index f4b3b8c7..6102064c 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 44e56edf..8393653d 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/kbd.json b/apps/www/src/public/registry/styles/default/kbd.json
index db9ad268..2eeafdda 100644
--- a/apps/www/src/public/registry/styles/default/kbd.json
+++ b/apps/www/src/public/registry/styles/default/kbd.json
@@ -5,7 +5,7 @@
   "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-[16px] text-[10px] h-4 px-1',\n          sm: 'min-h-[20px] text-[11px] h-5 px-1',\n          md: 'min-h-[24px] 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"
+      "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",
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index c816fcbc..fbe86bd2 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index 32d828b7..872a0458 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index a717c4ea..326298b5 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d8df5cb7..e412f47d 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index 3b09a00e..006f0b0a 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 57c8fb8c..1f76c526 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 7abff558..4c7ea5f3 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
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
index f79d3a78..3941d10f 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index 530ca629..b14b3512 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
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
index bc2cc5e2..f54fa1fd 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 254ba0bd..6ab4c5b3 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
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
index 7ad3075b..df16ad60 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 82c536df..d0a58952 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
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
index 22142536..692b7f79 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
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
index a717c4ea..326298b5 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index a17cfb57..699d9611 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index 7cc55c5b..14e290e0 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index 6ad9f35f..a6435e70 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index a0c0fee5..b297aae8 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
index fde4167f..974f825a 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
@@ -24,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
       v-bind="{ ...props, ...emitsAsProps }"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          '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 border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
           props.class,
         )
       "
diff --git a/packages/module/playground/components/ui/carousel/Carousel.vue b/packages/module/playground/components/ui/carousel/Carousel.vue
index c88d61ad..b6147c27 100644
--- a/packages/module/playground/components/ui/carousel/Carousel.vue
+++ b/packages/module/playground/components/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import emblaCarouselVue from 'embla-carousel-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c42dfad8..adc9a366 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,6 +162,9 @@ importers:
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
+      oxc-parser:
+        specifier: ^0.2.0
+        version: 0.2.0
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -3224,7 +3227,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-darwin-x64@0.2.0:
@@ -3232,7 +3234,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-linux-arm64-gnu@0.2.0:
@@ -3240,7 +3241,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-linux-x64-gnu@0.2.0:
@@ -3248,7 +3248,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-win32-arm64-msvc@0.2.0:
@@ -3256,7 +3255,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-win32-x64-msvc@0.2.0:
@@ -3264,7 +3262,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@parcel/watcher-android-arm64@2.3.0:
@@ -11206,7 +11203,6 @@ packages:
       '@oxc-parser/binding-linux-x64-gnu': 0.2.0
       '@oxc-parser/binding-win32-arm64-msvc': 0.2.0
       '@oxc-parser/binding-win32-x64-msvc': 0.2.0
-    dev: false
 
   /p-finally@1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}

From ed70e4e4b82ff27606f4a401ed019bb249f54fa8 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Fri, 2 Feb 2024 22:54:21 +0330
Subject: [PATCH 15/29] chore: rebuild registry, fresh lockfile

---
 apps/www/src/public/registry/index.json       |   12 +-
 .../registry/styles/default/alert-dialog.json |    4 +-
 .../registry/styles/default/calendar.json     |    6 +-
 .../registry/styles/default/carousel.json     |    8 +-
 .../registry/styles/default/context-menu.json |    6 +-
 .../registry/styles/default/dialog.json       |    4 +-
 .../styles/default/dropdown-menu.json         |    6 +-
 .../registry/styles/default/menubar.json      |    6 +-
 .../styles/default/navigation-menu.json       |    4 +-
 .../registry/styles/default/scroll-area.json  |    4 +-
 .../registry/styles/default/select.json       |    4 +-
 .../registry/styles/default/switch.json       |    2 +-
 .../registry/styles/default/textarea.json     |    4 +-
 .../public/registry/styles/default/toast.json |    4 +-
 .../styles/new-york/alert-dialog.json         |    4 +-
 .../registry/styles/new-york/calendar.json    |    6 +-
 .../registry/styles/new-york/carousel.json    |    8 +-
 .../styles/new-york/context-menu.json         |    6 +-
 .../registry/styles/new-york/dialog.json      |    4 +-
 .../styles/new-york/dropdown-menu.json        |    6 +-
 .../registry/styles/new-york/menubar.json     |    6 +-
 .../styles/new-york/navigation-menu.json      |    6 +-
 .../registry/styles/new-york/scroll-area.json |    4 +-
 .../registry/styles/new-york/select.json      |    4 +-
 .../registry/styles/new-york/switch.json      |    2 +-
 .../registry/styles/new-york/table.json       |    6 +-
 .../registry/styles/new-york/toast.json       |    2 +-
 pnpm-lock.yaml                                | 5725 +++++++----------
 28 files changed, 2283 insertions(+), 3580 deletions(-)

diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 5b16fa1e..9589b3b6 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -104,8 +104,8 @@
       "v-calendar@next"
     ],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       "ui/calendar/Calendar.vue",
@@ -132,7 +132,11 @@
   },
   {
     "name": "carousel",
-    "dependencies": [],
+    "dependencies": [
+      "@vueuse/core",
+      "embla-carousel-vue",
+      "embla-carousel"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -651,4 +655,4 @@
     ],
     "type": "components:ui"
   }
-]
+]
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index 96a0087e..c569742a 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index d5fddf13..f2c24d22 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -5,13 +5,13 @@
     "v-calendar@next"
   ],
   "registryDependencies": [
-    "button",
-    "utils"
+    "utils",
+    "button"
   ],
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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",
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index 45584196..e687e55c 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -1,6 +1,10 @@
 {
   "name": "carousel",
-  "dependencies": [],
+  "dependencies": [
+    "@vueuse/core",
+    "embla-carousel-vue",
+    "embla-carousel"
+  ],
   "registryDependencies": [
     "utils",
     "button"
@@ -40,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 6d2c9b81..b77b8504 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -55,7 +55,7 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 6102064c..a31c8977 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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",
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 8393653d..5b4e9847 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -51,7 +51,7 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index fbe86bd2..4e708ec7 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -55,7 +55,7 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index 872a0458..ecda26c9 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -35,7 +35,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index 326298b5..4d7a79fa 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index e412f47d..0989daf9 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[8rem] 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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index 006f0b0a..3b09a00e 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 1f76c526..4236a997 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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-[80px] 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"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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",
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 4c7ea5f3..bb16aada 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-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"
+      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-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",
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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
index 3941d10f..934099ea 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index d17ed279..13324253 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -5,13 +5,13 @@
     "v-calendar@next"
   ],
   "registryDependencies": [
-    "button",
-    "utils"
+    "utils",
+    "button"
   ],
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon 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    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\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 flex;\n}\n.calendar .vc-weekday {\n    @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n  }\n  .calendar .vc-weekday-1 {\n    @apply pr-3;\n  }\n  .calendar .vc-weekday-7 {\n    @apply pl-3;\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-8 w-8 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"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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        <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;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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",
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index b14b3512..b668ed0d 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -1,6 +1,10 @@
 {
   "name": "carousel",
-  "dependencies": [],
+  "dependencies": [
+    "@vueuse/core",
+    "embla-carousel-vue",
+    "embla-carousel"
+  ],
   "registryDependencies": [
     "utils",
     "button"
@@ -40,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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
index f54fa1fd..23f2273a 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -55,7 +55,7 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 6ab4c5b3..b4ad02d6 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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",
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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
index df16ad60..7570c1b1 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -51,7 +51,7 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index d0a58952..9c5316fa 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -55,7 +55,7 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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
index 692b7f79..fa0996a5 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -31,11 +31,11 @@
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[var(--radix-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-[var(--radix-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[--radix-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-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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
index 326298b5..4d7a79fa 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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",
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 699d9611..64ce4070 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[8rem] 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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\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-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index 14e290e0..7cc55c5b 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index a6435e70..27805556 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -19,7 +19,7 @@
     },
     {
       "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-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
+      "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",
@@ -31,7 +31,7 @@
     },
     {
       "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-[2px]', props.class)\">\n    <slot />\n  </th>\n</template>\n"
+      "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",
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index b297aae8..a0c0fee5 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adc9a366..56c7dc4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,37 +10,37 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^0.43.1
-        version: 0.43.1(eslint@8.53.0)(typescript@5.2.2)
+        version: 0.43.1(eslint@8.56.0)(typescript@5.3.3)
       '@commitlint/cli':
         specifier: ^17.7.1
-        version: 17.7.1
+        version: 17.8.1
       '@commitlint/config-conventional':
         specifier: ^17.7.0
-        version: 17.7.0
+        version: 17.8.1
       bumpp:
         specifier: ^9.2.0
-        version: 9.2.0
+        version: 9.3.0
       eslint:
         specifier: ^8.52.0
-        version: 8.53.0
+        version: 8.56.0
       lint-staged:
         specifier: ^14.0.1
         version: 14.0.1
       pnpm:
         specifier: ^8.10.2
-        version: 8.10.2
+        version: 8.15.1
       simple-git-hooks:
         specifier: ^2.9.0
         version: 2.9.0
       taze:
         specifier: ^0.12.0
-        version: 0.12.0
+        version: 0.12.3
       typescript:
         specifier: ^5.2.2
-        version: 5.2.2
+        version: 5.3.3
       vitest:
         specifier: ^0.34.6
-        version: 0.34.6(@vitest/ui@0.34.5)
+        version: 0.34.6(@vitest/ui@0.34.7)
 
   apps/www:
     dependencies:
@@ -122,25 +122,25 @@ importers:
     devDependencies:
       '@iconify-json/radix-icons':
         specifier: ^1.1.11
-        version: 1.1.11
+        version: 1.1.14
       '@iconify-json/tabler':
         specifier: ^1.1.89
-        version: 1.1.92
+        version: 1.1.105
       '@iconify/json':
         specifier: ^2.2.108
-        version: 2.2.120
+        version: 2.2.178
       '@iconify/vue':
         specifier: ^4.1.1
         version: 4.1.1(vue@3.4.15)
       '@shikijs/transformers':
         specifier: ^1.0.0-beta.3
-        version: 1.0.0-beta.3
+        version: 1.0.0-beta.5
       '@types/lodash.template':
         specifier: ^4.5.2
-        version: 4.5.2
+        version: 4.5.3
       '@types/node':
         specifier: ^20.8.10
-        version: 20.8.10
+        version: 20.11.16
       '@vitejs/plugin-vue':
         specifier: ^5.0.3
         version: 5.0.3(vite@5.0.12)(vue@3.4.15)
@@ -173,13 +173,13 @@ importers:
         version: 5.0.5
       shiki:
         specifier: ^1.0.0-beta.3
-        version: 1.0.0-beta.3
+        version: 1.0.0-beta.5
       tailwind-merge:
         specifier: ^2.2.1
         version: 2.2.1
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.1(ts-node@10.9.1)
+        version: 3.4.1(ts-node@10.9.2)
       tsx:
         specifier: ^4.7.0
         version: 4.7.0
@@ -191,10 +191,10 @@ importers:
         version: 0.18.3
       vite:
         specifier: ^5.0.12
-        version: 5.0.12(@types/node@20.8.10)
+        version: 5.0.12(@types/node@20.11.16)
       vitepress:
         specifier: ^1.0.0-rc.41
-        version: 1.0.0-rc.41(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
+        version: 1.0.0-rc.41(@algolia/client-search@4.22.1)(@types/node@20.11.16)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -203,28 +203,28 @@ importers:
     dependencies:
       '@antfu/ni':
         specifier: ^0.21.8
-        version: 0.21.8
+        version: 0.21.12
       '@babel/core':
         specifier: ^7.22.17
-        version: 7.23.0
+        version: 7.23.9
       '@babel/parser':
         specifier: ^7.22.16
-        version: 7.23.0
+        version: 7.23.9
       '@babel/plugin-transform-typescript':
         specifier: ^7.22.15
-        version: 7.22.15(@babel/core@7.23.0)
+        version: 7.23.6(@babel/core@7.23.9)
       '@vue/compiler-sfc':
         specifier: ^3.3.7
-        version: 3.3.7
+        version: 3.4.15
       chalk:
         specifier: 5.3.0
         version: 5.3.0
       commander:
         specifier: ^11.0.0
-        version: 11.0.0
+        version: 11.1.0
       cosmiconfig:
         specifier: ^8.3.6
-        version: 8.3.6(typescript@5.2.2)
+        version: 8.3.6(typescript@5.3.3)
       detype:
         specifier: npm:detypes@^0.7.6
         version: /detypes@0.7.6
@@ -236,7 +236,7 @@ importers:
         version: 8.0.1
       fs-extra:
         specifier: ^11.1.1
-        version: 11.1.1
+        version: 11.2.0
       https-proxy-agent:
         specifier: ^7.0.2
         version: 7.0.2
@@ -245,7 +245,7 @@ importers:
         version: 4.5.0
       magic-string:
         specifier: ^0.30.3
-        version: 0.30.3
+        version: 0.30.6
       node-fetch:
         specifier: ^3.3.2
         version: 3.3.2
@@ -257,7 +257,7 @@ importers:
         version: 2.4.2
       radix-vue:
         specifier: ^1.3.0
-        version: 1.3.0(vue@3.4.15)
+        version: 1.4.0(vue@3.4.15)
       recast:
         specifier: ^0.23.4
         version: 0.23.4
@@ -272,69 +272,69 @@ importers:
         version: 4.2.0
       vite-tsconfig-paths:
         specifier: ^4.2.1
-        version: 4.2.1(typescript@5.2.2)
+        version: 4.3.1(typescript@5.3.3)
       zod:
         specifier: ^3.22.2
-        version: 3.22.2
+        version: 3.22.4
     devDependencies:
       '@types/babel__core':
         specifier: ^7.20.1
-        version: 7.20.2
+        version: 7.20.5
       '@types/diff':
         specifier: ^5.0.3
-        version: 5.0.5
+        version: 5.0.9
       '@types/fs-extra':
         specifier: ^11.0.1
-        version: 11.0.2
+        version: 11.0.4
       '@types/lodash.template':
         specifier: ^4.5.1
-        version: 4.5.1
+        version: 4.5.3
       '@types/prompts':
         specifier: ^2.4.4
-        version: 2.4.5
+        version: 2.4.9
       '@vitest/ui':
         specifier: ^0.34.4
-        version: 0.34.5(vitest@0.34.6)
+        version: 0.34.7(vitest@0.34.6)
       tsup:
         specifier: ^7.2.0
-        version: 7.2.0(ts-node@10.9.1)(typescript@5.2.2)
+        version: 7.3.0(ts-node@10.9.2)(typescript@5.3.3)
       type-fest:
         specifier: ^4.3.1
-        version: 4.3.2
+        version: 4.10.2
       typescript:
         specifier: ^5.2.2
-        version: 5.2.2
+        version: 5.3.3
 
   packages/module:
     dependencies:
       '@nuxt/kit':
         specifier: ^3.8.2
-        version: 3.8.2(rollup@3.29.4)
+        version: 3.10.0(rollup@3.29.4)
       oxc-parser:
         specifier: ^0.2.0
         version: 0.2.0
     devDependencies:
       '@nuxt/devtools':
         specifier: latest
-        version: 1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.1)
+        version: 1.0.8(nuxt@3.10.0)(rollup@3.29.4)(vite@5.0.12)
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.56.0)
       '@nuxt/module-builder':
         specifier: ^0.5.4
-        version: 0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.3.3)
+        version: 0.5.5(@nuxt/kit@3.10.0)(nuxi@3.10.0)(typescript@5.3.3)
       '@nuxt/schema':
         specifier: ^3.8.2
-        version: 3.8.2(rollup@3.29.4)
+        version: 3.10.0(rollup@3.29.4)
       '@nuxt/test-utils':
         specifier: ^3.8.1
-        version: 3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.15)
+        version: 3.11.0(h3@1.10.1)(rollup@3.29.4)(vite@5.0.12)(vitest@0.33.0)(vue-router@4.2.5)(vue@3.4.15)
       '@types/node':
         specifier: ^20.9.3
-        version: 20.10.1
+        version: 20.11.16
       nuxt:
         specifier: ^3.8.2
-        version: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@4.5.1)
+        version: 3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@5.0.12)
       vitest:
         specifier: ^0.33.0
         version: 0.33.0
@@ -346,173 +346,138 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0)
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)
       search-insights: 2.13.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0):
+  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1):
     resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
-      '@algolia/client-search': 4.22.0
-      algoliasearch: 4.20.0
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)
+      '@algolia/client-search': 4.22.1
+      algoliasearch: 4.22.1
     dev: true
 
-  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0):
+  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1):
     resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/client-search': 4.22.0
-      algoliasearch: 4.20.0
+      '@algolia/client-search': 4.22.1
+      algoliasearch: 4.22.1
     dev: true
 
-  /@algolia/cache-browser-local-storage@4.20.0:
-    resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==}
+  /@algolia/cache-browser-local-storage@4.22.1:
+    resolution: {integrity: sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==}
     dependencies:
-      '@algolia/cache-common': 4.20.0
+      '@algolia/cache-common': 4.22.1
     dev: true
 
-  /@algolia/cache-common@4.20.0:
-    resolution: {integrity: sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==}
+  /@algolia/cache-common@4.22.1:
+    resolution: {integrity: sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA==}
     dev: true
 
-  /@algolia/cache-common@4.22.0:
-    resolution: {integrity: sha512-TPwUMlIGPN16eW67qamNQUmxNiGHg/WBqWcrOoCddhqNTqGDPVqmgfaM85LPbt24t3r1z0zEz/tdsmuq3Q6oaA==}
-    dev: true
-
-  /@algolia/cache-in-memory@4.20.0:
-    resolution: {integrity: sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==}
+  /@algolia/cache-in-memory@4.22.1:
+    resolution: {integrity: sha512-ve+6Ac2LhwpufuWavM/aHjLoNz/Z/sYSgNIXsinGofWOysPilQZPUetqLj8vbvi+DHZZaYSEP9H5SRVXnpsNNw==}
     dependencies:
-      '@algolia/cache-common': 4.20.0
+      '@algolia/cache-common': 4.22.1
     dev: true
 
-  /@algolia/client-account@4.20.0:
-    resolution: {integrity: sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==}
+  /@algolia/client-account@4.22.1:
+    resolution: {integrity: sha512-k8m+oegM2zlns/TwZyi4YgCtyToackkOpE+xCaKCYfBfDtdGOaVZCM5YvGPtK+HGaJMIN/DoTL8asbM3NzHonw==}
     dependencies:
-      '@algolia/client-common': 4.20.0
-      '@algolia/client-search': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/client-common': 4.22.1
+      '@algolia/client-search': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
-  /@algolia/client-analytics@4.20.0:
-    resolution: {integrity: sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==}
+  /@algolia/client-analytics@4.22.1:
+    resolution: {integrity: sha512-1ssi9pyxyQNN4a7Ji9R50nSdISIumMFDwKNuwZipB6TkauJ8J7ha/uO60sPJFqQyqvvI+px7RSNRQT3Zrvzieg==}
     dependencies:
-      '@algolia/client-common': 4.20.0
-      '@algolia/client-search': 4.20.0
-      '@algolia/requester-common': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/client-common': 4.22.1
+      '@algolia/client-search': 4.22.1
+      '@algolia/requester-common': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
-  /@algolia/client-common@4.20.0:
-    resolution: {integrity: sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==}
+  /@algolia/client-common@4.22.1:
+    resolution: {integrity: sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==}
     dependencies:
-      '@algolia/requester-common': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/requester-common': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
-  /@algolia/client-common@4.22.0:
-    resolution: {integrity: sha512-BlbkF4qXVWuwTmYxVWvqtatCR3lzXwxx628p1wj1Q7QP2+LsTmGt1DiUYRuy9jG7iMsnlExby6kRMOOlbhv2Ag==}
+  /@algolia/client-personalization@4.22.1:
+    resolution: {integrity: sha512-sl+/klQJ93+4yaqZ7ezOttMQ/nczly/3GmgZXJ1xmoewP5jmdP/X/nV5U7EHHH3hCUEHeN7X1nsIhGPVt9E1cQ==}
     dependencies:
-      '@algolia/requester-common': 4.22.0
-      '@algolia/transporter': 4.22.0
+      '@algolia/client-common': 4.22.1
+      '@algolia/requester-common': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
-  /@algolia/client-personalization@4.20.0:
-    resolution: {integrity: sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==}
+  /@algolia/client-search@4.22.1:
+    resolution: {integrity: sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==}
     dependencies:
-      '@algolia/client-common': 4.20.0
-      '@algolia/requester-common': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/client-common': 4.22.1
+      '@algolia/requester-common': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
-  /@algolia/client-search@4.20.0:
-    resolution: {integrity: sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==}
+  /@algolia/logger-common@4.22.1:
+    resolution: {integrity: sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg==}
+    dev: true
+
+  /@algolia/logger-console@4.22.1:
+    resolution: {integrity: sha512-O99rcqpVPKN1RlpgD6H3khUWylU24OXlzkavUAMy6QZd1776QAcauE3oP8CmD43nbaTjBexZj2nGsBH9Tc0FVA==}
     dependencies:
-      '@algolia/client-common': 4.20.0
-      '@algolia/requester-common': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/logger-common': 4.22.1
     dev: true
 
-  /@algolia/client-search@4.22.0:
-    resolution: {integrity: sha512-bn4qQiIdRPBGCwsNuuqB8rdHhGKKWIij9OqidM1UkQxnSG8yzxHdb7CujM30pvp5EnV7jTqDZRbxacbjYVW20Q==}
+  /@algolia/requester-browser-xhr@4.22.1:
+    resolution: {integrity: sha512-dtQGYIg6MteqT1Uay3J/0NDqD+UciHy3QgRbk7bNddOJu+p3hzjTRYESqEnoX/DpEkaNYdRHUKNylsqMpgwaEw==}
     dependencies:
-      '@algolia/client-common': 4.22.0
-      '@algolia/requester-common': 4.22.0
-      '@algolia/transporter': 4.22.0
+      '@algolia/requester-common': 4.22.1
     dev: true
 
-  /@algolia/logger-common@4.20.0:
-    resolution: {integrity: sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==}
+  /@algolia/requester-common@4.22.1:
+    resolution: {integrity: sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg==}
     dev: true
 
-  /@algolia/logger-common@4.22.0:
-    resolution: {integrity: sha512-HMUQTID0ucxNCXs5d1eBJ5q/HuKg8rFVE/vOiLaM4Abfeq1YnTtGV3+rFEhOPWhRQxNDd+YHa4q864IMc0zHpQ==}
-    dev: true
-
-  /@algolia/logger-console@4.20.0:
-    resolution: {integrity: sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==}
+  /@algolia/requester-node-http@4.22.1:
+    resolution: {integrity: sha512-JfmZ3MVFQkAU+zug8H3s8rZ6h0ahHZL/SpMaSasTCGYR5EEJsCc8SI5UZ6raPN2tjxa5bxS13BRpGSBUens7EA==}
     dependencies:
-      '@algolia/logger-common': 4.20.0
+      '@algolia/requester-common': 4.22.1
     dev: true
 
-  /@algolia/requester-browser-xhr@4.20.0:
-    resolution: {integrity: sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==}
+  /@algolia/transporter@4.22.1:
+    resolution: {integrity: sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==}
     dependencies:
-      '@algolia/requester-common': 4.20.0
-    dev: true
-
-  /@algolia/requester-common@4.20.0:
-    resolution: {integrity: sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==}
-    dev: true
-
-  /@algolia/requester-common@4.22.0:
-    resolution: {integrity: sha512-Y9cEH/cKjIIZgzvI1aI0ARdtR/xRrOR13g5psCxkdhpgRN0Vcorx+zePhmAa4jdQNqexpxtkUdcKYugBzMZJgQ==}
-    dev: true
-
-  /@algolia/requester-node-http@4.20.0:
-    resolution: {integrity: sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==}
-    dependencies:
-      '@algolia/requester-common': 4.20.0
-    dev: true
-
-  /@algolia/transporter@4.20.0:
-    resolution: {integrity: sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==}
-    dependencies:
-      '@algolia/cache-common': 4.20.0
-      '@algolia/logger-common': 4.20.0
-      '@algolia/requester-common': 4.20.0
-    dev: true
-
-  /@algolia/transporter@4.22.0:
-    resolution: {integrity: sha512-ieO1k8x2o77GNvOoC+vAkFKppydQSVfbjM3YrSjLmgywiBejPTvU1R1nEvG59JIIUvtSLrZsLGPkd6vL14zopA==}
-    dependencies:
-      '@algolia/cache-common': 4.22.0
-      '@algolia/logger-common': 4.22.0
-      '@algolia/requester-common': 4.22.0
+      '@algolia/cache-common': 4.22.1
+      '@algolia/logger-common': 4.22.1
+      '@algolia/requester-common': 4.22.1
     dev: true
 
   /@alloc/quick-lru@5.2.0:
@@ -524,29 +489,29 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.22
 
-  /@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.7.3)(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2):
+  /@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.20.0)(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-SW6hmGmqI985fsCJ+oivo4MbiMmRMgCJ0Ne8j/hwCB6O6Mc0m5bDqYeKn5HqFhvZhG84GEg5jPDKNiHrBYnQjw==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
       '@stylistic/eslint-plugin-js': 0.0.4
-      eslint: 8.53.0
-      eslint-plugin-antfu: 0.43.1(eslint@8.53.0)(typescript@5.2.2)
-      eslint-plugin-eslint-comments: 3.2.0(eslint@8.53.0)
+      eslint: 8.56.0
+      eslint-plugin-antfu: 0.43.1(eslint@8.56.0)(typescript@5.3.3)
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)
-      eslint-plugin-jsdoc: 46.8.2(eslint@8.53.0)
-      eslint-plugin-jsonc: 2.9.0(eslint@8.53.0)
-      eslint-plugin-markdown: 3.0.1(eslint@8.53.0)
-      eslint-plugin-n: 16.1.0(eslint@8.53.0)
+      eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)
+      eslint-plugin-jsdoc: 46.10.1(eslint@8.56.0)
+      eslint-plugin-jsonc: 2.13.0(eslint@8.56.0)
+      eslint-plugin-markdown: 3.0.1(eslint@8.56.0)
+      eslint-plugin-n: 16.6.2(eslint@8.56.0)
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-promise: 6.1.1(eslint@8.53.0)
-      eslint-plugin-unicorn: 48.0.1(eslint@8.53.0)
-      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.7.3)(eslint@8.53.0)
-      eslint-plugin-yml: 1.9.0(eslint@8.53.0)
-      jsonc-eslint-parser: 2.3.0
+      eslint-plugin-promise: 6.1.1(eslint@8.56.0)
+      eslint-plugin-unicorn: 48.0.1(eslint@8.56.0)
+      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.20.0)(eslint@8.56.0)
+      eslint-plugin-yml: 1.12.2(eslint@8.56.0)
+      jsonc-eslint-parser: 2.4.0
       yaml-eslint-parser: 1.2.2
     transitivePeerDependencies:
       - '@typescript-eslint/eslint-plugin'
@@ -557,19 +522,19 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts@0.43.1(eslint@8.53.0)(typescript@5.2.2):
+  /@antfu/eslint-config-ts@0.43.1(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-s3zItBSopYbM/3eii/JKas1PmWR+wCPRNS89qUi4zxPvpuIgN5mahkBvbsCiWacrNFtLxe1zGgo5qijBhVfuvA==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.7.3)(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/parser': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
-      eslint-plugin-jest: 27.4.0(@typescript-eslint/eslint-plugin@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      typescript: 5.2.2
+      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.20.0)(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-plugin-jest: 27.6.3(@typescript-eslint/eslint-plugin@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -577,15 +542,15 @@ packages:
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.7.3)(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2):
+  /@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.20.0)(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-HxOfe8Vl+DPrzssbs5LHRDCnBtCy1LSA1DIeV71IC+iTpzoASFahSsVX5qckYu1InFgUm93XOhHCWm34LzPsvg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.7.3)(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@antfu/eslint-config-ts': 0.43.1(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
-      eslint-plugin-vue: 9.17.0(eslint@8.53.0)
+      '@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.20.0)(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@antfu/eslint-config-ts': 0.43.1(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-plugin-vue: 9.21.1(eslint@8.56.0)
       local-pkg: 0.4.3
     transitivePeerDependencies:
       - '@typescript-eslint/eslint-plugin'
@@ -597,25 +562,25 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config@0.43.1(eslint@8.53.0)(typescript@5.2.2):
+  /@antfu/eslint-config@0.43.1(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-kTOJeCqhotaiQ/Rv6JxgfAX+SxUq2GII4ZIvTa3GWBUXhFMBvehdUNtxcmO8/HxwxYKkm34/qeF+v7osBsMF1w==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-vue': 0.43.1(@typescript-eslint/eslint-plugin@6.7.3)(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/parser': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
-      eslint-plugin-eslint-comments: 3.2.0(eslint@8.53.0)
+      '@antfu/eslint-config-vue': 0.43.1(@typescript-eslint/eslint-plugin@6.20.0)(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)
-      eslint-plugin-jsonc: 2.9.0(eslint@8.53.0)
-      eslint-plugin-n: 16.1.0(eslint@8.53.0)
-      eslint-plugin-promise: 6.1.1(eslint@8.53.0)
-      eslint-plugin-unicorn: 48.0.1(eslint@8.53.0)
-      eslint-plugin-vue: 9.17.0(eslint@8.53.0)
-      eslint-plugin-yml: 1.9.0(eslint@8.53.0)
-      jsonc-eslint-parser: 2.3.0
+      eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)
+      eslint-plugin-jsonc: 2.13.0(eslint@8.56.0)
+      eslint-plugin-n: 16.6.2(eslint@8.56.0)
+      eslint-plugin-promise: 6.1.1(eslint@8.56.0)
+      eslint-plugin-unicorn: 48.0.1(eslint@8.56.0)
+      eslint-plugin-vue: 9.21.1(eslint@8.56.0)
+      eslint-plugin-yml: 1.12.2(eslint@8.56.0)
+      jsonc-eslint-parser: 2.4.0
       yaml-eslint-parser: 1.2.2
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -638,21 +603,14 @@ packages:
       execa: 8.0.1
     dev: true
 
-  /@antfu/ni@0.21.8:
-    resolution: {integrity: sha512-90X8pU2szlvw0AJo9EZMbYc2eQKkmO7mAdC4tD4r5co2Mm56MT37MIG8EyB7p4WRheuzGxuLDxJ63mF6+Zajiw==}
+  /@antfu/ni@0.21.12:
+    resolution: {integrity: sha512-2aDL3WUv8hMJb2L3r/PIQWsTLyq7RQr3v9xD16fiz6O8ys1xEyLhhTOv8gxtZvJiTzjTF5pHoArvRdesGL1DMQ==}
     hasBin: true
 
-  /@antfu/utils@0.7.6:
-    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
+  /@antfu/utils@0.7.7:
+    resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
     dev: true
 
-  /@babel/code-frame@7.22.13:
-    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
-
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -660,47 +618,24 @@ packages:
       '@babel/highlight': 7.23.4
       chalk: 2.4.2
 
-  /@babel/compat-data@7.22.20:
-    resolution: {integrity: sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==}
+  /@babel/compat-data@7.23.5:
+    resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/core@7.23.0:
-    resolution: {integrity: sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.0
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.0(@babel/core@7.23.0)
-      '@babel/helpers': 7.23.1
-      '@babel/parser': 7.23.6
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.0
-      '@babel/types': 7.23.0
-      convert-source-map: 2.0.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/core@7.23.5:
-    resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
+  /@babel/core@7.23.9:
+    resolution: {integrity: sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.5
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helpers': 7.23.5
-      '@babel/parser': 7.23.6
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.6
+      '@babel/generator': 7.23.6
+      '@babel/helper-compilation-targets': 7.23.6
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9)
+      '@babel/helpers': 7.23.9
+      '@babel/parser': 7.23.9
+      '@babel/template': 7.23.9
+      '@babel/traverse': 7.23.9
+      '@babel/types': 7.23.9
       convert-source-map: 2.0.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -709,94 +644,47 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/generator@7.23.0:
-    resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
+  /@babel/generator@7.23.6:
+    resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
-      jsesc: 2.5.2
-    dev: false
-
-  /@babel/generator@7.23.5:
-    resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.6
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.22
       jsesc: 2.5.2
 
   /@babel/helper-annotate-as-pure@7.22.5:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
-  /@babel/helper-compilation-targets@7.22.15:
-    resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
+  /@babel/helper-compilation-targets@7.23.6:
+    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.22.20
-      '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.22.0
+      '@babel/compat-data': 7.23.5
+      '@babel/helper-validator-option': 7.23.5
+      browserslist: 4.22.3
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  /@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.23.0):
-    resolution: {integrity: sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==}
+  /@babel/helper-create-class-features-plugin@7.23.10(@babel/core@7.23.9):
+    resolution: {integrity: sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.0
+      '@babel/core': 7.23.9
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.0)
+      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.9)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       semver: 6.3.1
-    dev: false
-
-  /@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.0):
-    resolution: {integrity: sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-    dev: false
-
-  /@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.5):
-    resolution: {integrity: sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-    dev: true
 
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
@@ -806,48 +694,34 @@ packages:
     resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.22.15
-      '@babel/types': 7.23.6
+      '@babel/template': 7.23.9
+      '@babel/types': 7.23.9
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-member-expression-to-functions@7.23.0:
     resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
-  /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.0):
-    resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: false
-
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5):
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.5
+      '@babel/core': 7.23.9
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
@@ -858,53 +732,40 @@ packages:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-plugin-utils@7.22.5:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.0):
+  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.9):
     resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.0
+      '@babel/core': 7.23.9
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
-    dev: false
-
-  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.5):
-    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-    dev: true
 
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
     resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
 
   /@babel/helper-string-parser@7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
@@ -914,38 +775,19 @@ packages:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-option@7.22.15:
-    resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
+  /@babel/helper-validator-option@7.23.5:
+    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helpers@7.23.1:
-    resolution: {integrity: sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA==}
+  /@babel/helpers@7.23.9:
+    resolution: {integrity: sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.0
-      '@babel/types': 7.23.6
+      '@babel/template': 7.23.9
+      '@babel/traverse': 7.23.9
+      '@babel/types': 7.23.9
     transitivePeerDependencies:
       - supports-color
-    dev: false
-
-  /@babel/helpers@7.23.5:
-    resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.6
-    transitivePeerDependencies:
-      - supports-color
-
-  /@babel/highlight@7.22.20:
-    resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
 
   /@babel/highlight@7.23.4:
     resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
@@ -955,271 +797,169 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  /@babel/parser@7.23.0:
-    resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
+  /@babel/parser@7.23.9:
+    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.0
-    dev: false
+      '@babel/types': 7.23.9
 
-  /@babel/parser@7.23.6:
-    resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.23.6
-
-  /@babel/plugin-proposal-decorators@7.23.5(@babel/core@7.23.5):
-    resolution: {integrity: sha512-6IsY8jOeWibsengGlWIezp7cuZEFzNlAghFpzh9wiZwhQ42/hRcPnY/QV9HJoKTlujupinSlnQPiEy/u2C1ZfQ==}
+  /@babel/plugin-proposal-decorators@7.23.9(@babel/core@7.23.9):
+    resolution: {integrity: sha512-hJhBCb0+NnTWybvWq2WpbCYDOcflSbx0t+BYP65e5R9GVnukiDTi+on5bFkk4p7QGuv190H6KfNiV9Knf/3cZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/core': 7.23.9
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5)
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/plugin-syntax-decorators': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-decorators': 7.23.3(@babel/core@7.23.9)
     dev: true
 
-  /@babel/plugin-syntax-decorators@7.23.3(@babel/core@7.23.5):
+  /@babel/plugin-syntax-decorators@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.5):
+  /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.5):
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.9):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.0):
-    resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
+  /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.0
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.5):
-    resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.23.0):
-    resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: false
-
-  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.0):
+  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.0
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
-    dev: false
 
-  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.5):
-    resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==}
+  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-transform-modules-commonjs@7.23.0(@babel/core@7.23.0):
-    resolution: {integrity: sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-module-transforms': 7.23.0(@babel/core@7.23.0)
+      '@babel/core': 7.23.9
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-simple-access': 7.22.5
     dev: false
 
-  /@babel/plugin-transform-typescript@7.22.15(@babel/core@7.23.0):
-    resolution: {integrity: sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA==}
+  /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.9):
+    resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.0
+      '@babel/core': 7.23.9
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.22.15(@babel/core@7.23.0)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.23.0)
-    dev: false
+      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9)
 
-  /@babel/plugin-transform-typescript@7.23.5(@babel/core@7.23.0):
-    resolution: {integrity: sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==}
+  /@babel/preset-typescript@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.0)
+      '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.0)
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.9)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9)
+      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9)
     dev: false
 
-  /@babel/plugin-transform-typescript@7.23.5(@babel/core@7.23.5):
-    resolution: {integrity: sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.5)
-    dev: true
-
-  /@babel/preset-typescript@7.23.2(@babel/core@7.23.0):
-    resolution: {integrity: sha512-u4UJc1XsS1GhIGteM8rnGiIvf9rJpiVgMEeCnwlLA7WJPC+jcXWJAGxYmeqs5hOZD8BbAfnV5ezBOxQbb4OUxA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.0
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-option': 7.22.15
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.0)
-      '@babel/plugin-transform-modules-commonjs': 7.23.0(@babel/core@7.23.0)
-      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.0)
-    dev: false
-
-  /@babel/runtime@7.23.1:
-    resolution: {integrity: sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==}
+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
+      regenerator-runtime: 0.14.1
 
-  /@babel/runtime@7.23.8:
-    resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-
-  /@babel/standalone@7.23.1:
-    resolution: {integrity: sha512-a4muOYz1qUaSoybuUKwK90mRG4sf5rBeUbuzpuGLzG32ZDE/Y2YEebHDODFJN+BtyOKi19hrLfq2qbNyKMx0TA==}
+  /@babel/standalone@7.23.10:
+    resolution: {integrity: sha512-xqWviI/pt1Zb/d+6ilWa5IDL2mkDzsBnlHbreqnfyP3/QB/ofQ1bNVcHj8YQX154Rf/xZKR6y0s1ydVF3nAS8g==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/template@7.22.15:
-    resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
+  /@babel/template@7.23.9:
+    resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.6
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
 
-  /@babel/traverse@7.23.0:
-    resolution: {integrity: sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==}
+  /@babel/traverse@7.23.9:
+    resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.0
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.6
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.6
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/traverse@7.23.5:
-    resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.6
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/types@7.23.0:
-    resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
+  /@babel/types@7.23.9:
+    resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@babel/types@7.23.6:
-    resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.23.4
-      '@babel/helper-validator-identifier': 7.22.20
-      to-fast-properties: 2.0.0
-
-  /@cloudflare/kv-asset-handler@0.3.0:
-    resolution: {integrity: sha512-9CB/MKf/wdvbfkUdfrj+OkEwZ5b7rws0eogJ4293h+7b6KX5toPwym+VQKmILafNB9YiehqY0DlNrDcDhdWHSQ==}
+  /@cloudflare/kv-asset-handler@0.3.1:
+    resolution: {integrity: sha512-lKN2XCfKCmpKb86a1tl4GIwsJYDy9TGuwjhDELLmpKygQhw8X2xR4dusgpC5Tg7q1pB96Eb0rBo81kxSILQMwA==}
     dependencies:
       mime: 3.0.0
     dev: true
 
-  /@commitlint/cli@17.7.1:
-    resolution: {integrity: sha512-BCm/AT06SNCQtvFv921iNhudOHuY16LswT0R3OeolVGLk8oP+Rk9TfQfgjH7QPMjhvp76bNqGFEcpKojxUNW1g==}
+  /@commitlint/cli@17.8.1:
+    resolution: {integrity: sha512-ay+WbzQesE0Rv4EQKfNbSMiJJ12KdKTDzIt0tcK4k11FdsWmtwP0Kp1NWMOUswfIWo6Eb7p7Ln721Nx9FLNBjg==}
     engines: {node: '>=v14'}
     hasBin: true
     dependencies:
-      '@commitlint/format': 17.4.4
-      '@commitlint/lint': 17.7.0
-      '@commitlint/load': 17.7.1
-      '@commitlint/read': 17.5.1
-      '@commitlint/types': 17.4.4
+      '@commitlint/format': 17.8.1
+      '@commitlint/lint': 17.8.1
+      '@commitlint/load': 17.8.1
+      '@commitlint/read': 17.8.1
+      '@commitlint/types': 17.8.1
       execa: 5.1.1
       lodash.isfunction: 3.0.9
       resolve-from: 5.0.0
@@ -1230,26 +970,26 @@ packages:
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/config-conventional@17.7.0:
-    resolution: {integrity: sha512-iicqh2o6et+9kWaqsQiEYZzfLbtoWv9uZl8kbI8EGfnc0HeGafQBF7AJ0ylN9D/2kj6txltsdyQs8+2fTMwWEw==}
+  /@commitlint/config-conventional@17.8.1:
+    resolution: {integrity: sha512-NxCOHx1kgneig3VLauWJcDWS40DVjg7nKOpBEEK9E5fjJpQqLCilcnKkIIjdBH98kEO1q3NpE5NSrZ2kl/QGJg==}
     engines: {node: '>=v14'}
     dependencies:
       conventional-changelog-conventionalcommits: 6.1.0
     dev: true
 
-  /@commitlint/config-validator@17.6.7:
-    resolution: {integrity: sha512-vJSncmnzwMvpr3lIcm0I8YVVDJTzyjy7NZAeXbTXy+MPUdAr9pKyyg7Tx/ebOQ9kqzE6O9WT6jg2164br5UdsQ==}
+  /@commitlint/config-validator@17.8.1:
+    resolution: {integrity: sha512-UUgUC+sNiiMwkyiuIFR7JG2cfd9t/7MV8VB4TZ+q02ZFkHoduUS4tJGsCBWvBOGD9Btev6IecPMvlWUfJorkEA==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/types': 17.4.4
+      '@commitlint/types': 17.8.1
       ajv: 8.12.0
     dev: true
 
-  /@commitlint/ensure@17.6.7:
-    resolution: {integrity: sha512-mfDJOd1/O/eIb/h4qwXzUxkmskXDL9vNPnZ4AKYKiZALz4vHzwMxBSYtyL2mUIDeU9DRSpEUins8SeKtFkYHSw==}
+  /@commitlint/ensure@17.8.1:
+    resolution: {integrity: sha512-xjafwKxid8s1K23NFpL8JNo6JnY/ysetKo8kegVM7c8vs+kWLP8VrQq+NbhgVlmCojhEDbzQKp4eRXSjVOGsow==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/types': 17.4.4
+      '@commitlint/types': 17.8.1
       lodash.camelcase: 4.3.0
       lodash.kebabcase: 4.1.1
       lodash.snakecase: 4.1.1
@@ -1257,122 +997,122 @@ packages:
       lodash.upperfirst: 4.3.1
     dev: true
 
-  /@commitlint/execute-rule@17.4.0:
-    resolution: {integrity: sha512-LIgYXuCSO5Gvtc0t9bebAMSwd68ewzmqLypqI2Kke1rqOqqDbMpYcYfoPfFlv9eyLIh4jocHWwCK5FS7z9icUA==}
+  /@commitlint/execute-rule@17.8.1:
+    resolution: {integrity: sha512-JHVupQeSdNI6xzA9SqMF+p/JjrHTcrJdI02PwesQIDCIGUrv04hicJgCcws5nzaoZbROapPs0s6zeVHoxpMwFQ==}
     engines: {node: '>=v14'}
     dev: true
 
-  /@commitlint/format@17.4.4:
-    resolution: {integrity: sha512-+IS7vpC4Gd/x+uyQPTAt3hXs5NxnkqAZ3aqrHd5Bx/R9skyCAWusNlNbw3InDbAK6j166D9asQM8fnmYIa+CXQ==}
+  /@commitlint/format@17.8.1:
+    resolution: {integrity: sha512-f3oMTyZ84M9ht7fb93wbCKmWxO5/kKSbwuYvS867duVomoOsgrgljkGGIztmT/srZnaiGbaK8+Wf8Ik2tSr5eg==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/types': 17.4.4
+      '@commitlint/types': 17.8.1
       chalk: 4.1.2
     dev: true
 
-  /@commitlint/is-ignored@17.7.0:
-    resolution: {integrity: sha512-043rA7m45tyEfW7Zv2vZHF++176MLHH9h70fnPoYlB1slKBeKl8BwNIlnPg4xBdRBVNPaCqvXxWswx2GR4c9Hw==}
+  /@commitlint/is-ignored@17.8.1:
+    resolution: {integrity: sha512-UshMi4Ltb4ZlNn4F7WtSEugFDZmctzFpmbqvpyxD3la510J+PLcnyhf9chs7EryaRFJMdAKwsEKfNK0jL/QM4g==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/types': 17.4.4
+      '@commitlint/types': 17.8.1
       semver: 7.5.4
     dev: true
 
-  /@commitlint/lint@17.7.0:
-    resolution: {integrity: sha512-TCQihm7/uszA5z1Ux1vw+Nf3yHTgicus/+9HiUQk+kRSQawByxZNESeQoX9ujfVd3r4Sa+3fn0JQAguG4xvvbA==}
+  /@commitlint/lint@17.8.1:
+    resolution: {integrity: sha512-aQUlwIR1/VMv2D4GXSk7PfL5hIaFSfy6hSHV94O8Y27T5q+DlDEgd/cZ4KmVI+MWKzFfCTiTuWqjfRSfdRllCA==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/is-ignored': 17.7.0
-      '@commitlint/parse': 17.7.0
-      '@commitlint/rules': 17.7.0
-      '@commitlint/types': 17.4.4
+      '@commitlint/is-ignored': 17.8.1
+      '@commitlint/parse': 17.8.1
+      '@commitlint/rules': 17.8.1
+      '@commitlint/types': 17.8.1
     dev: true
 
-  /@commitlint/load@17.7.1:
-    resolution: {integrity: sha512-S/QSOjE1ztdogYj61p6n3UbkUvweR17FQ0zDbNtoTLc+Hz7vvfS7ehoTMQ27hPSjVBpp7SzEcOQu081RLjKHJQ==}
+  /@commitlint/load@17.8.1:
+    resolution: {integrity: sha512-iF4CL7KDFstP1kpVUkT8K2Wl17h2yx9VaR1ztTc8vzByWWcbO/WaKwxsnCOqow9tVAlzPfo1ywk9m2oJ9ucMqA==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/config-validator': 17.6.7
-      '@commitlint/execute-rule': 17.4.0
-      '@commitlint/resolve-extends': 17.6.7
-      '@commitlint/types': 17.4.4
-      '@types/node': 20.4.7
+      '@commitlint/config-validator': 17.8.1
+      '@commitlint/execute-rule': 17.8.1
+      '@commitlint/resolve-extends': 17.8.1
+      '@commitlint/types': 17.8.1
+      '@types/node': 20.5.1
       chalk: 4.1.2
-      cosmiconfig: 8.3.6(typescript@5.2.2)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.3.3)
+      cosmiconfig: 8.3.6(typescript@5.3.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6)(ts-node@10.9.2)(typescript@5.3.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/message@17.4.2:
-    resolution: {integrity: sha512-3XMNbzB+3bhKA1hSAWPCQA3lNxR4zaeQAQcHj0Hx5sVdO6ryXtgUBGGv+1ZCLMgAPRixuc6en+iNAzZ4NzAa8Q==}
+  /@commitlint/message@17.8.1:
+    resolution: {integrity: sha512-6bYL1GUQsD6bLhTH3QQty8pVFoETfFQlMn2Nzmz3AOLqRVfNNtXBaSY0dhZ0dM6A2MEq4+2d7L/2LP8TjqGRkA==}
     engines: {node: '>=v14'}
     dev: true
 
-  /@commitlint/parse@17.7.0:
-    resolution: {integrity: sha512-dIvFNUMCUHqq5Abv80mIEjLVfw8QNuA4DS7OWip4pcK/3h5wggmjVnlwGCDvDChkw2TjK1K6O+tAEV78oxjxag==}
+  /@commitlint/parse@17.8.1:
+    resolution: {integrity: sha512-/wLUickTo0rNpQgWwLPavTm7WbwkZoBy3X8PpkUmlSmQJyWQTj0m6bDjiykMaDt41qcUbfeFfaCvXfiR4EGnfw==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/types': 17.4.4
+      '@commitlint/types': 17.8.1
       conventional-changelog-angular: 6.0.0
       conventional-commits-parser: 4.0.0
     dev: true
 
-  /@commitlint/read@17.5.1:
-    resolution: {integrity: sha512-7IhfvEvB//p9aYW09YVclHbdf1u7g7QhxeYW9ZHSO8Huzp8Rz7m05aCO1mFG7G8M+7yfFnXB5xOmG18brqQIBg==}
+  /@commitlint/read@17.8.1:
+    resolution: {integrity: sha512-Fd55Oaz9irzBESPCdMd8vWWgxsW3OWR99wOntBDHgf9h7Y6OOHjWEdS9Xzen1GFndqgyoaFplQS5y7KZe0kO2w==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/top-level': 17.4.0
-      '@commitlint/types': 17.4.4
-      fs-extra: 11.1.1
+      '@commitlint/top-level': 17.8.1
+      '@commitlint/types': 17.8.1
+      fs-extra: 11.2.0
       git-raw-commits: 2.0.11
       minimist: 1.2.8
     dev: true
 
-  /@commitlint/resolve-extends@17.6.7:
-    resolution: {integrity: sha512-PfeoAwLHtbOaC9bGn/FADN156CqkFz6ZKiVDMjuC2N5N0740Ke56rKU7Wxdwya8R8xzLK9vZzHgNbuGhaOVKIg==}
+  /@commitlint/resolve-extends@17.8.1:
+    resolution: {integrity: sha512-W/ryRoQ0TSVXqJrx5SGkaYuAaE/BUontL1j1HsKckvM6e5ZaG0M9126zcwL6peKSuIetJi7E87PRQF8O86EW0Q==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/config-validator': 17.6.7
-      '@commitlint/types': 17.4.4
+      '@commitlint/config-validator': 17.8.1
+      '@commitlint/types': 17.8.1
       import-fresh: 3.3.0
       lodash.mergewith: 4.6.2
       resolve-from: 5.0.0
       resolve-global: 1.0.0
     dev: true
 
-  /@commitlint/rules@17.7.0:
-    resolution: {integrity: sha512-J3qTh0+ilUE5folSaoK91ByOb8XeQjiGcdIdiB/8UT1/Rd1itKo0ju/eQVGyFzgTMYt8HrDJnGTmNWwcMR1rmA==}
+  /@commitlint/rules@17.8.1:
+    resolution: {integrity: sha512-2b7OdVbN7MTAt9U0vKOYKCDsOvESVXxQmrvuVUZ0rGFMCrCPJWWP1GJ7f0lAypbDAhaGb8zqtdOr47192LBrIA==}
     engines: {node: '>=v14'}
     dependencies:
-      '@commitlint/ensure': 17.6.7
-      '@commitlint/message': 17.4.2
-      '@commitlint/to-lines': 17.4.0
-      '@commitlint/types': 17.4.4
+      '@commitlint/ensure': 17.8.1
+      '@commitlint/message': 17.8.1
+      '@commitlint/to-lines': 17.8.1
+      '@commitlint/types': 17.8.1
       execa: 5.1.1
     dev: true
 
-  /@commitlint/to-lines@17.4.0:
-    resolution: {integrity: sha512-LcIy/6ZZolsfwDUWfN1mJ+co09soSuNASfKEU5sCmgFCvX5iHwRYLiIuoqXzOVDYOy7E7IcHilr/KS0e5T+0Hg==}
+  /@commitlint/to-lines@17.8.1:
+    resolution: {integrity: sha512-LE0jb8CuR/mj6xJyrIk8VLz03OEzXFgLdivBytoooKO5xLt5yalc8Ma5guTWobw998sbR3ogDd+2jed03CFmJA==}
     engines: {node: '>=v14'}
     dev: true
 
-  /@commitlint/top-level@17.4.0:
-    resolution: {integrity: sha512-/1loE/g+dTTQgHnjoCy0AexKAEFyHsR2zRB4NWrZ6lZSMIxAhBJnmCqwao7b4H8888PsfoTBCLBYIw8vGnej8g==}
+  /@commitlint/top-level@17.8.1:
+    resolution: {integrity: sha512-l6+Z6rrNf5p333SHfEte6r+WkOxGlWK4bLuZKbtf/2TXRN+qhrvn1XE63VhD8Oe9oIHQ7F7W1nG2k/TJFhx2yA==}
     engines: {node: '>=v14'}
     dependencies:
       find-up: 5.0.0
     dev: true
 
-  /@commitlint/types@17.4.4:
-    resolution: {integrity: sha512-amRN8tRLYOsxRr6mTnGGGvB5EmW/4DDjLMgiwK3CCVEmN6Sr/6xePGEpWaspKkckILuUORCwe6VfDBw6uj4axQ==}
+  /@commitlint/types@17.8.1:
+    resolution: {integrity: sha512-PXDQXkAmiMEG162Bqdh9ChML/GJZo6vU+7F03ALKDK8zYc6SuAr47LjG7hGYRqUOz+WK0dU7bQ0xzuqFMdxzeQ==}
     engines: {node: '>=v14'}
     dependencies:
       chalk: 4.1.2
@@ -1388,11 +1128,11 @@ packages:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
-      preact: 10.17.1
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0)
+      preact: 10.19.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -1401,7 +1141,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -1418,10 +1158,10 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)(search-insights@2.13.0)
-      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.22.0)(algoliasearch@4.20.0)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)
       '@docsearch/css': 3.5.2
-      algoliasearch: 4.20.0
+      algoliasearch: 4.22.1
       search-insights: 2.13.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1431,10 +1171,10 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.9
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.2
+      '@emotion/serialize': 1.1.3
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -1458,7 +1198,7 @@ packages:
     dependencies:
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.2
+      '@emotion/serialize': 1.1.3
       '@emotion/sheet': 1.2.2
       '@emotion/utils': 1.2.1
     dev: false
@@ -1471,8 +1211,8 @@ packages:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: false
 
-  /@emotion/serialize@1.1.2:
-    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
+  /@emotion/serialize@1.1.3:
+    resolution: {integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==}
     dependencies:
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
@@ -1497,17 +1237,17 @@ packages:
     resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
     dev: false
 
-  /@es-joy/jsdoccomment@0.40.1:
-    resolution: {integrity: sha512-YORCdZSusAlBrFpZ77pJjc5r1bQs5caPWtAu+WWmiSo+8XaUzseapVrfAtiRFbQWnrBxxLLEwF6f6ZG/UgCQCg==}
+  /@es-joy/jsdoccomment@0.41.0:
+    resolution: {integrity: sha512-aKUhyn1QI5Ksbqcr3fFJj16p99QdjUxXAEuFst1Z47DRyoiMwivIH9MV/ARcJOCXVjPfjITciej8ZD2O/6qUmw==}
     engines: {node: '>=16'}
     dependencies:
-      comment-parser: 1.4.0
+      comment-parser: 1.4.1
       esquery: 1.5.0
       jsdoc-type-pratt-parser: 4.0.0
     dev: true
 
-  /@esbuild/aix-ppc64@0.19.10:
-    resolution: {integrity: sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==}
+  /@esbuild/aix-ppc64@0.19.12:
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
@@ -1515,8 +1255,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/aix-ppc64@0.19.11:
-    resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==}
+  /@esbuild/aix-ppc64@0.20.0:
+    resolution: {integrity: sha512-fGFDEctNh0CcSwsiRPxiaqX0P5rq+AqE0SRhYGZ4PX46Lg1FNR6oCxJghf8YgY0WQEgQuh3lErUFE4KxLeRmmw==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
@@ -1533,8 +1273,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.19.10:
-    resolution: {integrity: sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==}
+  /@esbuild/android-arm64@0.19.12:
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -1542,17 +1282,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.19.11:
-    resolution: {integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-arm64@0.19.8:
-    resolution: {integrity: sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==}
+  /@esbuild/android-arm64@0.20.0:
+    resolution: {integrity: sha512-aVpnM4lURNkp0D3qPoAzSG92VXStYmoVPOgXveAUoQBWRSuQzt51yvSju29J6AHPmwY1BjH49uR29oyfH1ra8Q==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -1569,8 +1300,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.19.10:
-    resolution: {integrity: sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==}
+  /@esbuild/android-arm@0.19.12:
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -1578,17 +1309,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.19.11:
-    resolution: {integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-arm@0.19.8:
-    resolution: {integrity: sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==}
+  /@esbuild/android-arm@0.20.0:
+    resolution: {integrity: sha512-3bMAfInvByLHfJwYPJRlpTeaQA75n8C/QKpEaiS4HrFWFiJlNI0vzq/zCjBrhAYcPyVPG7Eo9dMrcQXuqmNk5g==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -1605,8 +1327,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.19.10:
-    resolution: {integrity: sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==}
+  /@esbuild/android-x64@0.19.12:
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -1614,17 +1336,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.19.11:
-    resolution: {integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/android-x64@0.19.8:
-    resolution: {integrity: sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==}
+  /@esbuild/android-x64@0.20.0:
+    resolution: {integrity: sha512-uK7wAnlRvjkCPzh8jJ+QejFyrP8ObKuR5cBIsQZ+qbMunwR8sbd8krmMbxTLSrDhiPZaJYKQAU5Y3iMDcZPhyQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -1641,8 +1354,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.19.10:
-    resolution: {integrity: sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==}
+  /@esbuild/darwin-arm64@0.19.12:
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -1650,17 +1363,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.19.11:
-    resolution: {integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/darwin-arm64@0.19.8:
-    resolution: {integrity: sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==}
+  /@esbuild/darwin-arm64@0.20.0:
+    resolution: {integrity: sha512-AjEcivGAlPs3UAcJedMa9qYg9eSfU6FnGHJjT8s346HSKkrcWlYezGE8VaO2xKfvvlZkgAhyvl06OJOxiMgOYQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -1677,8 +1381,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.19.10:
-    resolution: {integrity: sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==}
+  /@esbuild/darwin-x64@0.19.12:
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -1686,17 +1390,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.19.11:
-    resolution: {integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/darwin-x64@0.19.8:
-    resolution: {integrity: sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==}
+  /@esbuild/darwin-x64@0.20.0:
+    resolution: {integrity: sha512-bsgTPoyYDnPv8ER0HqnJggXK6RyFy4PH4rtsId0V7Efa90u2+EifxytE9pZnsDgExgkARy24WUQGv9irVbTvIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -1713,8 +1408,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.19.10:
-    resolution: {integrity: sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==}
+  /@esbuild/freebsd-arm64@0.19.12:
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -1722,17 +1417,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.19.11:
-    resolution: {integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.19.8:
-    resolution: {integrity: sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==}
+  /@esbuild/freebsd-arm64@0.20.0:
+    resolution: {integrity: sha512-kQ7jYdlKS335mpGbMW5tEe3IrQFIok9r84EM3PXB8qBFJPSc6dpWfrtsC/y1pyrz82xfUIn5ZrnSHQQsd6jebQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -1749,8 +1435,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.19.10:
-    resolution: {integrity: sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==}
+  /@esbuild/freebsd-x64@0.19.12:
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -1758,17 +1444,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.19.11:
-    resolution: {integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-x64@0.19.8:
-    resolution: {integrity: sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==}
+  /@esbuild/freebsd-x64@0.20.0:
+    resolution: {integrity: sha512-uG8B0WSepMRsBNVXAQcHf9+Ko/Tr+XqmK7Ptel9HVmnykupXdS4J7ovSQUIi0tQGIndhbqWLaIL/qO/cWhXKyQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -1785,8 +1462,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.19.10:
-    resolution: {integrity: sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==}
+  /@esbuild/linux-arm64@0.19.12:
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -1794,17 +1471,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.19.11:
-    resolution: {integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.19.8:
-    resolution: {integrity: sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==}
+  /@esbuild/linux-arm64@0.20.0:
+    resolution: {integrity: sha512-uTtyYAP5veqi2z9b6Gr0NUoNv9F/rOzI8tOD5jKcCvRUn7T60Bb+42NDBCWNhMjkQzI0qqwXkQGo1SY41G52nw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -1821,8 +1489,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.19.10:
-    resolution: {integrity: sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==}
+  /@esbuild/linux-arm@0.19.12:
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -1830,17 +1498,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.19.11:
-    resolution: {integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm@0.19.8:
-    resolution: {integrity: sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==}
+  /@esbuild/linux-arm@0.20.0:
+    resolution: {integrity: sha512-2ezuhdiZw8vuHf1HKSf4TIk80naTbP9At7sOqZmdVwvvMyuoDiZB49YZKLsLOfKIr77+I40dWpHVeY5JHpIEIg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -1857,8 +1516,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.19.10:
-    resolution: {integrity: sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==}
+  /@esbuild/linux-ia32@0.19.12:
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -1866,17 +1525,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.19.11:
-    resolution: {integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-ia32@0.19.8:
-    resolution: {integrity: sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==}
+  /@esbuild/linux-ia32@0.20.0:
+    resolution: {integrity: sha512-c88wwtfs8tTffPaoJ+SQn3y+lKtgTzyjkD8NgsyCtCmtoIC8RDL7PrJU05an/e9VuAke6eJqGkoMhJK1RY6z4w==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -1893,8 +1543,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.19.10:
-    resolution: {integrity: sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==}
+  /@esbuild/linux-loong64@0.19.12:
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -1902,17 +1552,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.19.11:
-    resolution: {integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.19.8:
-    resolution: {integrity: sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==}
+  /@esbuild/linux-loong64@0.20.0:
+    resolution: {integrity: sha512-lR2rr/128/6svngnVta6JN4gxSXle/yZEZL3o4XZ6esOqhyR4wsKyfu6qXAL04S4S5CgGfG+GYZnjFd4YiG3Aw==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -1929,8 +1570,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.19.10:
-    resolution: {integrity: sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==}
+  /@esbuild/linux-mips64el@0.19.12:
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -1938,17 +1579,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.19.11:
-    resolution: {integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-mips64el@0.19.8:
-    resolution: {integrity: sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==}
+  /@esbuild/linux-mips64el@0.20.0:
+    resolution: {integrity: sha512-9Sycc+1uUsDnJCelDf6ZNqgZQoK1mJvFtqf2MUz4ujTxGhvCWw+4chYfDLPepMEvVL9PDwn6HrXad5yOrNzIsQ==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -1965,8 +1597,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.19.10:
-    resolution: {integrity: sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==}
+  /@esbuild/linux-ppc64@0.19.12:
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -1974,17 +1606,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.19.11:
-    resolution: {integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-ppc64@0.19.8:
-    resolution: {integrity: sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==}
+  /@esbuild/linux-ppc64@0.20.0:
+    resolution: {integrity: sha512-CoWSaaAXOZd+CjbUTdXIJE/t7Oz+4g90A3VBCHLbfuc5yUQU/nFDLOzQsN0cdxgXd97lYW/psIIBdjzQIwTBGw==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -2001,8 +1624,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.19.10:
-    resolution: {integrity: sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==}
+  /@esbuild/linux-riscv64@0.19.12:
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -2010,17 +1633,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.19.11:
-    resolution: {integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.19.8:
-    resolution: {integrity: sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==}
+  /@esbuild/linux-riscv64@0.20.0:
+    resolution: {integrity: sha512-mlb1hg/eYRJUpv8h/x+4ShgoNLL8wgZ64SUr26KwglTYnwAWjkhR2GpoKftDbPOCnodA9t4Y/b68H4J9XmmPzA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -2037,8 +1651,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.19.10:
-    resolution: {integrity: sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==}
+  /@esbuild/linux-s390x@0.19.12:
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -2046,17 +1660,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.19.11:
-    resolution: {integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-s390x@0.19.8:
-    resolution: {integrity: sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==}
+  /@esbuild/linux-s390x@0.20.0:
+    resolution: {integrity: sha512-fgf9ubb53xSnOBqyvWEY6ukBNRl1mVX1srPNu06B6mNsNK20JfH6xV6jECzrQ69/VMiTLvHMicQR/PgTOgqJUQ==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -2073,8 +1678,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.19.10:
-    resolution: {integrity: sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==}
+  /@esbuild/linux-x64@0.19.12:
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -2082,17 +1687,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.19.11:
-    resolution: {integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-x64@0.19.8:
-    resolution: {integrity: sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==}
+  /@esbuild/linux-x64@0.20.0:
+    resolution: {integrity: sha512-H9Eu6MGse++204XZcYsse1yFHmRXEWgadk2N58O/xd50P9EvFMLJTQLg+lB4E1cF2xhLZU5luSWtGTb0l9UeSg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -2109,8 +1705,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.19.10:
-    resolution: {integrity: sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==}
+  /@esbuild/netbsd-x64@0.19.12:
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -2118,17 +1714,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.19.11:
-    resolution: {integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/netbsd-x64@0.19.8:
-    resolution: {integrity: sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==}
+  /@esbuild/netbsd-x64@0.20.0:
+    resolution: {integrity: sha512-lCT675rTN1v8Fo+RGrE5KjSnfY0x9Og4RN7t7lVrN3vMSjy34/+3na0q7RIfWDAj0e0rCh0OL+P88lu3Rt21MQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -2145,8 +1732,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.19.10:
-    resolution: {integrity: sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==}
+  /@esbuild/openbsd-x64@0.19.12:
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -2154,17 +1741,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.19.11:
-    resolution: {integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/openbsd-x64@0.19.8:
-    resolution: {integrity: sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==}
+  /@esbuild/openbsd-x64@0.20.0:
+    resolution: {integrity: sha512-HKoUGXz/TOVXKQ+67NhxyHv+aDSZf44QpWLa3I1lLvAwGq8x1k0T+e2HHSRvxWhfJrFxaaqre1+YyzQ99KixoA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -2181,8 +1759,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.19.10:
-    resolution: {integrity: sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==}
+  /@esbuild/sunos-x64@0.19.12:
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -2190,17 +1768,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.19.11:
-    resolution: {integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/sunos-x64@0.19.8:
-    resolution: {integrity: sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==}
+  /@esbuild/sunos-x64@0.20.0:
+    resolution: {integrity: sha512-GDwAqgHQm1mVoPppGsoq4WJwT3vhnz/2N62CzhvApFD1eJyTroob30FPpOZabN+FgCjhG+AgcZyOPIkR8dfD7g==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -2217,8 +1786,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.19.10:
-    resolution: {integrity: sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==}
+  /@esbuild/win32-arm64@0.19.12:
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -2226,17 +1795,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.19.11:
-    resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.19.8:
-    resolution: {integrity: sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==}
+  /@esbuild/win32-arm64@0.20.0:
+    resolution: {integrity: sha512-0vYsP8aC4TvMlOQYozoksiaxjlvUcQrac+muDqj1Fxy6jh9l9CZJzj7zmh8JGfiV49cYLTorFLxg7593pGldwQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -2253,8 +1813,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.19.10:
-    resolution: {integrity: sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==}
+  /@esbuild/win32-ia32@0.19.12:
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -2262,17 +1822,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.19.11:
-    resolution: {integrity: sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-ia32@0.19.8:
-    resolution: {integrity: sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==}
+  /@esbuild/win32-ia32@0.20.0:
+    resolution: {integrity: sha512-p98u4rIgfh4gdpV00IqknBD5pC84LCub+4a3MO+zjqvU5MVXOc3hqR2UgT2jI2nh3h8s9EQxmOsVI3tyzv1iFg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -2289,8 +1840,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.19.10:
-    resolution: {integrity: sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==}
+  /@esbuild/win32-x64@0.19.12:
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -2298,8 +1849,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.19.11:
-    resolution: {integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==}
+  /@esbuild/win32-x64@0.20.0:
+    resolution: {integrity: sha512-NgJnesu1RtWihtTtXGFMU5YSE6JyyHPMxCwBZK7a6/8d31GuSo9l0Ss7w1Jw5QnKUawG6UEehs883kcXf5fYwg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -2307,25 +1858,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.19.8:
-    resolution: {integrity: sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.53.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.53.0
-      eslint-visitor-keys: 3.4.3
-    dev: true
-
   /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2341,28 +1873,6 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint-community/regexpp@4.9.0:
-    resolution: {integrity: sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
-
-  /@eslint/eslintrc@2.1.3:
-    resolution: {integrity: sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.22.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@eslint/eslintrc@2.1.4:
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2371,7 +1881,7 @@ packages:
       debug: 4.3.4
       espree: 9.6.1
       globals: 13.24.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -2380,11 +1890,6 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.53.0:
-    resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /@eslint/js@8.56.0:
     resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2395,25 +1900,12 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /@floating-ui/core@1.5.0:
-    resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
-    dependencies:
-      '@floating-ui/utils': 0.1.4
-    dev: false
-
   /@floating-ui/core@1.6.0:
     resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
     dependencies:
       '@floating-ui/utils': 0.2.1
     dev: false
 
-  /@floating-ui/dom@1.5.3:
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
-    dependencies:
-      '@floating-ui/core': 1.5.0
-      '@floating-ui/utils': 0.1.4
-    dev: false
-
   /@floating-ui/dom@1.6.1:
     resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==}
     dependencies:
@@ -2421,30 +1913,16 @@ packages:
       '@floating-ui/utils': 0.2.1
     dev: false
 
-  /@floating-ui/utils@0.1.4:
-    resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
-    dev: false
-
   /@floating-ui/utils@0.2.1:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
-  /@floating-ui/vue@1.0.2(vue@3.4.15):
-    resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
-    dependencies:
-      '@floating-ui/dom': 1.5.3
-      vue-demi: 0.14.6(vue@3.4.15)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /@floating-ui/vue@1.0.6(vue@3.4.15):
     resolution: {integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==}
     dependencies:
       '@floating-ui/dom': 1.6.1
       '@floating-ui/utils': 0.2.1
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2454,11 +1932,11 @@ packages:
     resolution: {integrity: sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig==}
     dev: false
 
-  /@humanwhocodes/config-array@0.11.13:
-    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
+  /@humanwhocodes/config-array@0.11.14:
+    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.1
+      '@humanwhocodes/object-schema': 2.0.2
       debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
@@ -2470,24 +1948,24 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/object-schema@2.0.1:
-    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
+  /@humanwhocodes/object-schema@2.0.2:
+    resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
-  /@iconify-json/radix-icons@1.1.11:
-    resolution: {integrity: sha512-0FkllP6ghJakWHC0oQb+Jwg4W52mCDkV3JvVrXoyCPjG4kxX4wNhl8Ilk1dfT1EM+YvEXxrR2Mv63ySzVeYr9w==}
+  /@iconify-json/radix-icons@1.1.14:
+    resolution: {integrity: sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
 
-  /@iconify-json/tabler@1.1.92:
-    resolution: {integrity: sha512-zZD5uSYz6uNZ/qh9T4l3BObTq03A7NcY+9dV4jVgYhdw9fc7JZmFFA7rJkybfHHrlDRq548hmDCmEJuR9blLdg==}
+  /@iconify-json/tabler@1.1.105:
+    resolution: {integrity: sha512-USJbNfa0fAHBLilxTKn70wkvFnopmfcomfpqD0ul/69uyZnonztHhyrbM8MI9Ua4eYXaPymoB7tuZ+Ionx6xfg==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
 
-  /@iconify/json@2.2.120:
-    resolution: {integrity: sha512-vxE3fNGgQEEu2nvMuR/g4Cu/CxPpQWjc3cwsk/KY3iTN4hLKL0lnBsi1GmQL1ITSsyib2f72h329j+D9S9esbg==}
+  /@iconify/json@2.2.178:
+    resolution: {integrity: sha512-AYw9z/Lu9Y0Q5V0DvyhysJA3ohwKMOgXxCJ1AzTnsZizbUqZ7zh5/wnBegv1ikBEISAY0tC/R46j0tJBjliHkw==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -2501,7 +1979,7 @@ packages:
     resolution: {integrity: sha512-t8TeKlYK/5i9yTY9VAGAE4P0qQHd/0vH+VSRO+bdpxlt8wqB6f2I0/IrciRsdeFZPMoL8IICgP7lgl2ZtbG8Tw==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.6
+      '@antfu/utils': 0.7.7
       '@iconify/types': 2.0.0
       debug: 4.3.4
       kolorist: 1.8.0
@@ -2547,7 +2025,7 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.22
 
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
@@ -2561,14 +2039,14 @@ packages:
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.22
     dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
+  /@jridgewell/trace-mapping@0.3.22:
+    resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -2669,7 +2147,7 @@ packages:
       fast-copy: 3.0.1
       fast-equals: 5.0.1
       ohash: 1.1.3
-      type-fest: 4.3.2
+      type-fest: 4.10.2
     dev: false
 
   /@morev/vue-transitions@2.3.6(vue@3.4.15):
@@ -2680,18 +2158,18 @@ packages:
       vue: ^2.6.14 || >=3
     dependencies:
       '@morev/utils': 2.8.1
-      '@nuxt/kit': 3.7.4
+      '@nuxt/kit': 3.10.0
       vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: false
 
-  /@netlify/functions@2.4.0:
-    resolution: {integrity: sha512-dIqhdj5u4Lu/8qbYwtYpn8NfvIyPHbSTV2lAP4ocL+iwC9As06AXT0wa/xOpO2vRWJa0IMxdZaqCPnkyHlHiyg==}
+  /@netlify/functions@2.5.1:
+    resolution: {integrity: sha512-7//hmiFHXGusAzuzEuXvRT9ItaeRjRs5lRs6lYUkaAXO1jnTWYDB2XdqFq5X4yMRX+/A96nrQ2HwCE+Pd0YMwg==}
     engines: {node: '>=14.0.0'}
     dependencies:
-      '@netlify/serverless-functions-api': 1.11.0
+      '@netlify/serverless-functions-api': 1.13.0
       is-promise: 4.0.0
     dev: true
 
@@ -2700,8 +2178,8 @@ packages:
     engines: {node: ^14.16.0 || >=16.0.0}
     dev: true
 
-  /@netlify/serverless-functions-api@1.11.0:
-    resolution: {integrity: sha512-3splAsr2CekL7VTwgo6yTvzD2+f269/s+TJafYazonqMNNo31yzvFxD5HpLtni4DNE1ppymVKZ4X/rLN3yl0vQ==}
+  /@netlify/serverless-functions-api@1.13.0:
+    resolution: {integrity: sha512-H3SMpHw24jWjnEMqbXgILWdo3/Iv/2DRzOZZevqqEswRTOWcQJGlU35Dth72VAOxhPyWXjulogG1zJNRw8m2sQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@netlify/node-cookies': 0.1.0
@@ -2724,26 +2202,27 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
+      fastq: 1.17.0
 
-  /@npmcli/agent@2.1.1:
-    resolution: {integrity: sha512-6RlbiOAi6L6uUYF4/CDEkDZQnKw0XDsFJVrEpnib8rAx2WRMOsUyAdgnvDpX/fdkDWxtqE+NHwF465llI2wR0g==}
+  /@npmcli/agent@2.2.0:
+    resolution: {integrity: sha512-2yThA1Es98orMkpSLVqlDZAMPK3jHJhifP2gnNUdk1754uZ8yI5c+ulCoVG+WlntQA6MzhrURMXjSd9Z7dJ2/Q==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
+      agent-base: 7.1.0
       http-proxy-agent: 7.0.0
       https-proxy-agent: 7.0.2
-      lru-cache: 10.1.0
+      lru-cache: 10.2.0
       socks-proxy-agent: 8.0.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@npmcli/config@8.0.1:
-    resolution: {integrity: sha512-NKGmMYv/YTLwJr+qK9CvADSe82NTM9AFwFFpsZpVcPCT3XTdxvJBdXi8xvXWjHSCMb0Cb+7FtU/a5qqguCOhxA==}
+  /@npmcli/config@8.1.0:
+    resolution: {integrity: sha512-61LNEybTFaa9Z/f8y6X9s2Blc75aijZK67LxqC5xicBcfkw8M/88nYrRXGXxAUKm6GRlxTZ216dp1UK2+TbaYw==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@npmcli/map-workspaces': 3.0.4
-      ci-info: 3.8.0
+      ci-info: 4.0.0
       ini: 4.1.1
       nopt: 7.2.0
       proc-log: 3.0.0
@@ -2759,12 +2238,12 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@npmcli/git@5.0.3:
-    resolution: {integrity: sha512-UZp9NwK+AynTrKvHn5k3KviW/hA5eENmFsu3iAPe7sWRt0lFUdsY/wXIYjpDFe7cdSNwOIzbObfwgt6eL5/2zw==}
+  /@npmcli/git@5.0.4:
+    resolution: {integrity: sha512-nr6/WezNzuYUppzXRaYu/W4aT5rLxdXqEFupbh6e/ovlYFQ8hpu1UUPV3Ir/YTl+74iXl2ZOMlGzudh9ZPUchQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@npmcli/promise-spawn': 7.0.0
-      lru-cache: 10.1.0
+      '@npmcli/promise-spawn': 7.0.1
+      lru-cache: 10.2.0
       npm-pick-manifest: 9.0.0
       proc-log: 3.0.0
       promise-inflight: 1.0.1(bluebird@3.7.2)
@@ -2804,23 +2283,39 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
-  /@npmcli/promise-spawn@7.0.0:
-    resolution: {integrity: sha512-wBqcGsMELZna0jDblGd7UXgOby45TQaMWmbFwWX+SEotk4HV6zG2t6rT9siyLhPk4P6YYqgfL1UO8nMWDBVJXQ==}
+  /@npmcli/package-json@5.0.0:
+    resolution: {integrity: sha512-OI2zdYBLhQ7kpNPaJxiflofYIpkNLi+lnGdzqUOfRmCF3r2l1nadcjtCYMJKv/Utm/ZtlffaUuTiAktPHbc17g==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+    dependencies:
+      '@npmcli/git': 5.0.4
+      glob: 10.3.10
+      hosted-git-info: 7.0.1
+      json-parse-even-better-errors: 3.0.1
+      normalize-package-data: 6.0.0
+      proc-log: 3.0.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - bluebird
+    dev: true
+
+  /@npmcli/promise-spawn@7.0.1:
+    resolution: {integrity: sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       which: 4.0.0
     dev: true
 
-  /@npmcli/run-script@7.0.1:
-    resolution: {integrity: sha512-Od/JMrgkjZ8alyBE0IzeqZDiF1jgMez9Gkc/OYrCkHHiXNwM0wc6s7+h+xM7kYDZkS0tAoOLr9VvygyE5+2F7g==}
+  /@npmcli/run-script@7.0.4:
+    resolution: {integrity: sha512-9ApYM/3+rBt9V80aYg6tZfzj3UWdiYyCt7gJUD1VJKvWF5nwKDSICXbYIQbspFTq6TOpbsEtIC0LArB8d9PFmg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@npmcli/node-gyp': 3.0.0
-      '@npmcli/promise-spawn': 7.0.0
-      node-gyp: 9.4.0
-      read-package-json-fast: 3.0.2
+      '@npmcli/package-json': 5.0.0
+      '@npmcli/promise-spawn': 7.0.1
+      node-gyp: 10.0.1
       which: 4.0.0
     transitivePeerDependencies:
+      - bluebird
       - supports-color
     dev: true
 
@@ -2828,31 +2323,31 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.1):
-    resolution: {integrity: sha512-AXNeI1dBilNryCmwuTd3lU7CrPBhzUJ5ntTFiXw9MmFwe5QT3NOxDFOv0gX7z1DFnmBEmx5mPKWysCwh7htEnQ==}
+  /@nuxt/devtools-kit@1.0.8(nuxt@3.10.0)(rollup@3.29.4)(vite@5.0.12):
+    resolution: {integrity: sha512-j7bNZmoAXQ1a8qv6j6zk4c/aekrxYqYVQM21o/Hy4XHCUq4fajSgpoc8mjyWJSTfpkOmuLyEzMexpDWiIVSr6A==}
     peerDependencies:
-      nuxt: ^3.8.1
+      nuxt: ^3.9.0
       vite: '*'
     dependencies:
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
-      '@nuxt/schema': 3.8.2(rollup@3.29.4)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
+      '@nuxt/schema': 3.10.0(rollup@3.29.4)
       execa: 7.2.0
-      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@4.5.1)
-      vite: 4.5.1(@types/node@20.10.1)
+      nuxt: 3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@5.0.12)
+      vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@nuxt/devtools-wizard@1.0.4:
-    resolution: {integrity: sha512-3QHRfmkiITM67lAzSIOiI6N4Qzi5i705TCQ53pHQbce0+E00f5vck2hPauflN2X0/M3SZdkUV8UayaHc4egmdA==}
+  /@nuxt/devtools-wizard@1.0.8:
+    resolution: {integrity: sha512-RxyOlM7Isk5npwXwDJ/rjm9ekX5sTNG0LS0VOBMdSx+D5nlRPMRr/r9yO+9WQDyzPLClLzHaXRHBWLPlRX3IMw==}
     hasBin: true
     dependencies:
       consola: 3.2.3
       diff: 5.1.0
       execa: 7.2.0
       global-directory: 4.0.1
-      magicast: 0.3.2
+      magicast: 0.3.3
       pathe: 1.1.2
       pkg-types: 1.0.3
       prompts: 2.4.2
@@ -2860,72 +2355,55 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@nuxt/devtools@1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.1):
-    resolution: {integrity: sha512-G1Oo9+TaOYzePIXpNX+Zzalw/rJyIZKZpZmXfzolPlOJSA1i0JKzZX6Z7iQHdqPwNJ8t+HnVaF4PghPIpo1kwg==}
+  /@nuxt/devtools@1.0.8(nuxt@3.10.0)(rollup@3.29.4)(vite@5.0.12):
+    resolution: {integrity: sha512-o6aBFEBxc8OgVHV4OPe2g0q9tFIe9HiTxRiJnlTJ+jHvOQsBLS651ArdVtwLChf9UdMouFlpLLJ1HteZqTbtsQ==}
     hasBin: true
     peerDependencies:
-      nuxt: ^3.8.1
+      nuxt: ^3.9.0
       vite: '*'
     dependencies:
-      '@antfu/utils': 0.7.6
-      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.1)
-      '@nuxt/devtools-wizard': 1.0.4
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
-      birpc: 0.2.14
+      '@antfu/utils': 0.7.7
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@3.29.4)(vite@5.0.12)
+      '@nuxt/devtools-wizard': 1.0.8
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
+      birpc: 0.2.15
       consola: 3.2.3
       destr: 2.0.2
       error-stack-parser-es: 0.1.1
       execa: 7.2.0
       fast-glob: 3.3.2
       flatted: 3.2.9
-      get-port-please: 3.1.1
-      h3: 1.9.0
+      get-port-please: 3.1.2
       hookable: 5.5.3
       image-meta: 0.2.0
       is-installed-globally: 1.0.0
       launch-editor: 2.6.1
       local-pkg: 0.5.0
-      magicast: 0.3.2
-      nitropack: 2.8.1
-      nuxt: 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@4.5.1)
-      nypm: 0.3.3
-      ofetch: 1.3.3
+      magicast: 0.3.3
+      nuxt: 3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@5.0.12)
+      nypm: 0.3.6
       ohash: 1.1.3
-      pacote: 17.0.4
+      pacote: 17.0.6
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
-      scule: 1.1.0
+      scule: 1.2.0
       semver: 7.5.4
-      simple-git: 3.21.0
-      sirv: 2.0.3
-      unimport: 3.6.0(rollup@3.29.4)
-      vite: 4.5.1(@types/node@20.10.1)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@4.5.1)
-      vite-plugin-vue-inspector: 4.0.0(vite@4.5.1)
+      simple-git: 3.22.0
+      sirv: 2.0.4
+      unimport: 3.7.1(rollup@3.29.4)
+      vite: 5.0.12(@types/node@20.11.16)
+      vite-plugin-inspect: 0.8.3(@nuxt/kit@3.10.0)(rollup@3.29.4)(vite@5.0.12)
+      vite-plugin-vue-inspector: 4.0.2(vite@5.0.12)
       which: 3.0.1
-      ws: 8.14.2
+      ws: 8.16.0
     transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/kv'
       - bluebird
       - bufferutil
-      - encoding
-      - idb-keyval
       - rollup
       - supports-color
       - utf-8-validate
-      - xml2js
     dev: true
 
   /@nuxt/eslint-config@0.2.0(eslint@8.56.0):
@@ -2933,107 +2411,80 @@ packages:
     peerDependencies:
       eslint: ^8.48.0
     dependencies:
-      '@rushstack/eslint-patch': 1.6.0
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/parser': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
+      '@rushstack/eslint-patch': 1.7.2
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
-      eslint-plugin-vue: 9.17.0(eslint@8.56.0)
+      eslint-plugin-vue: 9.21.1(eslint@8.56.0)
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@nuxt/kit@3.7.4:
-    resolution: {integrity: sha512-/S5abZL62BITCvC/TY3KWA6N721U1Osln3cQdBb56XHIeafZCBVqTi92Xb0o7ovl72mMRhrKwRu7elzvz9oT/g==}
+  /@nuxt/kit@3.10.0:
+    resolution: {integrity: sha512-SNyZqk57kyEvTdFSYhQCYFCwT/EQO13O9SWtY2ULscdhXd2C5D0SQW9E7OM7O/31Fa+KQ9RnSTA8DnwaOFne2g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.7.4
-      c12: 1.4.2
+      '@nuxt/schema': 3.10.0
+      c12: 1.6.1
       consola: 3.2.3
-      defu: 6.1.2
-      globby: 13.2.2
+      defu: 6.1.4
+      globby: 14.0.0
       hash-sum: 2.0.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       jiti: 1.21.0
       knitwork: 1.0.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       pkg-types: 1.0.3
-      scule: 1.0.0
+      scule: 1.2.0
       semver: 7.5.4
-      ufo: 1.3.0
+      ufo: 1.3.2
       unctx: 2.3.1
-      unimport: 3.4.0(rollup@3.29.4)
-      untyped: 1.4.0
+      unimport: 3.7.1
+      untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: false
 
-  /@nuxt/kit@3.8.1(rollup@3.29.4):
-    resolution: {integrity: sha512-DrhG1Z85iH68QOTkgfb0HVfM2g7+CfcMWrFWMDwck9ofyM2RXQUZyfmvMedwBnui1AjjpgpLO9078yZM+RqNUg==}
+  /@nuxt/kit@3.10.0(rollup@3.29.4):
+    resolution: {integrity: sha512-SNyZqk57kyEvTdFSYhQCYFCwT/EQO13O9SWtY2ULscdhXd2C5D0SQW9E7OM7O/31Fa+KQ9RnSTA8DnwaOFne2g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.8.1(rollup@3.29.4)
-      c12: 1.5.1
+      '@nuxt/schema': 3.10.0(rollup@3.29.4)
+      c12: 1.6.1
       consola: 3.2.3
-      defu: 6.1.3
-      globby: 13.2.2
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.21.0
-      knitwork: 1.0.0
-      mlly: 1.4.2
-      pathe: 1.1.2
-      pkg-types: 1.0.3
-      scule: 1.0.0
-      semver: 7.5.4
-      ufo: 1.3.2
-      unctx: 2.3.1
-      unimport: 3.4.0(rollup@3.29.4)
-      untyped: 1.4.0
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
-  /@nuxt/kit@3.8.2(rollup@3.29.4):
-    resolution: {integrity: sha512-LrXCm8hAkw+zpX8teUSD/LqXRarlXjbRiYxDkaqw739JSHFReWzBFgJbojsJqL4h1XIEScDGGOWiEgO4QO1sMg==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/schema': 3.8.2(rollup@3.29.4)
-      c12: 1.5.1
-      consola: 3.2.3
-      defu: 6.1.3
+      defu: 6.1.4
       globby: 14.0.0
       hash-sum: 2.0.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       jiti: 1.21.0
       knitwork: 1.0.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       pkg-types: 1.0.3
-      scule: 1.1.0
+      scule: 1.2.0
       semver: 7.5.4
       ufo: 1.3.2
       unctx: 2.3.1
-      unimport: 3.6.0(rollup@3.29.4)
-      untyped: 1.4.0
+      unimport: 3.7.1(rollup@3.29.4)
+      untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/module-builder@0.5.4(@nuxt/kit@3.8.2)(nuxi@3.10.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-lCPh8s8LSfYqHgIMMsctDhz+AX1z6TnATkUes/GXc/No4kApC0zmJkQWrbtDRjmsWjElwl1kE7l7OzYdYc3d4w==}
+  /@nuxt/module-builder@0.5.5(@nuxt/kit@3.10.0)(nuxi@3.10.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-ifFfwA1rbSXSae25RmqA2kAbV3xoShZNrq1yK8VXB/EnIcDn4WiaYR1PytaSxIt5zsvWPn92BJXiIUBiMQZ0hw==}
     hasBin: true
     peerDependencies:
-      '@nuxt/kit': ^3.8.1
-      nuxi: ^3.9.1
+      '@nuxt/kit': ^3.8.2
+      nuxi: ^3.10.0
     dependencies:
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
       citty: 0.1.5
       consola: 3.2.3
-      mlly: 1.4.2
+      mlly: 1.5.0
       nuxi: 3.10.0
       pathe: 1.1.2
       unbuild: 2.0.0(typescript@5.3.3)
@@ -3043,60 +2494,41 @@ packages:
       - typescript
     dev: true
 
-  /@nuxt/schema@3.7.4:
-    resolution: {integrity: sha512-q6js+97vDha4Fa2x2kDVEuokJr+CGIh1TY2wZp2PLZ7NhG3XEeib7x9Hq8XE8B6pD0GKBRy3eRPPOY69gekBCw==}
+  /@nuxt/schema@3.10.0:
+    resolution: {integrity: sha512-XwxyoW1DFMpHsoF3LHvwd2e2JFy9bTBfTo2/gH2RH9tU2W3I56A9uPRBftFXTNEDBrO2whYOFsRgjVOmM0ZZHg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
       '@nuxt/ui-templates': 1.3.1
       consola: 3.2.3
-      defu: 6.1.2
+      defu: 6.1.4
       hookable: 5.5.3
       pathe: 1.1.2
       pkg-types: 1.0.3
-      postcss-import-resolver: 2.0.0
-      std-env: 3.4.3
-      ufo: 1.3.0
-      unimport: 3.4.0(rollup@3.29.4)
-      untyped: 1.4.0
+      scule: 1.2.0
+      std-env: 3.7.0
+      ufo: 1.3.2
+      unimport: 3.7.1
+      untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: false
 
-  /@nuxt/schema@3.8.1(rollup@3.29.4):
-    resolution: {integrity: sha512-fSaWRcI/2mUskfTZTGSnH6Ny0x05CRzylbVn6WFV0d6UEKIVy42Qd6n+h7yoFfp4cq4nji6u16PT4SqS1DEhsw==}
+  /@nuxt/schema@3.10.0(rollup@3.29.4):
+    resolution: {integrity: sha512-XwxyoW1DFMpHsoF3LHvwd2e2JFy9bTBfTo2/gH2RH9tU2W3I56A9uPRBftFXTNEDBrO2whYOFsRgjVOmM0ZZHg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
       '@nuxt/ui-templates': 1.3.1
       consola: 3.2.3
-      defu: 6.1.3
+      defu: 6.1.4
       hookable: 5.5.3
       pathe: 1.1.2
       pkg-types: 1.0.3
-      std-env: 3.4.3
+      scule: 1.2.0
+      std-env: 3.7.0
       ufo: 1.3.2
-      unimport: 3.4.0(rollup@3.29.4)
-      untyped: 1.4.0
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
-  /@nuxt/schema@3.8.2(rollup@3.29.4):
-    resolution: {integrity: sha512-AMpysQ/wHK2sOujLShqYdC4OSj/S3fFJGjhYXqA2g6dgmz+FNQWJRG/ie5sI9r2EX9Ela1wt0GN1jZR3wYNE8Q==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/ui-templates': 1.3.1
-      consola: 3.2.3
-      defu: 6.1.3
-      hookable: 5.5.3
-      pathe: 1.1.2
-      pkg-types: 1.0.3
-      scule: 1.1.0
-      std-env: 3.5.0
-      ufo: 1.3.2
-      unimport: 3.6.0(rollup@3.29.4)
-      untyped: 1.4.0
+      unimport: 3.7.1(rollup@3.29.4)
+      untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3105,13 +2537,13 @@ packages:
     resolution: {integrity: sha512-Ghv2MgWbJcUM9G5Dy3oQP0cJkUwEgaiuQxEF61FXJdn0a69Q4StZEP/hLF0MWPM9m6EvAwI7orxkJHM7MrmtVg==}
     hasBin: true
     dependencies:
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
       ci-info: 4.0.0
       consola: 3.2.3
       create-require: 1.1.1
-      defu: 6.1.3
+      defu: 6.1.4
       destr: 2.0.2
-      dotenv: 16.3.1
+      dotenv: 16.4.1
       git-url-parse: 13.1.1
       is-docker: 3.0.0
       jiti: 1.21.0
@@ -3121,39 +2553,77 @@ packages:
       parse-git-config: 3.0.0
       pathe: 1.1.2
       rc9: 2.1.1
-      std-env: 3.5.0
+      std-env: 3.7.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@nuxt/test-utils@3.8.1(rollup@3.29.4)(vitest@0.33.0)(vue@3.4.15):
-    resolution: {integrity: sha512-8ZQ+OZ7z5Sc5KG2aCvk0piheYSpGb2UQJMCWr8ORwEyZIw4awrkkwGzUY06e344E4StvJB8zxN122MEcFNOkow==}
+  /@nuxt/test-utils@3.11.0(h3@1.10.1)(rollup@3.29.4)(vite@5.0.12)(vitest@0.33.0)(vue-router@4.2.5)(vue@3.4.15):
+    resolution: {integrity: sha512-9ovgpQZkZpVg/MhYVVn2169WjH/IL0XUqwGryTa/lkx0/BCi1LMVEp3HTPkmt4qbRcxitO+kL4vFqqrFGVaSVg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
+      '@cucumber/cucumber': ^10.3.1
       '@jest/globals': ^29.5.0
+      '@testing-library/vue': ^7.0.0 || ^8.0.1
+      '@vitest/ui': ^0.34.6 || ^1.0.0
+      '@vue/test-utils': ^2.4.2
+      h3: '*'
+      happy-dom: ^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
+      jsdom: ^22.0.0 || ^23.0.0 || ^24.0.0
       playwright-core: ^1.34.3
-      vitest: ^0.30.0 || ^0.31.0 || ^0.32.0 || ^0.33.0
+      vite: '*'
+      vitest: ^0.34.6 || ^1.0.0
       vue: ^3.3.4
+      vue-router: ^4.0.0
     peerDependenciesMeta:
+      '@cucumber/cucumber':
+        optional: true
       '@jest/globals':
         optional: true
+      '@testing-library/vue':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      '@vue/test-utils':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
       playwright-core:
         optional: true
       vitest:
         optional: true
     dependencies:
-      '@nuxt/kit': 3.8.1(rollup@3.29.4)
-      '@nuxt/schema': 3.8.1(rollup@3.29.4)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
+      '@nuxt/schema': 3.10.0(rollup@3.29.4)
+      c12: 1.6.1
       consola: 3.2.3
-      defu: 6.1.3
+      defu: 6.1.4
+      destr: 2.0.2
+      estree-walker: 3.0.3
       execa: 8.0.1
-      get-port-please: 3.1.1
+      fake-indexeddb: 5.0.2
+      get-port-please: 3.1.2
+      h3: 1.10.1
+      local-pkg: 0.5.0
+      magic-string: 0.30.6
+      node-fetch-native: 1.6.1
       ofetch: 1.3.3
       pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      radix3: 1.1.0
+      scule: 1.2.0
+      std-env: 3.7.0
       ufo: 1.3.2
+      unenv: 1.9.0
+      unplugin: 1.6.0
+      vite: 5.0.12(@types/node@20.11.16)
       vitest: 0.33.0
+      vitest-environment-nuxt: 1.0.0(h3@1.10.1)(rollup@3.29.4)(vite@5.0.12)(vitest@0.33.0)(vue-router@4.2.5)(vue@3.4.15)
       vue: 3.4.15(typescript@5.3.3)
+      vue-router: 4.2.5(vue@3.4.15)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3162,44 +2632,45 @@ packages:
   /@nuxt/ui-templates@1.3.1:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
 
-  /@nuxt/vite-builder@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15):
-    resolution: {integrity: sha512-l/lzDDTbd3M89BpmWqjhVLgLVRqfkKp0tyYgV5seJQjj3SX+IeqI7k6k8+dMEifdeO34jUajVWptNpITXQryyg==}
+  /@nuxt/vite-builder@3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15):
+    resolution: {integrity: sha512-PpdcPkvfBzSZVHqxZ/uneTUZq6ufZDzgP36yXxZ/ygRi90szOs5QHWzGFXJ6cCW4D34iqePKjeTXJall3C74LA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
     dependencies:
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
-      '@vitejs/plugin-vue': 4.5.0(vite@4.5.1)(vue@3.4.15)
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.5.1)(vue@3.4.15)
+      '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.0.12)(vue@3.4.15)
       autoprefixer: 10.4.17(postcss@8.4.33)
       clear: 0.1.0
       consola: 3.2.3
-      cssnano: 6.0.1(postcss@8.4.33)
-      defu: 6.1.3
-      esbuild: 0.19.11
+      cssnano: 6.0.3(postcss@8.4.33)
+      defu: 6.1.4
+      esbuild: 0.20.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       externality: 1.0.2
-      fs-extra: 11.1.1
-      get-port-please: 3.1.1
-      h3: 1.9.0
+      fs-extra: 11.2.0
+      get-port-please: 3.1.2
+      h3: 1.10.1
       knitwork: 1.0.0
-      magic-string: 0.30.5
-      mlly: 1.4.2
+      magic-string: 0.30.6
+      mlly: 1.5.0
       ohash: 1.1.3
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       postcss: 8.4.33
-      rollup-plugin-visualizer: 5.9.3(rollup@3.29.4)
-      std-env: 3.5.0
-      strip-literal: 1.3.0
+      rollup-plugin-visualizer: 5.12.0(rollup@3.29.4)
+      std-env: 3.7.0
+      strip-literal: 2.0.0
       ufo: 1.3.2
-      unplugin: 1.5.1
-      vite: 4.5.1(@types/node@20.10.1)
-      vite-node: 0.33.0(@types/node@20.10.1)
-      vite-plugin-checker: 0.6.2(eslint@8.56.0)(typescript@5.3.3)(vite@4.5.1)
+      unenv: 1.9.0
+      unplugin: 1.6.0
+      vite: 5.0.12(@types/node@20.11.16)
+      vite-node: 1.2.2(@types/node@20.11.16)
+      vite-plugin-checker: 0.6.4(eslint@8.56.0)(typescript@5.3.3)(vite@5.0.12)
       vue: 3.4.15(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
@@ -3264,8 +2735,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@parcel/watcher-android-arm64@2.3.0:
-    resolution: {integrity: sha512-f4o9eA3dgk0XRT3XhB0UWpWpLnKgrh1IwNJKJ7UJek7eTYccQ8LR7XUWFKqw6aEq5KUNlCcGvSzKqSX/vtWVVA==}
+  /@parcel/watcher-android-arm64@2.4.0:
+    resolution: {integrity: sha512-+fPtO/GsbYX1LJnCYCaDVT3EOBjvSFdQN9Mrzh9zWAOOfvidPWyScTrHIZHHfJBvlHzNA0Gy0U3NXFA/M7PHUA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
@@ -3273,8 +2744,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-darwin-arm64@2.3.0:
-    resolution: {integrity: sha512-mKY+oijI4ahBMc/GygVGvEdOq0L4DxhYgwQqYAz/7yPzuGi79oXrZG52WdpGA1wLBPrYb0T8uBaGFo7I6rvSKw==}
+  /@parcel/watcher-darwin-arm64@2.4.0:
+    resolution: {integrity: sha512-T/At5pansFuQ8VJLRx0C6C87cgfqIYhW2N/kBfLCUvDhCah0EnLLwaD/6MW3ux+rpgkpQAnMELOCTKlbwncwiA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
@@ -3282,8 +2753,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-darwin-x64@2.3.0:
-    resolution: {integrity: sha512-20oBj8LcEOnLE3mgpy6zuOq8AplPu9NcSSSfyVKgfOhNAc4eF4ob3ldj0xWjGGbOF7Dcy1Tvm6ytvgdjlfUeow==}
+  /@parcel/watcher-darwin-x64@2.4.0:
+    resolution: {integrity: sha512-vZMv9jl+szz5YLsSqEGCMSllBl1gU1snfbRL5ysJU03MEa6gkVy9OMcvXV1j4g0++jHEcvzhs3Z3LpeEbVmY6Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
@@ -3291,8 +2762,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-freebsd-x64@2.3.0:
-    resolution: {integrity: sha512-7LftKlaHunueAEiojhCn+Ef2CTXWsLgTl4hq0pkhkTBFI3ssj2bJXmH2L67mKpiAD5dz66JYk4zS66qzdnIOgw==}
+  /@parcel/watcher-freebsd-x64@2.4.0:
+    resolution: {integrity: sha512-dHTRMIplPDT1M0+BkXjtMN+qLtqq24sLDUhmU+UxxLP2TEY2k8GIoqIJiVrGWGomdWsy5IO27aDV1vWyQ6gfHA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
@@ -3300,8 +2771,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-linux-arm-glibc@2.3.0:
-    resolution: {integrity: sha512-1apPw5cD2xBv1XIHPUlq0cO6iAaEUQ3BcY0ysSyD9Kuyw4MoWm1DV+W9mneWI+1g6OeP6dhikiFE6BlU+AToTQ==}
+  /@parcel/watcher-linux-arm-glibc@2.4.0:
+    resolution: {integrity: sha512-9NQXD+qk46RwATNC3/UB7HWurscY18CnAPMTFcI9Y8CTbtm63/eex1SNt+BHFinEQuLBjaZwR2Lp+n7pmEJPpQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
@@ -3309,8 +2780,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-linux-arm64-glibc@2.3.0:
-    resolution: {integrity: sha512-mQ0gBSQEiq1k/MMkgcSB0Ic47UORZBmWoAWlMrTW6nbAGoLZP+h7AtUM7H3oDu34TBFFvjy4JCGP43JlylkTQA==}
+  /@parcel/watcher-linux-arm64-glibc@2.4.0:
+    resolution: {integrity: sha512-QuJTAQdsd7PFW9jNGaV9Pw+ZMWV9wKThEzzlY3Lhnnwy7iW23qtQFPql8iEaSFMCVI5StNNmONUopk+MFKpiKg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
@@ -3318,8 +2789,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-linux-arm64-musl@2.3.0:
-    resolution: {integrity: sha512-LXZAExpepJew0Gp8ZkJ+xDZaTQjLHv48h0p0Vw2VMFQ8A+RKrAvpFuPVCVwKJCr5SE+zvaG+Etg56qXvTDIedw==}
+  /@parcel/watcher-linux-arm64-musl@2.4.0:
+    resolution: {integrity: sha512-oyN+uA9xcTDo/45bwsd6TFHa7Lc7hKujyMlvwrCLvSckvWogndCEoVYFNfZ6JJ2KNL/6fFiGPcbjp8jJmEh5Ng==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
@@ -3327,8 +2798,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-linux-x64-glibc@2.3.0:
-    resolution: {integrity: sha512-P7Wo91lKSeSgMTtG7CnBS6WrA5otr1K7shhSjKHNePVmfBHDoAOHYRXgUmhiNfbcGk0uMCHVcdbfxtuiZCHVow==}
+  /@parcel/watcher-linux-x64-glibc@2.4.0:
+    resolution: {integrity: sha512-KphV8awJmxU3q52JQvJot0QMu07CIyEjV+2Tb2ZtbucEgqyRcxOBDMsqp1JNq5nuDXtcCC0uHQICeiEz38dPBQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
@@ -3336,8 +2807,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-linux-x64-musl@2.3.0:
-    resolution: {integrity: sha512-+kiRE1JIq8QdxzwoYY+wzBs9YbJ34guBweTK8nlzLKimn5EQ2b2FSC+tAOpq302BuIMjyuUGvBiUhEcLIGMQ5g==}
+  /@parcel/watcher-linux-x64-musl@2.4.0:
+    resolution: {integrity: sha512-7jzcOonpXNWcSijPpKD5IbC6xC7yTibjJw9jviVzZostYLGxbz8LDJLUnLzLzhASPlPGgpeKLtFUMjAAzM+gSA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
@@ -3345,19 +2816,18 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-wasm@2.3.0:
-    resolution: {integrity: sha512-ejBAX8H0ZGsD8lSICDNyMbSEtPMWgDL0WFCt/0z7hyf5v8Imz4rAM8xY379mBsECkq/Wdqa5WEDLqtjZ+6NxfA==}
+  /@parcel/watcher-wasm@2.4.0:
+    resolution: {integrity: sha512-MNgQ4WCbBybqQ97KwR/hqJGYTg3+s8qHpgIyFWB2qJOBvoJWbXuJGmm4ZkPLq2bMaANqCZqrXwmKYagZTkMKZA==}
     engines: {node: '>= 10.0.0'}
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
-      napi-wasm: 1.1.0
     dev: true
     bundledDependencies:
       - napi-wasm
 
-  /@parcel/watcher-win32-arm64@2.3.0:
-    resolution: {integrity: sha512-35gXCnaz1AqIXpG42evcoP2+sNL62gZTMZne3IackM+6QlfMcJLy3DrjuL6Iks7Czpd3j4xRBzez3ADCj1l7Aw==}
+  /@parcel/watcher-win32-arm64@2.4.0:
+    resolution: {integrity: sha512-NOej2lqlq8bQNYhUMnOD0nwvNql8ToQF+1Zhi9ULZoG+XTtJ9hNnCFfyICxoZLXor4bBPTOnzs/aVVoefYnjIg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
@@ -3365,8 +2835,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-win32-ia32@2.3.0:
-    resolution: {integrity: sha512-FJS/IBQHhRpZ6PiCjFt1UAcPr0YmCLHRbTc00IBTrelEjlmmgIVLeOx4MSXzx2HFEy5Jo5YdhGpxCuqCyDJ5ow==}
+  /@parcel/watcher-win32-ia32@2.4.0:
+    resolution: {integrity: sha512-IO/nM+K2YD/iwjWAfHFMBPz4Zqn6qBDqZxY4j2n9s+4+OuTSRM/y/irksnuqcspom5DjkSeF9d0YbO+qpys+JA==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
@@ -3374,8 +2844,8 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher-win32-x64@2.3.0:
-    resolution: {integrity: sha512-dLx+0XRdMnVI62kU3wbXvbIRhLck4aE28bIGKbRGS7BJNt54IIj9+c/Dkqb+7DJEbHUZAX1bwaoM8PqVlHJmCA==}
+  /@parcel/watcher-win32-x64@2.4.0:
+    resolution: {integrity: sha512-pAUyUVjfFjWaf/pShmJpJmNxZhbMvJASUpdes9jL6bTEJ+gDxPRSpXTIemNyNsb9AtbiGXs9XduP1reThmd+dA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
@@ -3383,27 +2853,27 @@ packages:
     dev: true
     optional: true
 
-  /@parcel/watcher@2.3.0:
-    resolution: {integrity: sha512-pW7QaFiL11O0BphO+bq3MgqeX/INAk9jgBldVDYjlQPO4VddoZnF22TcF9onMhnLVHuNqBJeRf+Fj7eezi/+rQ==}
+  /@parcel/watcher@2.4.0:
+    resolution: {integrity: sha512-XJLGVL0DEclX5pcWa2N9SX1jCGTDd8l972biNooLFtjneuGqodupPQh6XseXIBBeVIMaaJ7bTcs3qGvXwsp4vg==}
     engines: {node: '>= 10.0.0'}
     dependencies:
       detect-libc: 1.0.3
       is-glob: 4.0.3
       micromatch: 4.0.5
-      node-addon-api: 7.0.0
+      node-addon-api: 7.1.0
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.3.0
-      '@parcel/watcher-darwin-arm64': 2.3.0
-      '@parcel/watcher-darwin-x64': 2.3.0
-      '@parcel/watcher-freebsd-x64': 2.3.0
-      '@parcel/watcher-linux-arm-glibc': 2.3.0
-      '@parcel/watcher-linux-arm64-glibc': 2.3.0
-      '@parcel/watcher-linux-arm64-musl': 2.3.0
-      '@parcel/watcher-linux-x64-glibc': 2.3.0
-      '@parcel/watcher-linux-x64-musl': 2.3.0
-      '@parcel/watcher-win32-arm64': 2.3.0
-      '@parcel/watcher-win32-ia32': 2.3.0
-      '@parcel/watcher-win32-x64': 2.3.0
+      '@parcel/watcher-android-arm64': 2.4.0
+      '@parcel/watcher-darwin-arm64': 2.4.0
+      '@parcel/watcher-darwin-x64': 2.4.0
+      '@parcel/watcher-freebsd-x64': 2.4.0
+      '@parcel/watcher-linux-arm-glibc': 2.4.0
+      '@parcel/watcher-linux-arm64-glibc': 2.4.0
+      '@parcel/watcher-linux-arm64-musl': 2.4.0
+      '@parcel/watcher-linux-x64-glibc': 2.4.0
+      '@parcel/watcher-linux-x64-musl': 2.4.0
+      '@parcel/watcher-win32-arm64': 2.4.0
+      '@parcel/watcher-win32-ia32': 2.4.0
+      '@parcel/watcher-win32-x64': 2.4.0
     dev: true
 
   /@pkgjs/parseargs@0.11.0:
@@ -3412,8 +2882,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@polka/url@1.0.0-next.23:
-    resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==}
+  /@polka/url@1.0.0-next.24:
+    resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
     dev: true
 
   /@popperjs/core@2.11.8:
@@ -3441,7 +2911,7 @@ packages:
       slash: 4.0.0
     dev: true
 
-  /@rollup/plugin-alias@5.1.0(rollup@4.6.1):
+  /@rollup/plugin-alias@5.1.0(rollup@4.9.6):
     resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3450,7 +2920,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 4.6.1
+      rollup: 4.9.6
       slash: 4.0.0
     dev: true
 
@@ -3463,16 +2933,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       rollup: 3.29.4
     dev: true
 
-  /@rollup/plugin-commonjs@25.0.7(rollup@4.6.1):
+  /@rollup/plugin-commonjs@25.0.7(rollup@4.9.6):
     resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3481,16 +2951,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
-      magic-string: 0.30.5
-      rollup: 4.6.1
+      magic-string: 0.30.6
+      rollup: 4.9.6
     dev: true
 
-  /@rollup/plugin-inject@5.0.5(rollup@4.6.1):
+  /@rollup/plugin-inject@5.0.5(rollup@4.9.6):
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3499,14 +2969,14 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       estree-walker: 2.0.2
-      magic-string: 0.30.5
-      rollup: 4.6.1
+      magic-string: 0.30.6
+      rollup: 4.9.6
     dev: true
 
-  /@rollup/plugin-json@6.0.1(rollup@3.29.4):
-    resolution: {integrity: sha512-RgVfl5hWMkxN1h/uZj8FVESvPuBJ/uf6ly6GTj0GONnkfoBN5KC0MSz+PN2OLDgYXMhtG0mWpTrkiOjoxAIevw==}
+  /@rollup/plugin-json@6.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -3514,12 +2984,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       rollup: 3.29.4
     dev: true
 
-  /@rollup/plugin-json@6.0.1(rollup@4.6.1):
-    resolution: {integrity: sha512-RgVfl5hWMkxN1h/uZj8FVESvPuBJ/uf6ly6GTj0GONnkfoBN5KC0MSz+PN2OLDgYXMhtG0mWpTrkiOjoxAIevw==}
+  /@rollup/plugin-json@6.1.0(rollup@4.9.6):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -3527,8 +2997,8 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@4.6.1)
-      rollup: 4.6.1
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      rollup: 4.9.6
     dev: true
 
   /@rollup/plugin-node-resolve@15.2.3(rollup@3.29.4):
@@ -3540,7 +3010,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
@@ -3549,7 +3019,7 @@ packages:
       rollup: 3.29.4
     dev: true
 
-  /@rollup/plugin-node-resolve@15.2.3(rollup@4.6.1):
+  /@rollup/plugin-node-resolve@15.2.3(rollup@4.9.6):
     resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3558,13 +3028,13 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
       resolve: 1.22.8
-      rollup: 4.6.1
+      rollup: 4.9.6
     dev: true
 
   /@rollup/plugin-replace@5.0.5(rollup@3.29.4):
@@ -3576,12 +3046,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      magic-string: 0.30.5
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      magic-string: 0.30.6
       rollup: 3.29.4
     dev: true
 
-  /@rollup/plugin-replace@5.0.5(rollup@4.6.1):
+  /@rollup/plugin-replace@5.0.5(rollup@4.9.6):
     resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3590,12 +3060,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@4.6.1)
-      magic-string: 0.30.5
-      rollup: 4.6.1
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      magic-string: 0.30.6
+      rollup: 4.9.6
     dev: true
 
-  /@rollup/plugin-terser@0.4.4(rollup@4.6.1):
+  /@rollup/plugin-terser@0.4.4(rollup@4.9.6):
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3604,13 +3074,13 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 4.6.1
-      serialize-javascript: 6.0.1
+      rollup: 4.9.6
+      serialize-javascript: 6.0.2
       smob: 1.4.1
-      terser: 5.24.0
+      terser: 5.27.0
     dev: true
 
-  /@rollup/plugin-wasm@6.2.2(rollup@4.6.1):
+  /@rollup/plugin-wasm@6.2.2(rollup@4.9.6):
     resolution: {integrity: sha512-gpC4R1G9Ni92ZIRTexqbhX7U+9estZrbhP+9SRb0DW9xpB9g7j34r+J2hqrcW/lRI7dJaU84MxZM0Rt82tqYPQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3619,8 +3089,8 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
-      rollup: 4.6.1
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      rollup: 4.9.6
     dev: true
 
   /@rollup/pluginutils@4.2.1:
@@ -3631,35 +3101,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.0.4(rollup@3.29.4):
-    resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.2
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 3.29.4
-
-  /@rollup/pluginutils@5.0.4(rollup@4.6.1):
-    resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.2
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 4.6.1
-    dev: true
-
   /@rollup/pluginutils@5.1.0(rollup@3.29.4):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -3669,12 +3110,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.2
+      '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 3.29.4
 
-  /@rollup/pluginutils@5.1.0(rollup@4.6.1):
+  /@rollup/pluginutils@5.1.0(rollup@4.9.6):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3683,155 +3124,164 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.2
+      '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 4.6.1
-    dev: true
+      rollup: 4.9.6
 
-  /@rollup/rollup-android-arm-eabi@4.6.1:
-    resolution: {integrity: sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==}
+  /@rollup/rollup-android-arm-eabi@4.9.6:
+    resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.6.1:
-    resolution: {integrity: sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==}
+  /@rollup/rollup-android-arm64@4.9.6:
+    resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.6.1:
-    resolution: {integrity: sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==}
+  /@rollup/rollup-darwin-arm64@4.9.6:
+    resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.6.1:
-    resolution: {integrity: sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==}
+  /@rollup/rollup-darwin-x64@4.9.6:
+    resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.6.1:
-    resolution: {integrity: sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
+    resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.6.1:
-    resolution: {integrity: sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==}
+  /@rollup/rollup-linux-arm64-gnu@4.9.6:
+    resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.6.1:
-    resolution: {integrity: sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==}
+  /@rollup/rollup-linux-arm64-musl@4.9.6:
+    resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.6.1:
-    resolution: {integrity: sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==}
+  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
+    resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.9.6:
+    resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.6.1:
-    resolution: {integrity: sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==}
+  /@rollup/rollup-linux-x64-musl@4.9.6:
+    resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.6.1:
-    resolution: {integrity: sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==}
+  /@rollup/rollup-win32-arm64-msvc@4.9.6:
+    resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.6.1:
-    resolution: {integrity: sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==}
+  /@rollup/rollup-win32-ia32-msvc@4.9.6:
+    resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.6.1:
-    resolution: {integrity: sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==}
+  /@rollup/rollup-win32-x64-msvc@4.9.6:
+    resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
-  /@rushstack/eslint-patch@1.6.0:
-    resolution: {integrity: sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==}
+  /@rushstack/eslint-patch@1.7.2:
+    resolution: {integrity: sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==}
     dev: true
 
-  /@shikijs/core@1.0.0-beta.3:
-    resolution: {integrity: sha512-SCwPom2Wn8XxNlEeqdzycU93SKgzYeVsedjqDsgZaz4XiiPpZUzlHt2NAEQTwTnPcHNZapZ6vbkwJ8P11ggL3Q==}
+  /@shikijs/core@1.0.0-beta.5:
+    resolution: {integrity: sha512-C/MxtvK3FFCQZSsDq6OfjDHHOmyP1Jc9wO66cnE8VLEyWXzWch7Zpoc2MWuVJTSC0Pz9QxyUlsBCnroplFqoSg==}
     dev: true
 
-  /@shikijs/transformers@1.0.0-beta.3:
-    resolution: {integrity: sha512-ASQQQqxW4dANxMGw4yGkTjtMSsUaRhImv/lzJEdfJ3/eP8TVlVYnohOFQVgpLjBBYGy9P0l0oKrlbjiGosTJ/Q==}
+  /@shikijs/transformers@1.0.0-beta.5:
+    resolution: {integrity: sha512-Kd3312yH6sh8Jw0xjBFfGpXTU3Qts1bwuB19wDDoKRvJqjrkffftdSuKzhHPa+DP/L0ZFhq96xMPngzQ15rQmQ==}
     dependencies:
-      shiki: 1.0.0-beta.3
+      shiki: 1.0.0-beta.5
     dev: true
 
-  /@sigstore/bundle@2.1.0:
-    resolution: {integrity: sha512-89uOo6yh/oxaU8AeOUnVrTdVMcGk9Q1hJa7Hkvalc6G3Z3CupWk4Xe9djSgJm9fMkH69s0P0cVHUoKSOemLdng==}
+  /@sigstore/bundle@2.1.1:
+    resolution: {integrity: sha512-v3/iS+1nufZdKQ5iAlQKcCsoh0jffQyABvYIxKsZQFWc4ubuGjwZklFHpDgV6O6T7vvV78SW5NHI91HFKEcxKg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@sigstore/protobuf-specs': 0.2.1
     dev: true
 
+  /@sigstore/core@0.2.0:
+    resolution: {integrity: sha512-THobAPPZR9pDH2CAvDLpkrYedt7BlZnsyxDe+Isq4ZmGfPy5juOFZq487vCU2EgKD7aHSiTfE/i7sN7aEdzQnA==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+    dev: true
+
   /@sigstore/protobuf-specs@0.2.1:
     resolution: {integrity: sha512-XTWVxnWJu+c1oCshMLwnKvz8ZQJJDVOlciMfgpJBQbThVjKTCG8dwyhgLngBD2KN0ap9F/gOV8rFDEx8uh7R2A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
-  /@sigstore/sign@2.1.0:
-    resolution: {integrity: sha512-4VRpfJxs+8eLqzLVrZngVNExVA/zAhVbi4UT4zmtLi4xRd7vz5qie834OgkrGsLlLB1B2nz/3wUxT1XAUBe8gw==}
+  /@sigstore/sign@2.2.1:
+    resolution: {integrity: sha512-U5sKQEj+faE1MsnLou1f4DQQHeFZay+V9s9768lw48J4pKykPj34rWyI1lsMOGJ3Mae47Ye6q3HAJvgXO21rkQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@sigstore/bundle': 2.1.0
+      '@sigstore/bundle': 2.1.1
+      '@sigstore/core': 0.2.0
       '@sigstore/protobuf-specs': 0.2.1
       make-fetch-happen: 13.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sigstore/tuf@2.2.0:
-    resolution: {integrity: sha512-KKATZ5orWfqd9ZG6MN8PtCIx4eevWSuGRKQvofnWXRpyMyUEpmrzg5M5BrCpjM+NfZ0RbNGOh5tCz/P2uoRqOA==}
+  /@sigstore/tuf@2.3.0:
+    resolution: {integrity: sha512-S98jo9cpJwO1mtQ+2zY7bOdcYyfVYCUaofCG6wWRzk3pxKHVAkSfshkfecto2+LKsx7Ovtqbgb2LS8zTRhxJ9Q==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@sigstore/protobuf-specs': 0.2.1
-      tuf-js: 2.1.0
+      tuf-js: 2.2.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@sigstore/verify@0.1.0:
+    resolution: {integrity: sha512-2UzMNYAa/uaz11NhvgRnIQf4gpLTJ59bhb8ESXaoSS5sxedfS+eLak8bsdMc+qpNQfITUTFoSKFx5h8umlRRiA==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+    dependencies:
+      '@sigstore/bundle': 2.1.1
+      '@sigstore/core': 0.2.0
+      '@sigstore/protobuf-specs': 0.2.1
+    dev: true
+
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
@@ -3847,7 +3297,7 @@ packages:
   /@stylistic/eslint-plugin-js@0.0.4:
     resolution: {integrity: sha512-W1rq2xxlFNhgZZJO+L59wtvlDI0xARYxx0WD8EeWNBO7NDybUSYSozCIcY9XvxQbTAsEXBjwqokeYm0crt7RxQ==}
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.11.3
       escape-string-regexp: 4.0.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -3855,19 +3305,19 @@ packages:
       graphemer: 1.4.0
     dev: true
 
-  /@stylistic/eslint-plugin-ts@0.0.4(eslint@8.53.0)(typescript@5.2.2):
+  /@stylistic/eslint-plugin-ts@0.0.4(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-sWL4Km5j8S+TLyzya/3adxMWGkCm3lVasJIVQqhxVfwnlGkpMI0GgYVIu/ubdKPS+dSvqjUHpsXgqWfMRF2+cQ==}
     peerDependencies:
       eslint: '*'
       typescript: '*'
     dependencies:
       '@stylistic/eslint-plugin-js': 0.0.4
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/type-utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
+      '@typescript-eslint/scope-manager': 6.20.0
+      '@typescript-eslint/type-utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
       graphemer: 1.4.0
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3887,11 +3337,6 @@ packages:
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /@tootallnate/once@2.0.0:
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
-    dev: true
-
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -3931,463 +3376,445 @@ packages:
       minimatch: 9.0.3
     dev: true
 
-  /@types/babel__core@7.20.2:
-    resolution: {integrity: sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA==}
+  /@types/babel__core@7.20.5:
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.0
-      '@types/babel__generator': 7.6.5
-      '@types/babel__template': 7.4.2
-      '@types/babel__traverse': 7.20.2
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.5
     dev: true
 
-  /@types/babel__generator@7.6.5:
-    resolution: {integrity: sha512-h9yIuWbJKdOPLJTbmSpPzkF67e659PbQDba7ifWm5BJ8xTv+sDmS7rFmywkWOvXedGTivCdeGSIIX8WLcRTz8w==}
+  /@types/babel__generator@7.6.8:
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
     dev: true
 
-  /@types/babel__template@7.4.2:
-    resolution: {integrity: sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==}
+  /@types/babel__template@7.4.4:
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.6
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
     dev: true
 
-  /@types/babel__traverse@7.20.2:
-    resolution: {integrity: sha512-ojlGK1Hsfce93J0+kn3H5R73elidKUaZonirN33GSmgTUMpzI/MIFfSpF3haANe3G1bEBS9/9/QEqwTzwqFsKw==}
+  /@types/babel__traverse@7.20.5:
+    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
     dev: true
 
-  /@types/chai-subset@1.3.3:
-    resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
+  /@types/chai-subset@1.3.5:
+    resolution: {integrity: sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==}
     dependencies:
-      '@types/chai': 4.3.6
+      '@types/chai': 4.3.11
     dev: true
 
-  /@types/chai@4.3.6:
-    resolution: {integrity: sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==}
+  /@types/chai@4.3.11:
+    resolution: {integrity: sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==}
     dev: true
 
-  /@types/d3-array@3.0.8:
-    resolution: {integrity: sha512-2xAVyAUgaXHX9fubjcCbGAUOqYfRJN1em1EKR2HfzWBpObZhwfnZKvofTN4TplMqJdFQao61I+NVSai/vnBvDQ==}
+  /@types/d3-array@3.2.1:
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
     dev: false
 
-  /@types/d3-axis@3.0.4:
-    resolution: {integrity: sha512-ySnjI/7qm+J602VjcejXcqs1hEuu5UBbGaJGp+Cn/yKVc1iS3JueLVpToGdQsS2sqta7tqA/kG4ore/+LH90UA==}
+  /@types/d3-axis@3.0.6:
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
     dependencies:
-      '@types/d3-selection': 3.0.7
+      '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3-brush@3.0.4:
-    resolution: {integrity: sha512-Kg5uIsdJNMCs5lTqeZFsTKqj9lBvpiFRDkYN3j2CDlPhonNDg9/gXVpv1E/MKh3tEqArryIj9o6RBGE/MQe+6Q==}
+  /@types/d3-brush@3.0.6:
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
     dependencies:
-      '@types/d3-selection': 3.0.7
+      '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3-chord@3.0.4:
-    resolution: {integrity: sha512-p4PvN1N+7GL3Y/NI9Ug1TKwowUV6h664kmxL79ctp1HRYCk1mhP0+SXhjRsoWXCdnJfbLLLmpV99rt8dMrHrzg==}
+  /@types/d3-chord@3.0.6:
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
     dev: false
 
-  /@types/d3-collection@1.0.11:
-    resolution: {integrity: sha512-PN9XeRw8FyadFGrmK1f6VDo95sbJ1cKqGy9nyUzdC2xUdYSYmvJGLBcg/DUfS2a1Zh4tTqgE10HebuN/r8qSpw==}
+  /@types/d3-collection@1.0.13:
+    resolution: {integrity: sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==}
     dev: false
 
-  /@types/d3-color@3.1.1:
-    resolution: {integrity: sha512-CSAVrHAtM9wfuLJ2tpvvwCU/F22sm7rMHNN+yh9D6O6hyAms3+O0cgMpC1pm6UEUMOntuZC8bMt74PteiDUdCg==}
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
     dev: false
 
-  /@types/d3-contour@3.0.4:
-    resolution: {integrity: sha512-B0aeX8Xg3MNUglULxqDvlgY1SVXuN2xtEleYSAY0iMhl/SMVT7snzgAveejjwM3KaWuNXIoXEJ7dmXE8oPq/jA==}
+  /@types/d3-contour@3.0.6:
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
     dependencies:
-      '@types/d3-array': 3.0.8
-      '@types/geojson': 7946.0.11
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.14
     dev: false
 
-  /@types/d3-delaunay@6.0.2:
-    resolution: {integrity: sha512-WplUJ/OHU7eITneDqNnzK+2pgR+WDzUHG6XAUVo+oWHPQq74VcgUdw8a4ODweaZzF56OVYK+x9GxCyuq6hSu1A==}
+  /@types/d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
     dev: false
 
-  /@types/d3-dispatch@3.0.4:
-    resolution: {integrity: sha512-NApHpGHRNxUy7e2Lfzl/cwOucmn4Xdx6FdmXzAoomo8T81LyGmlBjjko/vP0TVzawlvEFLDq8OCRLulW6DDzKw==}
+  /@types/d3-dispatch@3.0.6:
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
     dev: false
 
-  /@types/d3-drag@3.0.4:
-    resolution: {integrity: sha512-/t53K1erTuUbP7WIX9SE0hlmytpTYRbIthlhbGkBHzCV5vPO++7yrk8OlisWPyIJO5TGowTmqCtGH2tokY5T/g==}
+  /@types/d3-drag@3.0.7:
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
     dependencies:
-      '@types/d3-selection': 3.0.7
+      '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3-dsv@3.0.4:
-    resolution: {integrity: sha512-YxfUVJ55HxR8oq88136w09mBMPNhgH7PZjteq72onWXWOohGif/cLQnQv8V4A5lEGjXF04LhwSTpmzpY9wyVyA==}
+  /@types/d3-dsv@3.0.7:
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
     dev: false
 
-  /@types/d3-ease@3.0.0:
-    resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==}
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
     dev: false
 
-  /@types/d3-fetch@3.0.4:
-    resolution: {integrity: sha512-RleYajubALkGjrvatxWhlygfvB1KNF0Uzz9guRUeeA+M/2B7l8rxObYdktaX9zU1st04lMCHjZWe4vbl+msH2Q==}
+  /@types/d3-fetch@3.0.7:
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
     dependencies:
-      '@types/d3-dsv': 3.0.4
+      '@types/d3-dsv': 3.0.7
     dev: false
 
-  /@types/d3-force@3.0.6:
-    resolution: {integrity: sha512-G9wbOvCxkNlLrppoHLZ6oFpbm3z7ibfkXwLD8g5/4Aa7iTEV0Z7TQ0OL8UxAtvdOhCa2VZcSuqn1NQqyCEqmiw==}
+  /@types/d3-force@3.0.9:
+    resolution: {integrity: sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA==}
     dev: false
 
-  /@types/d3-format@3.0.2:
-    resolution: {integrity: sha512-9oQWvKk2qVBo49FQq8yD/et8Lx0W5Ac2FdGSOUecqOFKqh0wkpyHqf9Qc7A06ftTR+Lz13Pi3jHIQis0aCueOA==}
+  /@types/d3-format@3.0.4:
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
     dev: false
 
-  /@types/d3-geo@3.0.5:
-    resolution: {integrity: sha512-ysEEU93Wv9p2UZBxTK3kUP7veHgyhTA0qYtI7bxK5EMXb3JxGv0D4IH54PxprAF26n+uHci24McVmzwIdLgvgQ==}
+  /@types/d3-geo@3.1.0:
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
     dependencies:
-      '@types/geojson': 7946.0.11
+      '@types/geojson': 7946.0.14
     dev: false
 
-  /@types/d3-hierarchy@3.1.4:
-    resolution: {integrity: sha512-wrvjpRFdmEu6yAqgjGy8MSud9ggxJj+I9XLuztLeSf/E0j0j6RQYtxH2J8U0Cfbgiw9ZDHyhpmaVuWhxscYaAQ==}
+  /@types/d3-hierarchy@3.1.6:
+    resolution: {integrity: sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw==}
     dev: false
 
-  /@types/d3-interpolate@3.0.2:
-    resolution: {integrity: sha512-zAbCj9lTqW9J9PlF4FwnvEjXZUy75NQqPm7DMHZXuxCFTpuTrdK2NMYGQekf4hlasL78fCYOLu4EE3/tXElwow==}
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
     dependencies:
-      '@types/d3-color': 3.1.1
+      '@types/d3-color': 3.1.3
     dev: false
 
-  /@types/d3-path@1.0.9:
-    resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==}
+  /@types/d3-path@1.0.11:
+    resolution: {integrity: sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==}
     dev: false
 
-  /@types/d3-path@3.0.0:
-    resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
+  /@types/d3-path@3.0.2:
+    resolution: {integrity: sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==}
     dev: false
 
-  /@types/d3-polygon@3.0.0:
-    resolution: {integrity: sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==}
+  /@types/d3-polygon@3.0.2:
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
     dev: false
 
-  /@types/d3-quadtree@3.0.3:
-    resolution: {integrity: sha512-GDWaR+rGEk4ToLQSGugYnoh9AYYblsg/8kmdpa1KAJMwcdZ0v8rwgnldURxI5UrzxPlCPzF7by/Tjmv+Jn21Dg==}
+  /@types/d3-quadtree@3.0.6:
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
     dev: false
 
-  /@types/d3-random@3.0.1:
-    resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==}
+  /@types/d3-random@3.0.3:
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
     dev: false
 
   /@types/d3-sankey@0.11.2:
     resolution: {integrity: sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==}
     dependencies:
-      '@types/d3-shape': 1.3.9
+      '@types/d3-shape': 1.3.12
     dev: false
 
-  /@types/d3-scale-chromatic@3.0.0:
-    resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
+  /@types/d3-scale-chromatic@3.0.3:
+    resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==}
     dev: false
 
-  /@types/d3-scale@4.0.5:
-    resolution: {integrity: sha512-w/C++3W394MHzcLKO2kdsIn5KKNTOqeQVzyPSGPLzQbkPw/jpeaGtSRlakcKevGgGsjJxGsbqS0fPrVFDbHrDA==}
+  /@types/d3-scale@4.0.8:
+    resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
     dependencies:
-      '@types/d3-time': 3.0.1
+      '@types/d3-time': 3.0.3
     dev: false
 
-  /@types/d3-selection@3.0.7:
-    resolution: {integrity: sha512-qoj2O7KjfqCobmtFOth8FMvjwMVPUAAmn6xiUbLl1ld7vQCPgffvyV5BBcEFfqWdilAUm+3zciU/3P3vZrUMlg==}
+  /@types/d3-selection@3.0.10:
+    resolution: {integrity: sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==}
     dev: false
 
-  /@types/d3-shape@1.3.9:
-    resolution: {integrity: sha512-NX8FSlYqN4MPjiOwJAu5a3y6iEj7lS8nb8zP5dQpHOWh24vMJLTXno7c7wm72SfTFNAalfvZVsatMUrEa686gg==}
+  /@types/d3-shape@1.3.12:
+    resolution: {integrity: sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==}
     dependencies:
-      '@types/d3-path': 1.0.9
+      '@types/d3-path': 1.0.11
     dev: false
 
-  /@types/d3-shape@3.1.3:
-    resolution: {integrity: sha512-cHMdIq+rhF5IVwAV7t61pcEXfEHsEsrbBUPkFGBwTXuxtTAkBBrnrNA8++6OWm3jwVsXoZYQM8NEekg6CPJ3zw==}
+  /@types/d3-shape@3.1.6:
+    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
     dependencies:
-      '@types/d3-path': 3.0.0
+      '@types/d3-path': 3.0.2
     dev: false
 
-  /@types/d3-time-format@4.0.1:
-    resolution: {integrity: sha512-Br6EFeu9B1Zrem7KaYbr800xCmEDyq8uE60kEU8rWhC/XpFYX6ocGMZuRJDQfFCq6SyakQxNHFqIfJbFLf4x6Q==}
+  /@types/d3-time-format@4.0.3:
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
     dev: false
 
-  /@types/d3-time@3.0.1:
-    resolution: {integrity: sha512-5j/AnefKAhCw4HpITmLDTPlf4vhi8o/dES+zbegfPb7LaGfNyqkLxBR6E+4yvTAgnJLmhe80EXFMzUs38fw4oA==}
+  /@types/d3-time@3.0.3:
+    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
     dev: false
 
-  /@types/d3-timer@3.0.0:
-    resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
     dev: false
 
-  /@types/d3-transition@3.0.5:
-    resolution: {integrity: sha512-dcfjP6prFxj3ziFOJrnt4W2P0oXNj/sGxsJXH8286sHtVZ4qWGbjuZj+RRCYx4YZ4C0izpeE8OqXVCtoWEtzYg==}
+  /@types/d3-transition@3.0.8:
+    resolution: {integrity: sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==}
     dependencies:
-      '@types/d3-selection': 3.0.7
+      '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3-zoom@3.0.5:
-    resolution: {integrity: sha512-mIefdTLtxuWUWTbBupCUXPAXVPmi8/Uwrq41gQpRh0rD25GMU1ku+oTELqNY2NuuiI0F3wXC5e1liBQi7YS7XQ==}
+  /@types/d3-zoom@3.0.8:
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
     dependencies:
-      '@types/d3-interpolate': 3.0.2
-      '@types/d3-selection': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3@7.4.1:
-    resolution: {integrity: sha512-lBpYmbHTCtFKO1DB1R7E9dXp9/g1F3JXSGOF7iKPZ+wRmYg/Q6tCRHODGOc5Qk25fJRe2PI60EDRf2HLPUncMA==}
+  /@types/d3@7.4.3:
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
     dependencies:
-      '@types/d3-array': 3.0.8
-      '@types/d3-axis': 3.0.4
-      '@types/d3-brush': 3.0.4
-      '@types/d3-chord': 3.0.4
-      '@types/d3-color': 3.1.1
-      '@types/d3-contour': 3.0.4
-      '@types/d3-delaunay': 6.0.2
-      '@types/d3-dispatch': 3.0.4
-      '@types/d3-drag': 3.0.4
-      '@types/d3-dsv': 3.0.4
-      '@types/d3-ease': 3.0.0
-      '@types/d3-fetch': 3.0.4
-      '@types/d3-force': 3.0.6
-      '@types/d3-format': 3.0.2
-      '@types/d3-geo': 3.0.5
-      '@types/d3-hierarchy': 3.1.4
-      '@types/d3-interpolate': 3.0.2
-      '@types/d3-path': 3.0.0
-      '@types/d3-polygon': 3.0.0
-      '@types/d3-quadtree': 3.0.3
-      '@types/d3-random': 3.0.1
-      '@types/d3-scale': 4.0.5
-      '@types/d3-scale-chromatic': 3.0.0
-      '@types/d3-selection': 3.0.7
-      '@types/d3-shape': 3.1.3
-      '@types/d3-time': 3.0.1
-      '@types/d3-time-format': 4.0.1
-      '@types/d3-timer': 3.0.0
-      '@types/d3-transition': 3.0.5
-      '@types/d3-zoom': 3.0.5
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.9
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.6
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.0.2
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.8
+      '@types/d3-scale-chromatic': 3.0.3
+      '@types/d3-selection': 3.0.10
+      '@types/d3-shape': 3.1.6
+      '@types/d3-time': 3.0.3
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.8
+      '@types/d3-zoom': 3.0.8
     dev: false
 
   /@types/dagre@0.7.52:
     resolution: {integrity: sha512-XKJdy+OClLk3hketHi9Qg6gTfe1F3y+UFnHxKA2rn9Dw+oXa4Gb378Ztz9HlMgZKSxpPmn4BNVh9wgkpvrK1uw==}
     dev: false
 
-  /@types/diff@5.0.5:
-    resolution: {integrity: sha512-rt7WqM1bWwKJMRxlB5Rhke56UN21Bqwp1ILER31bafTivcapYdfhtPd5xRWfhf08yjPxoDcfjVkkECdRwFe7EA==}
+  /@types/diff@5.0.9:
+    resolution: {integrity: sha512-RWVEhh/zGXpAVF/ZChwNnv7r4rvqzJ7lYNSmZSVTxjV0PBLf6Qu7RNg+SUtkpzxmiNkjCx0Xn2tPp7FIkshJwQ==}
     dev: true
 
-  /@types/estree@1.0.2:
-    resolution: {integrity: sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==}
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
-  /@types/fs-extra@11.0.2:
-    resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==}
+  /@types/fs-extra@11.0.4:
+    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
     dependencies:
-      '@types/jsonfile': 6.1.2
-      '@types/node': 20.8.10
+      '@types/jsonfile': 6.1.4
+      '@types/node': 20.11.16
     dev: true
 
-  /@types/geojson@7946.0.11:
-    resolution: {integrity: sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==}
+  /@types/geojson@7946.0.14:
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
     dev: false
 
   /@types/http-proxy@1.17.14:
     resolution: {integrity: sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==}
     dependencies:
-      '@types/node': 20.10.1
+      '@types/node': 20.11.16
     dev: true
 
-  /@types/json-schema@7.0.13:
-    resolution: {integrity: sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==}
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
-  /@types/jsonfile@6.1.2:
-    resolution: {integrity: sha512-8t92P+oeW4d/CRQfJaSqEwXujrhH4OEeHRjGU3v1Q8mUS8GPF3yiX26sw4svv6faL2HfBtGTe2xWIoVgN3dy9w==}
+  /@types/jsonfile@6.1.4:
+    resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
     dependencies:
-      '@types/node': 20.10.1
+      '@types/node': 20.11.16
     dev: true
 
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:
-      '@types/node': 20.10.1
+      '@types/node': 20.11.16
     dev: false
 
   /@types/leaflet@1.7.6:
     resolution: {integrity: sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==}
     dependencies:
-      '@types/geojson': 7946.0.11
+      '@types/geojson': 7946.0.14
     dev: false
 
-  /@types/linkify-it@3.0.3:
-    resolution: {integrity: sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==}
+  /@types/linkify-it@3.0.5:
+    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
     dev: true
 
-  /@types/lodash.template@4.5.1:
-    resolution: {integrity: sha512-0y71S2dGgmwdkSsyW95JBp8HSZchgKCsjr6F0lsT3eSMtaT3Nn9rcMHU1U4UKu6XjQT3YC6/PNwgFI7k9f+ltw==}
+  /@types/lodash.template@4.5.3:
+    resolution: {integrity: sha512-Mo0UYKLu1oXgkV9TVoXZLlXXjyIXlW7ZQRxi/4gQJmzJr63dmicE8gG0OkPjYTKBrBic852q0JzqrtNUWLBIyA==}
     dependencies:
-      '@types/lodash': 4.14.199
+      '@types/lodash': 4.14.202
     dev: true
 
-  /@types/lodash.template@4.5.2:
-    resolution: {integrity: sha512-9V69JSviqXywQC9O/vZ5WjO4kmcol55t+pZDcsrKXkO4D5rGdF2/J0Ke2iChq689xIRoVGWXTQ8DGh9Lbg/UVg==}
-    dependencies:
-      '@types/lodash': 4.14.199
-    dev: true
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
 
-  /@types/lodash@4.14.199:
-    resolution: {integrity: sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==}
-
-  /@types/mapbox__point-geometry@0.1.2:
-    resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
+  /@types/mapbox__point-geometry@0.1.4:
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
     dev: false
 
-  /@types/mapbox__vector-tile@1.3.1:
-    resolution: {integrity: sha512-RpwGE57xM4a/YCH6XWzfcPVRPAu/jiCll0bEGRn6a4iubN2k4xZizskQoRj8fuXyo9BpI7F3bwz3uxs0pWbGNw==}
+  /@types/mapbox__vector-tile@1.3.4:
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
     dependencies:
-      '@types/geojson': 7946.0.11
-      '@types/mapbox__point-geometry': 0.1.2
-      '@types/pbf': 3.0.3
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
     dev: false
 
   /@types/markdown-it@13.0.7:
     resolution: {integrity: sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==}
     dependencies:
-      '@types/linkify-it': 3.0.3
-      '@types/mdurl': 1.0.3
+      '@types/linkify-it': 3.0.5
+      '@types/mdurl': 1.0.5
     dev: true
 
-  /@types/mdast@3.0.13:
-    resolution: {integrity: sha512-HjiGiWedR0DVFkeNljpa6Lv4/IZU1+30VY5d747K7lBudFc3R0Ibr6yJ9lN3BE28VnZyDfLF/VB1Ql1ZIbKrmg==}
+  /@types/mdast@3.0.15:
+    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
     dependencies:
-      '@types/unist': 2.0.8
+      '@types/unist': 2.0.10
     dev: true
 
-  /@types/mdurl@1.0.3:
-    resolution: {integrity: sha512-T5k6kTXak79gwmIOaDF2UUQXFbnBE0zBUzF20pz7wDYu0RQMzWg+Ml/Pz50214NsFHBITkoi5VtdjFZnJ2ijjA==}
+  /@types/mdurl@1.0.5:
+    resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
     dev: true
 
-  /@types/minimist@1.2.3:
-    resolution: {integrity: sha512-ZYFzrvyWUNhaPomn80dsMNgMeXxNWZBdkuG/hWlUvXvbdUH8ZERNBGXnU87McuGcWDsyzX2aChCv/SVN348k3A==}
+  /@types/minimist@1.2.5:
+    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
     dev: true
 
-  /@types/node@20.10.1:
-    resolution: {integrity: sha512-T2qwhjWwGH81vUEx4EXmBKsTJRXFXNZTL4v0gi01+zyBmCwzE6TyHszqX01m+QHTEq+EZNo13NeJIdEqf+Myrg==}
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
     dependencies:
       undici-types: 5.26.5
 
-  /@types/node@20.4.7:
-    resolution: {integrity: sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==}
+  /@types/node@20.5.1:
+    resolution: {integrity: sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==}
 
-  /@types/node@20.8.10:
-    resolution: {integrity: sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==}
-    dependencies:
-      undici-types: 5.26.5
+  /@types/normalize-package-data@2.4.4:
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
     dev: true
 
-  /@types/node@20.8.8:
-    resolution: {integrity: sha512-YRsdVxq6OaLfmR9Hy816IMp33xOBjfyOgUd77ehqg96CFywxAPbDbXvAsuN2KVg2HOT8Eh6uAfU+l4WffwPVrQ==}
-    dependencies:
-      undici-types: 5.25.3
-    dev: true
-
-  /@types/normalize-package-data@2.4.2:
-    resolution: {integrity: sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==}
-    dev: true
-
-  /@types/parse-json@4.0.0:
-    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+  /@types/parse-json@4.0.2:
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
     dev: false
 
-  /@types/pbf@3.0.3:
-    resolution: {integrity: sha512-hw6bDMjvm+QTvEC+pRLpnTknQXoPu8Fnf+A+zX9HB7j/7RfYajFSbdukabo3adPwvvEHhIMafQl0R0Tpej7clQ==}
+  /@types/pbf@3.0.5:
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
     dev: false
 
-  /@types/prompts@2.4.5:
-    resolution: {integrity: sha512-TvrzGMCwARi2qqXcD7VmvMvfMP3F7JRQpeEHECK0oufRNZInoBqzd8v/1zksKFE5XW8OOGto/5FsDT8lnpvGRA==}
+  /@types/prompts@2.4.9:
+    resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
     dependencies:
-      '@types/node': 20.8.10
+      '@types/node': 20.11.16
       kleur: 3.0.3
     dev: true
 
-  /@types/resize-observer-browser@0.1.8:
-    resolution: {integrity: sha512-OpjAd26fD1G2OWlYzkrapJ12n+kyi0znYgE2AHfNccHY/am3kG+lfJ5brfcZ7+1CIybkPWGKrW+Wm97kbcOQaQ==}
+  /@types/resize-observer-browser@0.1.11:
+    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
     dev: false
 
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: true
 
-  /@types/responselike@1.0.2:
-    resolution: {integrity: sha512-/4YQT5Kp6HxUDb4yhRkm0bJ7TbjvTddqX7PZ5hz6qV3pxSo72f/6YPRo+Mu2DU307tm9IioO69l7uAwn5XNcFA==}
+  /@types/responselike@1.0.3:
+    resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
     dependencies:
-      '@types/node': 20.10.1
+      '@types/node': 20.11.16
     dev: false
 
-  /@types/semver@7.5.3:
-    resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
+  /@types/semver@7.5.6:
+    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
   /@types/supercluster@5.0.3:
     resolution: {integrity: sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==}
     dependencies:
-      '@types/geojson': 7946.0.11
+      '@types/geojson': 7946.0.14
     dev: false
 
   /@types/three@0.135.0:
     resolution: {integrity: sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg==}
     dev: false
 
-  /@types/throttle-debounce@5.0.0:
-    resolution: {integrity: sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==}
+  /@types/throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==}
     dev: false
 
-  /@types/topojson-client@3.1.2:
-    resolution: {integrity: sha512-Lp6ZDxSQf9Tr4IcV/aJ72Zk1Fso7oPg1AbLKF4b6Jc5k05z+WK7nmmpfneKsnbj1NNUwj2SgydBZyJzc4O865w==}
+  /@types/topojson-client@3.1.4:
+    resolution: {integrity: sha512-Ntf3ZSetMYy7z3PrVCvcqmdRoVhgKA9UKN0ZuuZf8Ts2kcyL4qK34IXBs6qO5fem62EK4k03PtkJPVoroVu4/w==}
     dependencies:
-      '@types/geojson': 7946.0.11
-      '@types/topojson-specification': 1.0.3
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
     dev: false
 
-  /@types/topojson-server@3.0.2:
-    resolution: {integrity: sha512-GAa4b3+tTnNID68Fmx1G2VSAvDHXlyHDCfpPFZxYEch/9qV38y5WsGpQIqcyRHd1cdtCJpcKZ3xpm8Q+Lvvr2A==}
+  /@types/topojson-server@3.0.4:
+    resolution: {integrity: sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==}
     dependencies:
-      '@types/geojson': 7946.0.11
-      '@types/topojson-specification': 1.0.3
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
     dev: false
 
-  /@types/topojson-simplify@3.0.1:
-    resolution: {integrity: sha512-H7SS2X11Lo3iRT3e7R6jPTAazOoSLD0LKIGq1b+4m/76Md46JfeU3zVIhxfIX9FY7oiyEbXwGumjK1GUXwIIMA==}
+  /@types/topojson-simplify@3.0.3:
+    resolution: {integrity: sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==}
     dependencies:
-      '@types/geojson': 7946.0.11
-      '@types/topojson-specification': 1.0.3
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
     dev: false
 
-  /@types/topojson-specification@1.0.3:
-    resolution: {integrity: sha512-0rGL/Buelb+H2SVfmDRSDNxWgYQk4U/R18wrFc2DOfBKHaKOSz9bXbLQxAFY7j16e1E182bGwoSJdUhRq9fqBA==}
+  /@types/topojson-specification@1.0.5:
+    resolution: {integrity: sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==}
     dependencies:
-      '@types/geojson': 7946.0.11
+      '@types/geojson': 7946.0.14
     dev: false
 
-  /@types/topojson@3.2.4:
-    resolution: {integrity: sha512-aEX3V0JvhEg/8ehKKFHSyKb//1bAPzNTrNaeslNUrDAxfqlb2bepwO9/kafmGWKCPeZOsIZJmsTq4Ya6D40SPA==}
+  /@types/topojson@3.2.6:
+    resolution: {integrity: sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==}
     dependencies:
-      '@types/geojson': 7946.0.11
-      '@types/topojson-client': 3.1.2
-      '@types/topojson-server': 3.0.2
-      '@types/topojson-simplify': 3.0.1
-      '@types/topojson-specification': 1.0.3
+      '@types/geojson': 7946.0.14
+      '@types/topojson-client': 3.1.4
+      '@types/topojson-server': 3.0.4
+      '@types/topojson-simplify': 3.0.3
+      '@types/topojson-specification': 1.0.5
     dev: false
 
-  /@types/unist@2.0.8:
-    resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==}
+  /@types/unist@2.0.10:
+    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: true
 
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-vntq452UHNltxsaaN+L9WyuMch8bMd9CqJ3zhzTPXXidwbf5mqqKCVXEuvRZUqLJSTLeWE65lQwyXsRGnXkCTA==}
+  /@typescript-eslint/eslint-plugin@6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-fTwGQUnjhoYHeSF6m5pWNkzmDDdsKELYrOBxhjMrofPqCkoC2k3B2wvGHFxa1CTIqkEn88nlW1HVMztjo2K8Hg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -4397,45 +3824,16 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.9.0
-      '@typescript-eslint/parser': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/type-utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.3
-      debug: 4.3.4
-      eslint: 8.53.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      natural-compare: 1.4.0
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/eslint-plugin@6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-vntq452UHNltxsaaN+L9WyuMch8bMd9CqJ3zhzTPXXidwbf5mqqKCVXEuvRZUqLJSTLeWE65lQwyXsRGnXkCTA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@eslint-community/regexpp': 4.9.0
-      '@typescript-eslint/parser': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/type-utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.7.3
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 6.20.0
+      '@typescript-eslint/type-utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.5.4
       ts-api-utils: 1.0.3(typescript@5.3.3)
@@ -4444,8 +3842,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.7.3(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-TlutE+iep2o7R8Lf+yoer3zU6/0EAUc8QIBB3GYBc1KGz4c4TRm83xwXUZVPlZ6YCLss4r77jbu6j3sendJoiQ==}
+  /@typescript-eslint/parser@6.20.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-bYerPDF/H5v6V76MdMYhjwmwgMA+jlPVqjSDq2cRqMi8bP5sR3Z+RLOiOMad3nsnmDVmn2gAFCyNgh/dIrfP/w==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -4454,31 +3852,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.3
-      debug: 4.3.4
-      eslint: 8.53.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/parser@6.7.3(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-TlutE+iep2o7R8Lf+yoer3zU6/0EAUc8QIBB3GYBc1KGz4c4TRm83xwXUZVPlZ6YCLss4r77jbu6j3sendJoiQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.7.3
+      '@typescript-eslint/scope-manager': 6.20.0
+      '@typescript-eslint/types': 6.20.0
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       eslint: 8.56.0
       typescript: 5.3.3
@@ -4494,16 +3871,16 @@ packages:
       '@typescript-eslint/visitor-keys': 5.62.0
     dev: true
 
-  /@typescript-eslint/scope-manager@6.7.3:
-    resolution: {integrity: sha512-wOlo0QnEou9cHO2TdkJmzF7DFGvAKEnB82PuPNHpT8ZKKaZu6Bm63ugOTn9fXNJtvuDPanBc78lGUGGytJoVzQ==}
+  /@typescript-eslint/scope-manager@6.20.0:
+    resolution: {integrity: sha512-p4rvHQRDTI1tGGMDFQm+GtxP1ZHyAh64WANVoyEcNMpaTFn3ox/3CcgtIlELnRfKzSs/DwYlDccJEtr3O6qBvA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/visitor-keys': 6.7.3
+      '@typescript-eslint/types': 6.20.0
+      '@typescript-eslint/visitor-keys': 6.20.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.7.3(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-Fc68K0aTDrKIBvLnKTZ5Pf3MXK495YErrbHb1R6aTpfK5OdSFj0rVN7ib6Tx6ePrZ2gsjLqr0s98NG7l96KSQw==}
+  /@typescript-eslint/type-utils@6.20.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-qnSobiJQb1F5JjN0YDRPHruQTrX7ICsmltXhkV536mp4idGAYrIyr47zF/JmkJtEcAVnIz4gUYJ7gOZa6SmN4g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -4512,28 +3889,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
-      debug: 4.3.4
-      eslint: 8.53.0
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/type-utils@6.7.3(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-Fc68K0aTDrKIBvLnKTZ5Pf3MXK495YErrbHb1R6aTpfK5OdSFj0rVN7ib6Tx6ePrZ2gsjLqr0s98NG7l96KSQw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.7.3(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       debug: 4.3.4
       eslint: 8.56.0
       ts-api-utils: 1.0.3(typescript@5.3.3)
@@ -4547,12 +3904,12 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/types@6.7.3:
-    resolution: {integrity: sha512-4g+de6roB2NFcfkZb439tigpAMnvEIg3rIjWQ+EM7IBaYt/CdJt6em9BJ4h4UpdgaBWdmx2iWsafHTrqmgIPNw==}
+  /@typescript-eslint/types@6.20.0:
+    resolution: {integrity: sha512-MM9mfZMAhiN4cOEcUOEx+0HmuaW3WBfukBZPCfwSqFnQy0grXYtngKCqpQN339X3RrwtzspWJrpbrupKYUSBXQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2):
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.3.3):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -4567,14 +3924,14 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.2.2)
-      typescript: 5.2.2
+      tsutils: 3.21.0(typescript@5.3.3)
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.7.3(typescript@5.2.2):
-    resolution: {integrity: sha512-YLQ3tJoS4VxLFYHTw21oe1/vIZPRqAO91z6Uv0Ss2BKm/Ag7/RVQBcXTGcXhgJMdA4U+HrKuY5gWlJlvoaKZ5g==}
+  /@typescript-eslint/typescript-estree@6.20.0(typescript@5.3.3):
+    resolution: {integrity: sha512-RnRya9q5m6YYSpBN7IzKu9FmLcYtErkDkc8/dKv81I9QiLLtVBHrjz+Ev/crAqgMNW2FCsoZF4g2QUylMnJz+g==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -4582,32 +3939,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/visitor-keys': 6.7.3
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@typescript-eslint/typescript-estree@6.7.3(typescript@5.3.3):
-    resolution: {integrity: sha512-YLQ3tJoS4VxLFYHTw21oe1/vIZPRqAO91z6Uv0Ss2BKm/Ag7/RVQBcXTGcXhgJMdA4U+HrKuY5gWlJlvoaKZ5g==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/visitor-keys': 6.7.3
+      '@typescript-eslint/types': 6.20.0
+      '@typescript-eslint/visitor-keys': 6.20.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
+      minimatch: 9.0.3
       semver: 7.5.4
       ts-api-utils: 1.0.3(typescript@5.3.3)
       typescript: 5.3.3
@@ -4615,19 +3952,19 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.53.0)(typescript@5.2.2):
+  /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@types/json-schema': 7.0.13
-      '@types/semver': 7.5.3
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.6
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
-      eslint: 8.53.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3)
+      eslint: 8.56.0
       eslint-scope: 5.1.1
       semver: 7.5.4
     transitivePeerDependencies:
@@ -4635,37 +3972,18 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.7.3(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-vzLkVder21GpWRrmSR9JxGZ5+ibIUSudXlW52qeKpzUEQhRSmyZiVDDj3crAth7+5tmN1ulvgKaCU2f/bPRCzg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@types/json-schema': 7.0.13
-      '@types/semver': 7.5.3
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.2.2)
-      eslint: 8.53.0
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
-  /@typescript-eslint/utils@6.7.3(eslint@8.56.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-vzLkVder21GpWRrmSR9JxGZ5+ibIUSudXlW52qeKpzUEQhRSmyZiVDDj3crAth7+5tmN1ulvgKaCU2f/bPRCzg==}
+  /@typescript-eslint/utils@6.20.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-/EKuw+kRu2vAqCoDwDCBtDRU6CTKbUmwwI7SH7AashZ+W+7o8eiyy6V2cdOqN49KsTcASWsC5QeghYuRDTyOOg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@types/json-schema': 7.0.13
-      '@types/semver': 7.5.3
-      '@typescript-eslint/scope-manager': 6.7.3
-      '@typescript-eslint/types': 6.7.3
-      '@typescript-eslint/typescript-estree': 6.7.3(typescript@5.3.3)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 6.20.0
+      '@typescript-eslint/types': 6.20.0
+      '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3)
       eslint: 8.56.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -4681,11 +3999,11 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.7.3:
-    resolution: {integrity: sha512-HEVXkU9IB+nk9o63CeICMHxFWbHWr3E1mpilIQBe9+7L/lH97rleFLVtYsfnWB+JVMaiFnEaxvknvmIzX+CqVg==}
+  /@typescript-eslint/visitor-keys@6.20.0:
+    resolution: {integrity: sha512-E8Cp98kRe4gKHjJD4NExXKz/zOJ1A2hhZc+IMVD6i7w4yjIvh6VyuRI0gRtxAsXtoC35uGMaQ9rjI2zJaXDEAw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.7.3
+      '@typescript-eslint/types': 6.20.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -4693,42 +4011,42 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@unhead/dom@1.8.8:
-    resolution: {integrity: sha512-KRtn+tvA83lEtKrtZD85XmqW04fcytVuNKLUpPBzhJvsxB3v7gozw0nu46e3EpbO3TGJjLlLd6brNHQY6WLWfA==}
+  /@unhead/dom@1.8.10:
+    resolution: {integrity: sha512-dBeDbHrBjeU+eVgMsD91TGEazb1dwLrY0x/ve01CldMCmm+WcRu++SUW7s1QX84mzGH2EgFz78o1OPn6jpV3zw==}
     dependencies:
-      '@unhead/schema': 1.8.8
-      '@unhead/shared': 1.8.8
+      '@unhead/schema': 1.8.10
+      '@unhead/shared': 1.8.10
     dev: true
 
-  /@unhead/schema@1.8.8:
-    resolution: {integrity: sha512-xuhNW4osVNLW1yQSbdInZ8YGiXVTi1gjF8rK1E4VnODpWLg8XOq0OpoCbdIlCH4X4A0Ee0UQGRyzkuuVZlrSsQ==}
+  /@unhead/schema@1.8.10:
+    resolution: {integrity: sha512-cy8RGOPkwOVY5EmRoCgGV8AqLjy/226xBVTY54kBct02Om3hBdpB9FZa9frM910pPUXMI8PNmFgABO23O7IdJA==}
     dependencies:
       hookable: 5.5.3
       zhead: 2.2.4
     dev: true
 
-  /@unhead/shared@1.8.8:
-    resolution: {integrity: sha512-LoIJUDgmOzxoRHSIf29w/wc+IzKN2XvGiQC2dZZrYoTjOOzodf75609PEW5bhx2aHio38k9F+6BnD3KDiJ7IIg==}
+  /@unhead/shared@1.8.10:
+    resolution: {integrity: sha512-pEFryAs3EmV+ShDQx2ZBwUnt5l3RrMrXSMZ50oFf+MImKZNARVvD4+3I8fEI9wZh+Zq0JYG3UAfzo51MUP+Juw==}
     dependencies:
-      '@unhead/schema': 1.8.8
+      '@unhead/schema': 1.8.10
     dev: true
 
-  /@unhead/ssr@1.8.8:
-    resolution: {integrity: sha512-+nKFgU2jT/3U0x97pQaVYa5+pH+ngpdfqPjpT6Wti8htJsBnRRUdQ8X3hTyD2vHgFsrUTj0RRr9/6CY/qdpM/A==}
+  /@unhead/ssr@1.8.10:
+    resolution: {integrity: sha512-7wKRKDd8c2NFmMyPetj8Ah5u2hXunDBZT5Y2DH83O16PiMxx4/uobGamTV1EfcqjTvOKJvAqkrYZNYSWss99NQ==}
     dependencies:
-      '@unhead/schema': 1.8.8
-      '@unhead/shared': 1.8.8
+      '@unhead/schema': 1.8.10
+      '@unhead/shared': 1.8.10
     dev: true
 
-  /@unhead/vue@1.8.8(vue@3.4.15):
-    resolution: {integrity: sha512-isHpVnSSE5SP+ObsZG/i+Jq9tAQ2u1AbGrktXKmL7P5FRxwPjhATYnJFdGpxXeXfuaFgRFKzGKs29xo4MMVODw==}
+  /@unhead/vue@1.8.10(vue@3.4.15):
+    resolution: {integrity: sha512-KF8pftHnxnlBlgNpKXWLTg3ZUtkuDCxRPUFSDBy9CtqRSX/qvAhLZ26mbqRVmHj8KigiRHP/wnPWNyGnUx20Bg==}
     peerDependencies:
       vue: '>=2.7 || >=3'
     dependencies:
-      '@unhead/schema': 1.8.8
-      '@unhead/shared': 1.8.8
+      '@unhead/schema': 1.8.10
+      '@unhead/shared': 1.8.10
       hookable: 5.5.3
-      unhead: 1.8.8
+      unhead: 1.8.10
       vue: 3.4.15(typescript@5.3.3)
     dev: true
 
@@ -4750,18 +4068,18 @@ packages:
     dependencies:
       '@emotion/css': 11.11.2
       '@juggle/resize-observer': 3.4.0
-      '@types/d3': 7.4.1
-      '@types/d3-collection': 1.0.11
+      '@types/d3': 7.4.3
+      '@types/d3-collection': 1.0.13
       '@types/d3-sankey': 0.11.2
       '@types/dagre': 0.7.52
-      '@types/geojson': 7946.0.11
+      '@types/geojson': 7946.0.14
       '@types/leaflet': 1.7.6
       '@types/supercluster': 5.0.3
       '@types/three': 0.135.0
-      '@types/throttle-debounce': 5.0.0
-      '@types/topojson': 3.2.4
-      '@types/topojson-client': 3.1.2
-      '@types/topojson-specification': 1.0.3
+      '@types/throttle-debounce': 5.0.2
+      '@types/topojson': 3.2.6
+      '@types/topojson-client': 3.1.4
+      '@types/topojson-specification': 1.0.5
       '@unovis/dagre-layout': 0.8.8-2
       '@unovis/graphlibrary': 2.2.0-2
       d3: 7.8.5
@@ -4795,15 +4113,15 @@ packages:
   /@vee-validate/zod@4.12.5(vue@3.4.15):
     resolution: {integrity: sha512-hUjvXaa4HHvlZeosucViIDOUikQmyKaXXuL6P8LR1ETOUrBV6ntTsafJGvRYtwhXosoLYuolUD6Km737okK4Gg==}
     dependencies:
-      type-fest: 4.8.3
+      type-fest: 4.10.2
       vee-validate: 4.12.5(vue@3.4.15)
       zod: 3.22.4
     transitivePeerDependencies:
       - vue
     dev: false
 
-  /@vercel/nft@0.24.3:
-    resolution: {integrity: sha512-IyBdIxmFAeGZnEfMgt4QrGK7XX4lWazlQj34HEi9dw04/WeDBJ7r1yaOIO5tTf9pbfvwUFodj9b0H+NDGGoOMg==}
+  /@vercel/nft@0.24.4:
+    resolution: {integrity: sha512-KjYAZty7boH5fi5udp6p+lNu6nawgs++pHW+3koErMgbRkkHuToGX/FwjN5clV1FcaM3udfd4zW/sUapkMgpZw==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
@@ -4816,29 +4134,13 @@ packages:
       glob: 7.2.3
       graceful-fs: 4.2.11
       micromatch: 4.0.5
-      node-gyp-build: 4.7.1
+      node-gyp-build: 4.8.0
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@4.5.1)(vue@3.4.15):
-    resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0 || ^5.0.0
-      vue: ^3.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
-      '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
-      vite: 4.5.1(@types/node@20.10.1)
-      vue: 3.4.15(typescript@5.3.3)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.12)(vue@3.4.15):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4846,26 +4148,15 @@ packages:
       vite: ^4.0.0 || ^5.0.0
       vue: ^3.0.0
     dependencies:
-      '@babel/core': 7.23.5
-      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
-      '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
-      vite: 5.0.12(@types/node@20.8.10)
+      '@babel/core': 7.23.9
+      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9)
+      '@vue/babel-plugin-jsx': 1.2.1(@babel/core@7.23.9)
+      vite: 5.0.12(@types/node@20.11.16)
       vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.5.0(vite@4.5.1)(vue@3.4.15):
-    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0 || ^5.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.5.1(@types/node@20.10.1)
-      vue: 3.4.15(typescript@5.3.3)
-    dev: true
-
   /@vitejs/plugin-vue@5.0.3(vite@5.0.12)(vue@3.4.15):
     resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4873,7 +4164,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.12(@types/node@20.8.10)
+      vite: 5.0.12(@types/node@20.11.16)
       vue: 3.4.15(typescript@5.3.3)
     dev: true
 
@@ -4882,7 +4173,7 @@ packages:
     dependencies:
       '@vitest/spy': 0.33.0
       '@vitest/utils': 0.33.0
-      chai: 4.3.10
+      chai: 4.4.1
     dev: true
 
   /@vitest/expect@0.34.6:
@@ -4890,7 +4181,7 @@ packages:
     dependencies:
       '@vitest/spy': 0.34.6
       '@vitest/utils': 0.34.6
-      chai: 4.3.10
+      chai: 4.4.1
     dev: true
 
   /@vitest/runner@0.33.0:
@@ -4912,7 +4203,7 @@ packages:
   /@vitest/snapshot@0.33.0:
     resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==}
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
@@ -4920,7 +4211,7 @@ packages:
   /@vitest/snapshot@0.34.6:
     resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
@@ -4928,43 +4219,35 @@ packages:
   /@vitest/spy@0.33.0:
     resolution: {integrity: sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==}
     dependencies:
-      tinyspy: 2.1.1
+      tinyspy: 2.2.0
     dev: true
 
   /@vitest/spy@0.34.6:
     resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
     dependencies:
-      tinyspy: 2.1.1
+      tinyspy: 2.2.0
     dev: true
 
-  /@vitest/ui@0.34.5(vitest@0.34.6):
-    resolution: {integrity: sha512-nK3Ny7fQgoTJMCGXLzYL0oo1ePtruRM9eYT1Y8esQx8fHj05davqVgqWv4Kd+Yy8PfzyrduTx1EYBdSMIbQh8A==}
+  /@vitest/ui@0.34.7(vitest@0.34.6):
+    resolution: {integrity: sha512-iizUu9R5Rsvsq8FtdJ0suMqEfIsIIzziqnasMHe4VH8vG+FnZSA3UAtCHx6rLeRupIFVAVg7bptMmuvMcsn8WQ==}
     peerDependencies:
       vitest: '>=0.30.1 <1'
     dependencies:
-      '@vitest/utils': 0.34.5
-      fast-glob: 3.3.1
+      '@vitest/utils': 0.34.7
+      fast-glob: 3.3.2
       fflate: 0.8.1
       flatted: 3.2.9
       pathe: 1.1.2
       picocolors: 1.0.0
-      sirv: 2.0.3
-      vitest: 0.34.6(@vitest/ui@0.34.5)
+      sirv: 2.0.4
+      vitest: 0.34.6(@vitest/ui@0.34.7)
     dev: true
 
   /@vitest/utils@0.33.0:
     resolution: {integrity: sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==}
     dependencies:
       diff-sequences: 29.6.3
-      loupe: 2.3.6
-      pretty-format: 29.7.0
-    dev: true
-
-  /@vitest/utils@0.34.5:
-    resolution: {integrity: sha512-ur6CmmYQoeHMwmGb0v+qwkwN3yopZuZyf4xt1DBBSGBed8Hf9Gmbm/5dEWqgpLPdRx6Av6jcWXrjcKfkTzg/pw==}
-    dependencies:
-      diff-sequences: 29.6.3
-      loupe: 2.3.6
+      loupe: 2.3.7
       pretty-format: 29.7.0
     dev: true
 
@@ -4972,7 +4255,15 @@ packages:
     resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
     dependencies:
       diff-sequences: 29.6.3
-      loupe: 2.3.6
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
+  /@vitest/utils@0.34.7:
+    resolution: {integrity: sha512-ziAavQLpCYS9sLOorGrFFKmy2gnfiNU0ZJ15TsMz/K92NAPS/rp9K4z6AJQQk5Y8adCy4Iwpxy7pQumQ/psnRg==}
+    dependencies:
+      diff-sequences: 29.6.3
+      loupe: 2.3.7
       pretty-format: 29.7.0
     dev: true
 
@@ -4995,8 +4286,8 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
-  /@vue-macros/common@1.9.0(rollup@3.29.4)(vue@3.4.15):
-    resolution: {integrity: sha512-LbfRHDkceuokkLlVuQW9Wq3ZLmRs6KIDPzCjUvvL14HB4GslWdtvBB1suFfNs6VMvh9Zj30cEKF/EAP7QBCZ6Q==}
+  /@vue-macros/common@1.10.1(rollup@3.29.4)(vue@3.4.15):
+    resolution: {integrity: sha512-uftSpfwdwitcQT2lM8aVxcfe5rKQBzC9jMrtJM5sG4hEuFyfIvnJihpPpnaWxY+X4p64k+YYXtBFv+1O5Bq3dg==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
       vue: ^2.7.0 || ^3.2.25
@@ -5004,10 +4295,10 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@babel/types': 7.23.6
+      '@babel/types': 7.23.9
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      '@vue/compiler-sfc': 3.4.8
-      ast-kit: 0.11.2(rollup@3.29.4)
+      '@vue/compiler-sfc': 3.4.15
+      ast-kit: 0.11.3(rollup@3.29.4)
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
       vue: 3.4.15(typescript@5.3.3)
@@ -5015,22 +4306,27 @@ packages:
       - rollup
     dev: true
 
-  /@vue/babel-helper-vue-transform-on@1.1.5:
-    resolution: {integrity: sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==}
+  /@vue/babel-helper-vue-transform-on@1.2.1:
+    resolution: {integrity: sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==}
     dev: true
 
-  /@vue/babel-plugin-jsx@1.1.5(@babel/core@7.23.5):
-    resolution: {integrity: sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==}
+  /@vue/babel-plugin-jsx@1.2.1(@babel/core@7.23.9):
+    resolution: {integrity: sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
     dependencies:
-      '@babel/core': 7.23.5
+      '@babel/core': 7.23.9
       '@babel/helper-module-imports': 7.22.15
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.5)
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.6
-      '@vue/babel-helper-vue-transform-on': 1.1.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.9)
+      '@babel/template': 7.23.9
+      '@babel/traverse': 7.23.9
+      '@babel/types': 7.23.9
+      '@vue/babel-helper-vue-transform-on': 1.2.1
+      '@vue/babel-plugin-resolve-type': 1.2.1(@babel/core@7.23.9)
       camelcase: 6.3.0
       html-tags: 3.3.1
       svg-tags: 1.0.0
@@ -5038,116 +4334,53 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/compiler-core@3.3.7:
-    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
+  /@vue/babel-plugin-resolve-type@1.2.1(@babel/core@7.23.9):
+    resolution: {integrity: sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/shared': 3.3.7
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: false
+      '@babel/code-frame': 7.23.5
+      '@babel/core': 7.23.9
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/parser': 7.23.9
+      '@vue/compiler-sfc': 3.4.15
+    dev: true
 
   /@vue/compiler-core@3.4.15:
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
     dependencies:
-      '@babel/parser': 7.23.6
+      '@babel/parser': 7.23.9
       '@vue/shared': 3.4.15
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
-  /@vue/compiler-core@3.4.8:
-    resolution: {integrity: sha512-GjAwOydZV6UyVBi1lYW5v4jjfU6wOeyi3vBATKJOwV7muYF0/nZi4kfdJc0pwdT5lXwbbx57lyA2Y356rFpw1A==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/shared': 3.4.8
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: true
-
-  /@vue/compiler-dom@3.3.7:
-    resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==}
-    dependencies:
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: false
-
   /@vue/compiler-dom@3.4.15:
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
     dependencies:
       '@vue/compiler-core': 3.4.15
       '@vue/shared': 3.4.15
 
-  /@vue/compiler-dom@3.4.8:
-    resolution: {integrity: sha512-GsPyji42zmkSJlaDFKXvwB97ukTlHzlFH/iVzPFYz/APnSzuhu/CMFQbsYmrtsnc2yscF39eC4rKzvKR27aBug==}
-    dependencies:
-      '@vue/compiler-core': 3.4.8
-      '@vue/shared': 3.4.8
-    dev: true
-
-  /@vue/compiler-sfc@3.3.7:
-    resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.3.7
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-ssr': 3.3.7
-      '@vue/reactivity-transform': 3.3.7
-      '@vue/shared': 3.3.7
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      postcss: 8.4.31
-      source-map-js: 1.0.2
-    dev: false
-
   /@vue/compiler-sfc@3.4.15:
     resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
     dependencies:
-      '@babel/parser': 7.23.6
+      '@babel/parser': 7.23.9
       '@vue/compiler-core': 3.4.15
       '@vue/compiler-dom': 3.4.15
       '@vue/compiler-ssr': 3.4.15
       '@vue/shared': 3.4.15
       estree-walker: 2.0.2
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       postcss: 8.4.33
       source-map-js: 1.0.2
 
-  /@vue/compiler-sfc@3.4.8:
-    resolution: {integrity: sha512-3ZcurOa6bQdZ6VZLtMqYSUZqpsMqfX0MC3oCxQG0VIJFCqouZAgRYJN1c8QvGs7HW5wW8aXVvUOQU0ILVlYHKA==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.4.8
-      '@vue/compiler-dom': 3.4.8
-      '@vue/compiler-ssr': 3.4.8
-      '@vue/shared': 3.4.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      postcss: 8.4.33
-      source-map-js: 1.0.2
-    dev: true
-
-  /@vue/compiler-ssr@3.3.7:
-    resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==}
-    dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: false
-
   /@vue/compiler-ssr@3.4.15:
     resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
     dependencies:
       '@vue/compiler-dom': 3.4.15
       '@vue/shared': 3.4.15
 
-  /@vue/compiler-ssr@3.4.8:
-    resolution: {integrity: sha512-nxN79LHeAemhBpIa2PQ6rz57cW7W4C/XIJCOMSn2g49u6q2ekirmJI0osAOTErQPApOR0KwP2QyeTexX4zQCrw==}
-    dependencies:
-      '@vue/compiler-dom': 3.4.8
-      '@vue/shared': 3.4.8
-    dev: true
-
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
@@ -5195,19 +4428,9 @@ packages:
       muggle-string: 0.3.1
       path-browserify: 1.0.1
       typescript: 5.3.3
-      vue-template-compiler: 2.7.14
+      vue-template-compiler: 2.7.16
     dev: true
 
-  /@vue/reactivity-transform@3.3.7:
-    resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-    dev: false
-
   /@vue/reactivity@3.4.15:
     resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
@@ -5233,23 +4456,11 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.15
       '@vue/shared': 3.4.15
-      vue: 3.4.15(typescript@5.2.2)
-
-  /@vue/shared@3.3.7:
-    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
-    dev: false
-
-  /@vue/shared@3.3.9:
-    resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
-    dev: true
+      vue: 3.4.15(typescript@5.3.3)
 
   /@vue/shared@3.4.15:
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
 
-  /@vue/shared@3.4.8:
-    resolution: {integrity: sha512-ChLCWzXiJboQ009oVkemhEoUdrxHme7v3ip+Kh+/kDDeF1WtHWGt0knRLGm1Y4YqCRTSs9QxsZIY8paJj5Szrw==}
-    dev: true
-
   /@vue/tsconfig@0.5.1:
     resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
     dev: true
@@ -5274,7 +4485,7 @@ packages:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.2
       '@vueuse/shared': 10.7.2(vue@3.4.15)
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5323,7 +4534,7 @@ packages:
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/shared': 10.7.2(vue@3.4.15)
       focus-trap: 7.5.4
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5335,7 +4546,7 @@ packages:
   /@vueuse/shared@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5357,28 +4568,18 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.10.0):
+  /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.11.3
     dev: true
 
-  /acorn-walk@8.2.0:
-    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
     engines: {node: '>=0.4.0'}
 
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  /acorn@8.11.2:
-    resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   /acorn@8.11.3:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
@@ -5398,6 +4599,7 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -5414,13 +4616,6 @@ packages:
       humanize-ms: 1.2.1
     dev: false
 
-  /agentkeepalive@4.5.0:
-    resolution: {integrity: sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      humanize-ms: 1.2.1
-    dev: true
-
   /aggregate-error@3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
@@ -5447,23 +4642,23 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /algoliasearch@4.20.0:
-    resolution: {integrity: sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==}
+  /algoliasearch@4.22.1:
+    resolution: {integrity: sha512-jwydKFQJKIx9kIZ8Jm44SdpigFwRGPESaxZBaHSV0XWN2yBJAOT4mT7ppvlrpA4UGzz92pqFnVKr/kaZXrcreg==}
     dependencies:
-      '@algolia/cache-browser-local-storage': 4.20.0
-      '@algolia/cache-common': 4.20.0
-      '@algolia/cache-in-memory': 4.20.0
-      '@algolia/client-account': 4.20.0
-      '@algolia/client-analytics': 4.20.0
-      '@algolia/client-common': 4.20.0
-      '@algolia/client-personalization': 4.20.0
-      '@algolia/client-search': 4.20.0
-      '@algolia/logger-common': 4.20.0
-      '@algolia/logger-console': 4.20.0
-      '@algolia/requester-browser-xhr': 4.20.0
-      '@algolia/requester-common': 4.20.0
-      '@algolia/requester-node-http': 4.20.0
-      '@algolia/transporter': 4.20.0
+      '@algolia/cache-browser-local-storage': 4.22.1
+      '@algolia/cache-common': 4.22.1
+      '@algolia/cache-in-memory': 4.22.1
+      '@algolia/client-account': 4.22.1
+      '@algolia/client-analytics': 4.22.1
+      '@algolia/client-common': 4.22.1
+      '@algolia/client-personalization': 4.22.1
+      '@algolia/client-search': 4.22.1
+      '@algolia/logger-common': 4.22.1
+      '@algolia/logger-console': 4.22.1
+      '@algolia/requester-browser-xhr': 4.22.1
+      '@algolia/requester-common': 4.22.1
+      '@algolia/requester-node-http': 4.22.1
+      '@algolia/transporter': 4.22.1
     dev: true
 
   /ansi-align@2.0.0:
@@ -5553,10 +4748,6 @@ packages:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
     dev: true
 
-  /arch@2.2.0:
-    resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
-    dev: true
-
   /archiver-utils@4.0.1:
     resolution: {integrity: sha512-Q4Q99idbvzmgCTEAAhi32BkOyq8iVI5EwdO0PmBDSGIzzjYNdcFn7Q7k3OzbLy4kLUPXfJtG6fO2RjftXbobBg==}
     engines: {node: '>= 12.0.0'}
@@ -5578,7 +4769,7 @@ packages:
       buffer-crc32: 0.2.13
       readable-stream: 3.6.2
       readdir-glob: 1.1.3
-      tar-stream: 3.1.6
+      tar-stream: 3.1.7
       zip-stream: 5.0.1
     dev: true
 
@@ -5595,14 +4786,6 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
-  /are-we-there-yet@3.0.1:
-    resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    dependencies:
-      delegates: 1.0.0
-      readable-stream: 3.6.2
-    dev: true
-
   /arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
@@ -5629,10 +4812,10 @@ packages:
   /assert@2.1.0:
     resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       is-nan: 1.3.2
       object-is: 1.1.5
-      object.assign: 4.1.4
+      object.assign: 4.1.5
       util: 0.12.5
     dev: false
 
@@ -5640,11 +4823,11 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
-  /ast-kit@0.11.2(rollup@3.29.4):
-    resolution: {integrity: sha512-Q0DjXK4ApbVoIf9GLyCo252tUH44iTnD/hiJ2TQaJeydYWSpKk0sI34+WMel8S9Wt5pbLgG02oJ+gkgX5DV3sQ==}
+  /ast-kit@0.11.3(rollup@3.29.4):
+    resolution: {integrity: sha512-qdwwKEhckRk0XE22/xDdmU3v/60E8Edu4qFhgTLIhGGDs/PAJwLw9pQn8Rj99PitlbBZbYpx0k/lbir4kg0SuA==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/parser': 7.23.6
+      '@babel/parser': 7.23.9
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       pathe: 1.1.2
     transitivePeerDependencies:
@@ -5655,8 +4838,8 @@ packages:
     resolution: {integrity: sha512-kbL7ERlqjXubdDd+szuwdlQ1xUxEz9mCz1+m07ftNVStgwRb2RWw+U6oKo08PAvOishMxiqz1mlJyLl8yQx2Qg==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/parser': 7.23.6
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@babel/parser': 7.23.9
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
@@ -5673,7 +4856,7 @@ packages:
     resolution: {integrity: sha512-NsyHMxBh4dmdEHjBo1/TBZvCKxffmZxRYhmclfu0PP6Aftre47jOHYaYaNqJcV0bxihxFXhDkzLHUwHc0ocd0Q==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/parser': 7.23.6
+      '@babel/parser': 7.23.9
       ast-kit: 0.9.5(rollup@3.29.4)
     transitivePeerDependencies:
       - rollup
@@ -5694,7 +4877,7 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       caniuse-lite: 1.0.30001583
       fraction.js: 4.3.7
       normalize-range: 0.1.2
@@ -5703,8 +4886,8 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+  /available-typed-arrays@1.0.6:
+    resolution: {integrity: sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==}
     engines: {node: '>= 0.4'}
     dev: false
 
@@ -5726,7 +4909,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.9
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
@@ -5738,11 +4921,6 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
-  /big-integer@1.6.52:
-    resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
-    engines: {node: '>=0.6'}
-    dev: true
-
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -5758,8 +4936,8 @@ packages:
       file-uri-to-path: 1.0.0
     dev: true
 
-  /birpc@0.2.14:
-    resolution: {integrity: sha512-37FHE8rqsYM5JEKCnXFyHpBCzvgHEExwVVTq+nUmloInU7l8ezD1TpOhKpS8oe1DTYFqEK27rFZVKG43oTqXRA==}
+  /birpc@0.2.15:
+    resolution: {integrity: sha512-LuZgWLW6DB1zenkfJuF4/kfSZdazOR2xaMSzeqgvfbNIwECwV1AJso9wpNje79uaRU86Obbujv4qtDnwoOLQww==}
     dev: true
 
   /bl@1.2.3:
@@ -5797,13 +4975,6 @@ packages:
       widest-line: 2.0.1
     dev: false
 
-  /bplist-parser@0.2.0:
-    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
-    engines: {node: '>= 5.10.0'}
-    dependencies:
-      big-integer: 1.6.52
-    dev: true
-
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -5821,26 +4992,15 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /browserslist@4.22.0:
-    resolution: {integrity: sha512-v+Jcv64L2LbfTC6OnRcaxtqJNJuQAVhZKSJfR/6hn7lhnChUXl4amwVviqN1k411BB+3rRoKMitELRn1CojeRA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001540
-      electron-to-chromium: 1.4.531
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.13(browserslist@4.22.0)
-
-  /browserslist@4.22.2:
-    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
+  /browserslist@4.22.3:
+    resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001583
-      electron-to-chromium: 1.4.628
+      electron-to-chromium: 1.4.656
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.22.2)
-    dev: true
+      update-browserslist-db: 1.0.13(browserslist@4.22.3)
 
   /buffer-alloc-unsafe@1.1.0:
     resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
@@ -5886,87 +5046,51 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /bumpp@9.2.0:
-    resolution: {integrity: sha512-pgp7y3jp33QTaXFVDrE0IKuZF5Y8EsIz+ywZXFALW2nD+ZD+4crxJe/GypBQBoJuZrr5dc6TGrR3wl7fk3+C6w==}
+  /bumpp@9.3.0:
+    resolution: {integrity: sha512-P46VikoEZadYCqx7mbClKlaJnOyvc+JfRJPRf1YwlOjwqeYmutgFe1w9hvfXe819VhpU0N0TNXtxyVAUlAgaNA==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
       '@jsdevtools/ez-spawn': 3.0.4
-      c12: 1.4.2
+      c12: 1.6.1
       cac: 6.7.14
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
       prompts: 2.4.2
       semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
-  /bundle-name@3.0.0:
-    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
-    engines: {node: '>=12'}
+  /bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
     dependencies:
-      run-applescript: 5.0.0
+      run-applescript: 7.0.0
     dev: true
 
-  /bundle-require@4.0.2(esbuild@0.18.20):
+  /bundle-require@4.0.2(esbuild@0.19.12):
     resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
       esbuild: '>=0.17'
     dependencies:
-      esbuild: 0.18.20
+      esbuild: 0.19.12
       load-tsconfig: 0.2.5
     dev: true
 
-  /c12@1.4.2:
-    resolution: {integrity: sha512-3IP/MuamSVRVw8W8+CHWAz9gKN4gd+voF2zm/Ln6D25C2RhytEZ1ABbC8MjKr4BR9rhoV1JQ7jJA158LDiTkLg==}
-    dependencies:
-      chokidar: 3.5.3
-      defu: 6.1.2
-      dotenv: 16.3.1
-      giget: 1.1.2
-      jiti: 1.21.0
-      mlly: 1.4.2
-      ohash: 1.1.3
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.0.3
-      rc9: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  /c12@1.5.1:
-    resolution: {integrity: sha512-BWZRJgDEveT8uI+cliCwvYSSSSvb4xKoiiu5S0jaDbKBopQLQF7E+bq9xKk1pTcG+mUa3yXuFO7bD9d8Lr9Xxg==}
-    dependencies:
-      chokidar: 3.5.3
-      defu: 6.1.3
-      dotenv: 16.3.1
-      giget: 1.1.3
-      jiti: 1.21.0
-      mlly: 1.4.2
-      ohash: 1.1.3
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.0.3
-      rc9: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
-
   /c12@1.6.1:
     resolution: {integrity: sha512-fAZOi3INDvIbmjuwAVVggusyRTxwNdTAnwLay8IsXwhFzDwPPGzFxzrx6L55CPFGPulUSZI0eyFUvRDXveoE3g==}
     dependencies:
       chokidar: 3.5.3
       defu: 6.1.4
-      dotenv: 16.3.1
+      dotenv: 16.4.1
       giget: 1.2.1
       jiti: 1.21.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       ohash: 1.1.3
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       rc9: 2.1.1
-    dev: true
 
   /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
@@ -5991,34 +5115,16 @@ packages:
       y18n: 4.0.3
     dev: false
 
-  /cacache@17.1.4:
-    resolution: {integrity: sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      '@npmcli/fs': 3.1.0
-      fs-minipass: 3.0.3
-      glob: 10.3.10
-      lru-cache: 7.18.3
-      minipass: 7.0.3
-      minipass-collect: 1.0.2
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      p-map: 4.0.0
-      ssri: 10.0.5
-      tar: 6.2.0
-      unique-filename: 3.0.0
-    dev: true
-
-  /cacache@18.0.0:
-    resolution: {integrity: sha512-I7mVOPl3PUCeRub1U8YoGz2Lqv9WOBpobZ8RyWFXmReuILz+3OAyTa5oH3QPdtKZD7N0Yk00aLfzn0qvp8dZ1w==}
+  /cacache@18.0.2:
+    resolution: {integrity: sha512-r3NU8h/P+4lVUHfeRw1dtgQYar3DZMm4/cm2bZgOvrFC/su7budSOeqh52VJIC4U4iG1WWwV6vRW0znqBvxNuw==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@npmcli/fs': 3.1.0
       fs-minipass: 3.0.3
       glob: 10.3.10
-      lru-cache: 10.1.0
-      minipass: 7.0.3
-      minipass-collect: 1.0.2
+      lru-cache: 10.2.0
+      minipass: 7.0.4
+      minipass-collect: 2.0.1
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
@@ -6045,11 +5151,12 @@ packages:
       y18n: 3.2.2
     dev: false
 
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+  /call-bind@1.0.5:
+    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
     dependencies:
       function-bind: 1.1.2
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.2
+      set-function-length: 1.2.0
     dev: false
 
   /call-me-maybe@1.0.2:
@@ -6091,37 +5198,29 @@ packages:
   /caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
-      browserslist: 4.22.2
-      caniuse-lite: 1.0.30001576
+      browserslist: 4.22.3
+      caniuse-lite: 1.0.30001583
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite@1.0.30001540:
-    resolution: {integrity: sha512-9JL38jscuTJBTcuETxm8QLsFr/F6v0CYYTEU6r5+qSM98P2Q0Hmu0eG1dTG5GBUmywU3UlcVOUSIJYY47rdFSw==}
-
-  /caniuse-lite@1.0.30001576:
-    resolution: {integrity: sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==}
-    dev: true
-
   /caniuse-lite@1.0.30001583:
     resolution: {integrity: sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==}
-    dev: true
 
   /capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /chai@4.3.10:
-    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
+  /chai@4.4.1:
+    resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
       check-error: 1.0.3
       deep-eql: 4.1.3
       get-func-name: 2.0.2
-      loupe: 2.3.6
+      loupe: 2.3.7
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: true
@@ -6194,8 +5293,8 @@ packages:
     resolution: {integrity: sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==}
     dev: false
 
-  /ci-info@3.8.0:
-    resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
+  /ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
     dev: true
 
@@ -6208,7 +5307,6 @@ packages:
     resolution: {integrity: sha512-AS7n5NSc0OQVMV9v6wt3ByujNIrne0/cTjiC2MYqhvao57VNfiuVksTSr2p17nVOhEr2KtqiAkGwHcgMC/qUuQ==}
     dependencies:
       consola: 3.2.3
-    dev: true
 
   /class-variance-authority@0.7.0:
     resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
@@ -6262,8 +5360,8 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /cli-spinners@2.9.1:
-    resolution: {integrity: sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==}
+  /cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
     dev: false
 
@@ -6279,13 +5377,13 @@ packages:
     resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==}
     dev: false
 
-  /clipboardy@3.0.0:
-    resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  /clipboardy@4.0.0:
+    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
+    engines: {node: '>=18'}
     dependencies:
-      arch: 2.2.0
-      execa: 5.1.1
-      is-wsl: 2.2.0
+      execa: 8.0.1
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
     dev: true
 
   /cliui@8.0.1:
@@ -6385,10 +5483,17 @@ packages:
 
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
 
   /commander@11.0.0:
     resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
     engines: {node: '>=16'}
+    dev: true
+
+  /commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+    dev: false
 
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
@@ -6406,8 +5511,8 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
-  /comment-parser@1.4.0:
-    resolution: {integrity: sha512-QLyTNiZ2KDOibvFPlZ6ZngVsZ/0gYnE6uTXi5aoDg8ed3AkJAz4sEje3Y8a29hQ1s6A99MZXe47fLAXQ1rTqaw==}
+  /comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
     dev: true
 
@@ -6519,7 +5624,7 @@ packages:
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  /cosmiconfig-typescript-loader@4.4.0(@types/node@20.4.7)(cosmiconfig@8.3.6)(ts-node@10.9.1)(typescript@5.3.3):
+  /cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6)(ts-node@10.9.2)(typescript@5.3.3):
     resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==}
     engines: {node: '>=v14.21.3'}
     peerDependencies:
@@ -6528,9 +5633,9 @@ packages:
       ts-node: '>=10'
       typescript: '>=4'
     dependencies:
-      '@types/node': 20.4.7
-      cosmiconfig: 8.3.6(typescript@5.2.2)
-      ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
+      '@types/node': 20.5.1
+      cosmiconfig: 8.3.6(typescript@5.3.3)
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3)
       typescript: 5.3.3
     dev: true
 
@@ -6538,14 +5643,14 @@ packages:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
     dependencies:
-      '@types/parse-json': 4.0.0
+      '@types/parse-json': 4.0.2
       import-fresh: 3.3.0
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
     dev: false
 
-  /cosmiconfig@8.3.6(typescript@5.2.2):
+  /cosmiconfig@8.3.6(typescript@5.3.3):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6558,7 +5663,7 @@ packages:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
-      typescript: 5.2.2
+      typescript: 5.3.3
 
   /crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
@@ -6600,14 +5705,18 @@ packages:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  /crossws@0.1.1:
+    resolution: {integrity: sha512-c9c/o7bS3OjsdpSkvexpka0JNlesBF2JU9B2V1yNsYGwRbAafxhJQ7VI9b48D5bpONz/oxbPGMzBojy9sXoQIQ==}
+    dev: true
+
   /crypto-random-string@1.0.0:
     resolution: {integrity: sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==}
     engines: {node: '>=4'}
     dev: false
 
-  /css-declaration-sorter@6.4.1(postcss@8.4.33):
-    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==}
-    engines: {node: ^10 || ^12 || >=14}
+  /css-declaration-sorter@7.1.1(postcss@8.4.33):
+    resolution: {integrity: sha512-dZ3bVTEEc1vxr3Bek9vGwfB5Z6ESPULhcRvO472mfjVnj8jRcTnKO8/JTczlvxM10Myb+wBM++1MtdO76eWcaQ==}
+    engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.0.9
     dependencies:
@@ -6654,61 +5763,61 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  /cssnano-preset-default@6.0.1(postcss@8.4.33):
-    resolution: {integrity: sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==}
+  /cssnano-preset-default@6.0.3(postcss@8.4.33):
+    resolution: {integrity: sha512-4y3H370aZCkT9Ev8P4SO4bZbt+AExeKhh8wTbms/X7OLDo5E7AYUUy6YPxa/uF5Grf+AJwNcCnxKhZynJ6luBA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.4.33)
-      cssnano-utils: 4.0.0(postcss@8.4.33)
+      css-declaration-sorter: 7.1.1(postcss@8.4.33)
+      cssnano-utils: 4.0.1(postcss@8.4.33)
       postcss: 8.4.33
       postcss-calc: 9.0.1(postcss@8.4.33)
-      postcss-colormin: 6.0.0(postcss@8.4.33)
-      postcss-convert-values: 6.0.0(postcss@8.4.33)
-      postcss-discard-comments: 6.0.0(postcss@8.4.33)
-      postcss-discard-duplicates: 6.0.0(postcss@8.4.33)
-      postcss-discard-empty: 6.0.0(postcss@8.4.33)
-      postcss-discard-overridden: 6.0.0(postcss@8.4.33)
-      postcss-merge-longhand: 6.0.0(postcss@8.4.33)
-      postcss-merge-rules: 6.0.1(postcss@8.4.33)
-      postcss-minify-font-values: 6.0.0(postcss@8.4.33)
-      postcss-minify-gradients: 6.0.0(postcss@8.4.33)
-      postcss-minify-params: 6.0.0(postcss@8.4.33)
-      postcss-minify-selectors: 6.0.0(postcss@8.4.33)
-      postcss-normalize-charset: 6.0.0(postcss@8.4.33)
-      postcss-normalize-display-values: 6.0.0(postcss@8.4.33)
-      postcss-normalize-positions: 6.0.0(postcss@8.4.33)
-      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.33)
-      postcss-normalize-string: 6.0.0(postcss@8.4.33)
-      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.33)
-      postcss-normalize-unicode: 6.0.0(postcss@8.4.33)
-      postcss-normalize-url: 6.0.0(postcss@8.4.33)
-      postcss-normalize-whitespace: 6.0.0(postcss@8.4.33)
-      postcss-ordered-values: 6.0.0(postcss@8.4.33)
-      postcss-reduce-initial: 6.0.0(postcss@8.4.33)
-      postcss-reduce-transforms: 6.0.0(postcss@8.4.33)
-      postcss-svgo: 6.0.0(postcss@8.4.33)
-      postcss-unique-selectors: 6.0.0(postcss@8.4.33)
+      postcss-colormin: 6.0.2(postcss@8.4.33)
+      postcss-convert-values: 6.0.2(postcss@8.4.33)
+      postcss-discard-comments: 6.0.1(postcss@8.4.33)
+      postcss-discard-duplicates: 6.0.1(postcss@8.4.33)
+      postcss-discard-empty: 6.0.1(postcss@8.4.33)
+      postcss-discard-overridden: 6.0.1(postcss@8.4.33)
+      postcss-merge-longhand: 6.0.2(postcss@8.4.33)
+      postcss-merge-rules: 6.0.3(postcss@8.4.33)
+      postcss-minify-font-values: 6.0.1(postcss@8.4.33)
+      postcss-minify-gradients: 6.0.1(postcss@8.4.33)
+      postcss-minify-params: 6.0.2(postcss@8.4.33)
+      postcss-minify-selectors: 6.0.2(postcss@8.4.33)
+      postcss-normalize-charset: 6.0.1(postcss@8.4.33)
+      postcss-normalize-display-values: 6.0.1(postcss@8.4.33)
+      postcss-normalize-positions: 6.0.1(postcss@8.4.33)
+      postcss-normalize-repeat-style: 6.0.1(postcss@8.4.33)
+      postcss-normalize-string: 6.0.1(postcss@8.4.33)
+      postcss-normalize-timing-functions: 6.0.1(postcss@8.4.33)
+      postcss-normalize-unicode: 6.0.2(postcss@8.4.33)
+      postcss-normalize-url: 6.0.1(postcss@8.4.33)
+      postcss-normalize-whitespace: 6.0.1(postcss@8.4.33)
+      postcss-ordered-values: 6.0.1(postcss@8.4.33)
+      postcss-reduce-initial: 6.0.2(postcss@8.4.33)
+      postcss-reduce-transforms: 6.0.1(postcss@8.4.33)
+      postcss-svgo: 6.0.2(postcss@8.4.33)
+      postcss-unique-selectors: 6.0.2(postcss@8.4.33)
     dev: true
 
-  /cssnano-utils@4.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==}
+  /cssnano-utils@4.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-6qQuYDqsGoiXssZ3zct6dcMxiqfT6epy7x4R0TQJadd4LWO3sPR6JH6ZByOvVLoZ6EdwPGgd7+DR1EmX3tiXQQ==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /cssnano@6.0.1(postcss@8.4.33):
-    resolution: {integrity: sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==}
+  /cssnano@6.0.3(postcss@8.4.33):
+    resolution: {integrity: sha512-MRq4CIj8pnyZpcI2qs6wswoYoDD1t0aL28n+41c1Ukcpm56m1h6mCexIHBGjfZfnTqtGSSCP4/fB1ovxgjBOiw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      cssnano-preset-default: 6.0.1(postcss@8.4.33)
-      lilconfig: 2.1.0
+      cssnano-preset-default: 6.0.3(postcss@8.4.33)
+      lilconfig: 3.0.0
       postcss: 8.4.33
     dev: true
 
@@ -6789,7 +5898,7 @@ packages:
     resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
     engines: {node: '>=12'}
     dependencies:
-      delaunator: 5.0.0
+      delaunator: 5.0.1
     dev: false
 
   /d3-dispatch@3.0.1:
@@ -7052,7 +6161,7 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.9
     dev: false
 
   /de-indent@1.0.2:
@@ -7136,31 +6245,26 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /default-browser-id@3.0.0:
-    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
-    engines: {node: '>=12'}
-    dependencies:
-      bplist-parser: 0.2.0
-      untildify: 4.0.0
+  /default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
     dev: true
 
-  /default-browser@4.0.0:
-    resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
-    engines: {node: '>=14.16'}
+  /default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
     dependencies:
-      bundle-name: 3.0.0
-      default-browser-id: 3.0.0
-      execa: 7.2.0
-      titleize: 3.0.0
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
     dev: true
 
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
+  /define-data-property@1.1.1:
+    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.2
       gopd: 1.0.1
-      has-property-descriptors: 1.0.0
+      has-property-descriptors: 1.0.1
     dev: false
 
   /define-lazy-prop@2.0.0:
@@ -7177,22 +6281,16 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
+      define-data-property: 1.1.1
+      has-property-descriptors: 1.0.1
       object-keys: 1.1.1
     dev: false
 
-  /defu@6.1.2:
-    resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
-
-  /defu@6.1.3:
-    resolution: {integrity: sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==}
-
   /defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  /delaunator@5.0.0:
-    resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
     dependencies:
       robust-predicates: 3.0.2
     dev: false
@@ -7240,13 +6338,13 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     dependencies:
-      '@babel/core': 7.23.0
-      '@babel/preset-typescript': 7.23.2(@babel/core@7.23.0)
+      '@babel/core': 7.23.9
+      '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9)
       '@vue/compiler-dom': 3.4.15
-      '@vue/compiler-sfc': 3.3.7
+      '@vue/compiler-sfc': 3.4.15
       '@vuedx/compiler-sfc': 0.7.1
       '@vuedx/template-ast-types': 0.7.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       prettier: 2.8.8
       typescript: 5.3.3
     transitivePeerDependencies:
@@ -7278,6 +6376,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       path-type: 4.0.0
+    dev: true
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
@@ -7344,8 +6443,8 @@ packages:
       type-fest: 3.13.1
     dev: true
 
-  /dotenv@16.3.1:
-    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
+  /dotenv@16.4.1:
+    resolution: {integrity: sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==}
     engines: {node: '>=12'}
 
   /duplexer3@0.1.5:
@@ -7362,7 +6461,7 @@ packages:
       end-of-stream: 1.4.4
       inherits: 2.0.4
       readable-stream: 2.3.8
-      stream-shift: 1.0.1
+      stream-shift: 1.0.3
     dev: false
 
   /earcut@2.2.4:
@@ -7381,15 +6480,11 @@ packages:
     dev: false
 
   /ee-first@1.1.1:
-    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
-  /electron-to-chromium@1.4.531:
-    resolution: {integrity: sha512-H6gi5E41Rn3/mhKlPaT1aIMg/71hTAqn0gYEllSuw9igNWtvQwu185jiCZoZD29n7Zukgh7GVZ3zGf0XvkhqjQ==}
-
-  /electron-to-chromium@1.4.628:
-    resolution: {integrity: sha512-2k7t5PHvLsufpP6Zwk0nof62yLOsCf032wZx7/q0mv8gwlXjhcxI3lz6f0jBr0GrnWKcm3burXzI3t5IrcdUxw==}
-    dev: true
+  /electron-to-chromium@1.4.656:
+    resolution: {integrity: sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==}
 
   /elkjs@0.8.2:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
@@ -7425,8 +6520,8 @@ packages:
     resolution: {integrity: sha512-MeXnPT1LShfgAu8qXj3CskayV0R6OkHx7w3cPTx+Q5ZWKyShKpIuu7qVQJ5BoFegalE4n6yxqoQaRuGFbK9pYw==}
     dev: false
 
-  /emoji-regex@10.2.1:
-    resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
+  /emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
     dev: false
 
   /emoji-regex@8.0.0:
@@ -7442,7 +6537,6 @@ packages:
 
   /encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
-    requiresBuild: true
     dependencies:
       iconv-lite: 0.6.3
 
@@ -7452,15 +6546,6 @@ packages:
       once: 1.4.0
     dev: false
 
-  /enhanced-resolve@4.5.0:
-    resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      memory-fs: 0.5.0
-      tapable: 1.1.3
-    dev: false
-
   /enhanced-resolve@5.15.0:
     resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
     engines: {node: '>=10.13.0'}
@@ -7491,13 +6576,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: false
 
-  /errno@0.1.8:
-    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
-    hasBin: true
-    dependencies:
-      prr: 1.0.1
-    dev: false
-
   /error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -7547,96 +6625,66 @@ packages:
       '@esbuild/win32-x64': 0.18.20
     dev: true
 
-  /esbuild@0.19.10:
-    resolution: {integrity: sha512-S1Y27QGt/snkNYrRcswgRFqZjaTG5a5xM3EQo97uNBnH505pdzSNe/HLBq1v0RO7iK/ngdbhJB6mDAp0OK+iUA==}
+  /esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.19.10
-      '@esbuild/android-arm': 0.19.10
-      '@esbuild/android-arm64': 0.19.10
-      '@esbuild/android-x64': 0.19.10
-      '@esbuild/darwin-arm64': 0.19.10
-      '@esbuild/darwin-x64': 0.19.10
-      '@esbuild/freebsd-arm64': 0.19.10
-      '@esbuild/freebsd-x64': 0.19.10
-      '@esbuild/linux-arm': 0.19.10
-      '@esbuild/linux-arm64': 0.19.10
-      '@esbuild/linux-ia32': 0.19.10
-      '@esbuild/linux-loong64': 0.19.10
-      '@esbuild/linux-mips64el': 0.19.10
-      '@esbuild/linux-ppc64': 0.19.10
-      '@esbuild/linux-riscv64': 0.19.10
-      '@esbuild/linux-s390x': 0.19.10
-      '@esbuild/linux-x64': 0.19.10
-      '@esbuild/netbsd-x64': 0.19.10
-      '@esbuild/openbsd-x64': 0.19.10
-      '@esbuild/sunos-x64': 0.19.10
-      '@esbuild/win32-arm64': 0.19.10
-      '@esbuild/win32-ia32': 0.19.10
-      '@esbuild/win32-x64': 0.19.10
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
     dev: true
 
-  /esbuild@0.19.11:
-    resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==}
+  /esbuild@0.20.0:
+    resolution: {integrity: sha512-6iwE3Y2RVYCME1jLpBqq7LQWK3MW6vjV2bZy6gt/WrqkY+WE74Spyc0ThAOYpMtITvnjX09CrC6ym7A/m9mebA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.19.11
-      '@esbuild/android-arm': 0.19.11
-      '@esbuild/android-arm64': 0.19.11
-      '@esbuild/android-x64': 0.19.11
-      '@esbuild/darwin-arm64': 0.19.11
-      '@esbuild/darwin-x64': 0.19.11
-      '@esbuild/freebsd-arm64': 0.19.11
-      '@esbuild/freebsd-x64': 0.19.11
-      '@esbuild/linux-arm': 0.19.11
-      '@esbuild/linux-arm64': 0.19.11
-      '@esbuild/linux-ia32': 0.19.11
-      '@esbuild/linux-loong64': 0.19.11
-      '@esbuild/linux-mips64el': 0.19.11
-      '@esbuild/linux-ppc64': 0.19.11
-      '@esbuild/linux-riscv64': 0.19.11
-      '@esbuild/linux-s390x': 0.19.11
-      '@esbuild/linux-x64': 0.19.11
-      '@esbuild/netbsd-x64': 0.19.11
-      '@esbuild/openbsd-x64': 0.19.11
-      '@esbuild/sunos-x64': 0.19.11
-      '@esbuild/win32-arm64': 0.19.11
-      '@esbuild/win32-ia32': 0.19.11
-      '@esbuild/win32-x64': 0.19.11
-    dev: true
-
-  /esbuild@0.19.8:
-    resolution: {integrity: sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.19.8
-      '@esbuild/android-arm64': 0.19.8
-      '@esbuild/android-x64': 0.19.8
-      '@esbuild/darwin-arm64': 0.19.8
-      '@esbuild/darwin-x64': 0.19.8
-      '@esbuild/freebsd-arm64': 0.19.8
-      '@esbuild/freebsd-x64': 0.19.8
-      '@esbuild/linux-arm': 0.19.8
-      '@esbuild/linux-arm64': 0.19.8
-      '@esbuild/linux-ia32': 0.19.8
-      '@esbuild/linux-loong64': 0.19.8
-      '@esbuild/linux-mips64el': 0.19.8
-      '@esbuild/linux-ppc64': 0.19.8
-      '@esbuild/linux-riscv64': 0.19.8
-      '@esbuild/linux-s390x': 0.19.8
-      '@esbuild/linux-x64': 0.19.8
-      '@esbuild/netbsd-x64': 0.19.8
-      '@esbuild/openbsd-x64': 0.19.8
-      '@esbuild/sunos-x64': 0.19.8
-      '@esbuild/win32-arm64': 0.19.8
-      '@esbuild/win32-ia32': 0.19.8
-      '@esbuild/win32-x64': 0.19.8
+      '@esbuild/aix-ppc64': 0.20.0
+      '@esbuild/android-arm': 0.20.0
+      '@esbuild/android-arm64': 0.20.0
+      '@esbuild/android-x64': 0.20.0
+      '@esbuild/darwin-arm64': 0.20.0
+      '@esbuild/darwin-x64': 0.20.0
+      '@esbuild/freebsd-arm64': 0.20.0
+      '@esbuild/freebsd-x64': 0.20.0
+      '@esbuild/linux-arm': 0.20.0
+      '@esbuild/linux-arm64': 0.20.0
+      '@esbuild/linux-ia32': 0.20.0
+      '@esbuild/linux-loong64': 0.20.0
+      '@esbuild/linux-mips64el': 0.20.0
+      '@esbuild/linux-ppc64': 0.20.0
+      '@esbuild/linux-riscv64': 0.20.0
+      '@esbuild/linux-s390x': 0.20.0
+      '@esbuild/linux-x64': 0.20.0
+      '@esbuild/netbsd-x64': 0.20.0
+      '@esbuild/openbsd-x64': 0.20.0
+      '@esbuild/sunos-x64': 0.20.0
+      '@esbuild/win32-arm64': 0.20.0
+      '@esbuild/win32-ia32': 0.20.0
+      '@esbuild/win32-x64': 0.20.0
     dev: true
 
   /escalade@3.1.1:
@@ -7659,6 +6707,25 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  /eslint-compat-utils@0.1.2(eslint@8.56.0):
+    resolution: {integrity: sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.56.0
+    dev: true
+
+  /eslint-compat-utils@0.4.1(eslint@8.56.0):
+    resolution: {integrity: sha512-5N7ZaJG5pZxUeNNJfUchurLVrunD1xJvyg5kYOIVF8kg1f3ajTikmAu/5fZ9w100omNPOoMjngRszh/Q/uFGMg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.56.0
+      semver: 7.5.4
+    dev: true
+
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
@@ -7669,7 +6736,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.3)(eslint-import-resolver-node@0.3.9)(eslint@8.53.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -7690,44 +6757,45 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
       debug: 3.2.7
-      eslint: 8.53.0
+      eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-antfu@0.43.1(eslint@8.53.0)(typescript@5.2.2):
+  /eslint-plugin-antfu@0.43.1(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-Nak+Qpy5qEK10dCXtVaabPTUmLBPLhsVKAFXAtxYGYRlY/SuuZUBhW2YIsLsixNROiICGuov8sN+eNOCC7Wb5g==}
     dependencies:
-      '@typescript-eslint/utils': 6.7.3(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3)
     transitivePeerDependencies:
       - eslint
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-es-x@7.2.0(eslint@8.53.0):
-    resolution: {integrity: sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==}
+  /eslint-plugin-es-x@7.5.0(eslint@8.56.0):
+    resolution: {integrity: sha512-ODswlDSO0HJDzXU0XvgZ3lF3lS3XAZEossh15Q2UHjwrJggWeBoKqqEsLTZLXl+dh5eOAozG0zRcYtuE35oTuQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=8'
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@eslint-community/regexpp': 4.9.0
-      eslint: 8.53.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint-community/regexpp': 4.10.0
+      eslint: 8.56.0
+      eslint-compat-utils: 0.1.2(eslint@8.56.0)
     dev: true
 
-  /eslint-plugin-eslint-comments@3.2.0(eslint@8.53.0):
+  /eslint-plugin-eslint-comments@3.2.0(eslint@8.56.0):
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 8.53.0
-      ignore: 5.2.4
+      eslint: 8.56.0
+      ignore: 5.3.1
     dev: true
 
   /eslint-plugin-html@7.1.0:
@@ -7736,7 +6804,7 @@ packages:
       htmlparser2: 8.0.2
     dev: true
 
-  /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.7.3)(eslint@8.53.0):
+  /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.20.0)(eslint@8.56.0):
     resolution: {integrity: sha512-a4oVt0j3ixNhGhvV4XF6NS7OWRFK2rrJ0Q5C4S2dSRb8FxZi31J0uUd5WJLL58wnVJ/OiQ1BxiXnFA4dWQO1Cg==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -7744,9 +6812,9 @@ packages:
     dependencies:
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.53.0
+      eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.3)(eslint-import-resolver-node@0.3.9)(eslint@8.53.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
       get-tsconfig: 4.7.2
       is-glob: 4.0.3
       minimatch: 3.1.2
@@ -7759,8 +6827,8 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.4.0(@typescript-eslint/eslint-plugin@6.7.3)(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-ukVeKmMPAUA5SWjHenvyyXnirKfHKMdOsTZdn5tZx5EW05HGVQwBohigjFZGGj3zuv1cV6hc82FvWv6LdIbkgg==}
+  /eslint-plugin-jest@27.6.3(@typescript-eslint/eslint-plugin@6.20.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-+YsJFVH6R+tOiO3gCJon5oqn4KWc+mDq2leudk8mrp8RFubLOo9CVyi3cib4L7XMpxExmkmBZQTPDYVBzgpgOA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0
@@ -7772,70 +6840,76 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc@46.8.2(eslint@8.53.0):
-    resolution: {integrity: sha512-5TSnD018f3tUJNne4s4gDWQflbsgOycIKEUBoCLn6XtBMgNHxQFmV8vVxUtiPxAQq8lrX85OaSG/2gnctxw9uQ==}
+  /eslint-plugin-jsdoc@46.10.1(eslint@8.56.0):
+    resolution: {integrity: sha512-x8wxIpv00Y50NyweDUpa+58ffgSAI5sqe+zcZh33xphD0AVh+1kqr1ombaTRb7Fhpove1zfUuujlX9DWWBP5ag==}
     engines: {node: '>=16'}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
     dependencies:
-      '@es-joy/jsdoccomment': 0.40.1
+      '@es-joy/jsdoccomment': 0.41.0
       are-docs-informative: 0.0.2
-      comment-parser: 1.4.0
+      comment-parser: 1.4.1
       debug: 4.3.4
       escape-string-regexp: 4.0.0
-      eslint: 8.53.0
+      eslint: 8.56.0
       esquery: 1.5.0
       is-builtin-module: 3.2.1
       semver: 7.5.4
-      spdx-expression-parse: 3.0.1
+      spdx-expression-parse: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-jsonc@2.9.0(eslint@8.53.0):
-    resolution: {integrity: sha512-RK+LeONVukbLwT2+t7/OY54NJRccTXh/QbnXzPuTLpFMVZhPuq1C9E07+qWenGx7rrQl0kAalAWl7EmB+RjpGA==}
+  /eslint-plugin-jsonc@2.13.0(eslint@8.56.0):
+    resolution: {integrity: sha512-2wWdJfpO/UbZzPDABuUVvlUQjfMJa2p2iQfYt/oWxOMpXCcjuiMUSaA02gtY/Dbu82vpaSqc+O7Xq6ECHwtIxA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      eslint: 8.53.0
-      jsonc-eslint-parser: 2.3.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      eslint: 8.56.0
+      eslint-compat-utils: 0.4.1(eslint@8.56.0)
+      espree: 9.6.1
+      graphemer: 1.4.0
+      jsonc-eslint-parser: 2.4.0
       natural-compare: 1.4.0
+      synckit: 0.6.2
     dev: true
 
-  /eslint-plugin-markdown@3.0.1(eslint@8.53.0):
+  /eslint-plugin-markdown@3.0.1(eslint@8.56.0):
     resolution: {integrity: sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.53.0
+      eslint: 8.56.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-n@16.1.0(eslint@8.53.0):
-    resolution: {integrity: sha512-3wv/TooBst0N4ND+pnvffHuz9gNPmk/NkLwAxOt2JykTl/hcuECe6yhTtLJcZjIxtZwN+GX92ACp/QTLpHA3Hg==}
+  /eslint-plugin-n@16.6.2(eslint@8.56.0):
+    resolution: {integrity: sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
       builtins: 5.0.1
-      eslint: 8.53.0
-      eslint-plugin-es-x: 7.2.0(eslint@8.53.0)
+      eslint: 8.56.0
+      eslint-plugin-es-x: 7.5.0(eslint@8.56.0)
       get-tsconfig: 4.7.2
-      ignore: 5.2.4
+      globals: 13.24.0
+      ignore: 5.3.1
+      is-builtin-module: 3.2.1
       is-core-module: 2.13.1
       minimatch: 3.1.2
       resolve: 1.22.8
@@ -7847,26 +6921,26 @@ packages:
     engines: {node: '>=5.0.0'}
     dev: true
 
-  /eslint-plugin-promise@6.1.1(eslint@8.53.0):
+  /eslint-plugin-promise@6.1.1(eslint@8.56.0):
     resolution: {integrity: sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.53.0
+      eslint: 8.56.0
     dev: true
 
-  /eslint-plugin-unicorn@48.0.1(eslint@8.53.0):
+  /eslint-plugin-unicorn@48.0.1(eslint@8.56.0):
     resolution: {integrity: sha512-FW+4r20myG/DqFcCSzoumaddKBicIPeFnTrifon2mWIzlfyvzwyqZjqVP7m4Cqr/ZYisS2aiLghkUWaPg6vtCw==}
     engines: {node: '>=16'}
     peerDependencies:
       eslint: '>=8.44.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.22.20
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      ci-info: 3.8.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      ci-info: 3.9.0
       clean-regexp: 1.0.0
-      eslint: 8.53.0
+      eslint: 8.56.0
       esquery: 1.5.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -7880,7 +6954,7 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.7.3)(eslint@8.53.0):
+  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.20.0)(eslint@8.56.0):
     resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -7890,31 +6964,13 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.53.0)(typescript@5.2.2)
-      eslint: 8.53.0
+      '@typescript-eslint/eslint-plugin': 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
       eslint-rule-composer: 0.3.0
     dev: true
 
-  /eslint-plugin-vue@9.17.0(eslint@8.53.0):
-    resolution: {integrity: sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      eslint: 8.53.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.4
-      vue-eslint-parser: 9.3.1(eslint@8.53.0)
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-plugin-vue@9.17.0(eslint@8.56.0):
-    resolution: {integrity: sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==}
+  /eslint-plugin-vue@9.21.1(eslint@8.56.0):
+    resolution: {integrity: sha512-XVtI7z39yOVBFJyi8Ljbn7kY9yHzznKXL02qQYn+ta63Iy4A9JFBw6o4OSB9hyD2++tVT+su9kQqetUyCCwhjw==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
@@ -7923,22 +6979,23 @@ packages:
       eslint: 8.56.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
       semver: 7.5.4
-      vue-eslint-parser: 9.3.1(eslint@8.56.0)
+      vue-eslint-parser: 9.4.2(eslint@8.56.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-yml@1.9.0(eslint@8.53.0):
-    resolution: {integrity: sha512-ayuC57WyVQ5+QZ02y62GiB//5+zsiyzUGxUX/mrhLni+jfsKA4KoITjkbR65iUdjjhWpyTJHPcAIFLKQIOwgsw==}
+  /eslint-plugin-yml@1.12.2(eslint@8.56.0):
+    resolution: {integrity: sha512-hvS9p08FhPT7i/ynwl7/Wt7ke7Rf4P2D6fT8lZlL43peZDTsHtH2A0SIFQ7Kt7+mJ6if6P+FX3iJhMkdnxQwpg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.53.0
+      eslint: 8.56.0
+      eslint-compat-utils: 0.4.1(eslint@8.56.0)
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.2
@@ -7972,53 +7029,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.53.0:
-    resolution: {integrity: sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@eslint-community/regexpp': 4.9.0
-      '@eslint/eslintrc': 2.1.3
-      '@eslint/js': 8.53.0
-      '@humanwhocodes/config-array': 0.11.13
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.22.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint@8.56.0:
     resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -8028,7 +7038,7 @@ packages:
       '@eslint-community/regexpp': 4.10.0
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.56.0
-      '@humanwhocodes/config-array': 0.11.13
+      '@humanwhocodes/config-array': 0.11.14
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
       '@ungap/structured-clone': 1.2.0
@@ -8049,7 +7059,7 @@ packages:
       glob-parent: 6.0.2
       globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -8070,8 +7080,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -8111,7 +7121,7 @@ packages:
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
-      '@types/estree': 1.0.2
+      '@types/estree': 1.0.5
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -8164,7 +7174,7 @@ packages:
       human-signals: 4.3.1
       is-stream: 3.0.0
       merge-stream: 2.0.0
-      npm-run-path: 5.1.0
+      npm-run-path: 5.2.0
       onetime: 6.0.0
       signal-exit: 3.0.7
       strip-final-newline: 3.0.0
@@ -8179,7 +7189,7 @@ packages:
       human-signals: 5.0.0
       is-stream: 3.0.0
       merge-stream: 2.0.0
-      npm-run-path: 5.1.0
+      npm-run-path: 5.2.0
       onetime: 6.0.0
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
@@ -8215,11 +7225,16 @@ packages:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
     dependencies:
       enhanced-resolve: 5.15.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       ufo: 1.3.2
     dev: true
 
+  /fake-indexeddb@5.0.2:
+    resolution: {integrity: sha512-cB507r5T3D55DfclY01GLkninZLfU7HXV/mhVRTnTRm5k2u+fY7Fof2dBkr80p5t7G7dlA/G5dI87QiMdPpMCQ==}
+    engines: {node: '>=18'}
+    dev: true
+
   /fast-copy@3.0.1:
     resolution: {integrity: sha512-Knr7NOtK3HWRYGtHoJrjkaWepqT8thIVGAwt0p0aUs1zqkAzXZV4vo9fFNwyb5fcqK1GKYFYxldQdIDVKhUAfA==}
     dev: false
@@ -8236,16 +7251,6 @@ packages:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
     dev: true
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -8264,8 +7269,8 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+  /fastq@1.17.0:
+    resolution: {integrity: sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==}
     dependencies:
       reusify: 1.0.4
 
@@ -8274,7 +7279,7 @@ packages:
     engines: {node: ^12.20 || >= 14.13}
     dependencies:
       node-domexception: 1.0.0
-      web-streams-polyfill: 3.2.1
+      web-streams-polyfill: 3.3.2
     dev: false
 
   /fflate@0.8.1:
@@ -8292,7 +7297,7 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flat-cache: 3.1.0
+      flat-cache: 3.2.0
     dev: true
 
   /file-name@0.1.0:
@@ -8350,12 +7355,12 @@ packages:
       path-exists: 4.0.0
     dev: true
 
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       flatted: 3.2.9
-      keyv: 4.5.3
+      keyv: 4.5.4
       rimraf: 3.0.2
     dev: true
 
@@ -8434,22 +7439,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /fs-extra@11.1.1:
-    resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
-    engines: {node: '>=14.14'}
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.0
-
   /fs-extra@11.2.0:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
-      universalify: 2.0.0
-    dev: true
+      universalify: 2.0.1
 
   /fs-extra@3.0.1:
     resolution: {integrity: sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==}
@@ -8469,7 +7465,7 @@ packages:
     resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 7.0.3
+      minipass: 7.0.4
     dev: true
 
   /fs-write-stream-atomic@1.0.10:
@@ -8509,20 +7505,6 @@ packages:
       wide-align: 1.1.5
     dev: true
 
-  /gauge@4.0.4:
-    resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    dependencies:
-      aproba: 2.0.0
-      color-support: 1.1.3
-      console-control-strings: 1.1.0
-      has-unicode: 2.0.1
-      signal-exit: 3.0.7
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wide-align: 1.1.5
-    dev: true
-
   /genfun@4.0.1:
     resolution: {integrity: sha512-48yv1eDS5Qrz6cbSDBBik0u7jCgC/eA9eZrl9MIN1LfKzFTuGt6EHgr31YM8yT9cjb5BplXb4Iz3VtOYmgt8Jg==}
     dev: false
@@ -8549,17 +7531,17 @@ packages:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
+  /get-intrinsic@1.2.2:
+    resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
     dependencies:
       function-bind: 1.1.2
-      has: 1.0.3
       has-proto: 1.0.1
       has-symbols: 1.0.3
+      hasown: 2.0.0
     dev: false
 
-  /get-port-please@3.1.1:
-    resolution: {integrity: sha512-3UBAyM3u4ZBVYDsxOQfJDxEa6XTbpBDrOjp4mf7ExFRt5BKs/QywQQiJsh2B+hxcZLSapWqCRvElUe8DnKcFHA==}
+  /get-port-please@3.1.2:
+    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
     dev: true
 
   /get-stream@3.0.0:
@@ -8581,34 +7563,6 @@ packages:
       resolve-pkg-maps: 1.0.0
     dev: true
 
-  /giget@1.1.2:
-    resolution: {integrity: sha512-HsLoS07HiQ5oqvObOI+Qb2tyZH4Gj5nYGfF9qQcZNrPw+uEFhdXtgJr01aO2pWadGHucajYDLxxbtQkm97ON2A==}
-    hasBin: true
-    dependencies:
-      colorette: 2.0.20
-      defu: 6.1.2
-      https-proxy-agent: 5.0.1
-      mri: 1.2.0
-      node-fetch-native: 1.4.0
-      pathe: 1.1.2
-      tar: 6.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  /giget@1.1.3:
-    resolution: {integrity: sha512-zHuCeqtfgqgDwvXlR84UNgnJDuUHQcNI5OqWqFxxuk2BshuKbYhJWdxBsEo4PvKqoGh23lUAIvBNpChMLv7/9Q==}
-    hasBin: true
-    dependencies:
-      colorette: 2.0.20
-      defu: 6.1.3
-      https-proxy-agent: 7.0.2
-      mri: 1.2.0
-      node-fetch-native: 1.4.1
-      pathe: 1.1.2
-      tar: 6.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   /giget@1.2.1:
     resolution: {integrity: sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==}
     hasBin: true
@@ -8617,11 +7571,10 @@ packages:
       consola: 3.2.3
       defu: 6.1.4
       node-fetch-native: 1.6.1
-      nypm: 0.3.4
+      nypm: 0.3.6
       ohash: 1.1.3
       pathe: 1.1.2
       tar: 6.2.0
-    dev: true
 
   /git-branch@1.0.0:
     resolution: {integrity: sha512-ZTzuqw5Df8fyLXQWrX6hK+4FpNCdKzMcERlxENEGO5aKcLmG7MAszhrMhluUKNKmOS/JAGijDMQDXDCDw1mE/A==}
@@ -8706,21 +7659,11 @@ packages:
     hasBin: true
     dependencies:
       foreground-child: 3.1.1
-      jackspeak: 2.3.5
+      jackspeak: 2.3.6
       minimatch: 9.0.3
-      minipass: 7.0.3
+      minipass: 7.0.4
       path-scurry: 1.10.1
 
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -8786,13 +7729,6 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
-  /globals@13.22.0:
-    resolution: {integrity: sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: true
-
   /globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -8807,7 +7743,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.2.4
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -8818,9 +7754,10 @@ packages:
     dependencies:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.2.4
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 4.0.0
+    dev: true
 
   /globby@14.0.0:
     resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==}
@@ -8828,7 +7765,7 @@ packages:
     dependencies:
       '@sindresorhus/merge-streams': 1.0.0
       fast-glob: 3.3.2
-      ignore: 5.3.0
+      ignore: 5.3.1
       path-type: 5.0.0
       slash: 5.1.0
       unicorn-magic: 0.1.0
@@ -8840,7 +7777,7 @@ packages:
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.2
     dev: false
 
   /got@6.7.1:
@@ -8848,7 +7785,7 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       '@types/keyv': 3.1.4
-      '@types/responselike': 1.0.2
+      '@types/responselike': 1.0.3
       create-error-class: 3.0.2
       duplexer3: 0.1.5
       get-stream: 3.0.0
@@ -8876,30 +7813,18 @@ packages:
       duplexer: 0.1.2
     dev: true
 
-  /h3@1.10.0:
-    resolution: {integrity: sha512-Tw1kcIC+AeimwRmviiObaD5EB430Yt+lTgOxLJxNr96Vd/fGRu04EF7aKfOAcpwKCI+U2JlbxOLhycD86p3Ciw==}
+  /h3@1.10.1:
+    resolution: {integrity: sha512-UBAUp47hmm4BB5/njB4LrEa9gpuvZj4/Qf/ynSMzO6Ku2RXaouxEfiG2E2IFnv6fxbhAkzjasDxmo6DFdEeXRg==}
     dependencies:
       cookie-es: 1.0.0
       defu: 6.1.4
       destr: 2.0.2
       iron-webcrypto: 1.0.0
+      ohash: 1.1.3
       radix3: 1.1.0
       ufo: 1.3.2
       uncrypto: 0.1.3
-      unenv: 1.8.0
-    dev: true
-
-  /h3@1.9.0:
-    resolution: {integrity: sha512-+F3ZqrNV/CFXXfZ2lXBINHi+rM4Xw3CDC5z2CDK3NMPocjonKipGLLDSkrqY9DOrioZNPTIdDMWfQKm//3X2DA==}
-    dependencies:
-      cookie-es: 1.0.0
-      defu: 6.1.3
-      destr: 2.0.2
-      iron-webcrypto: 1.0.0
-      radix3: 1.1.0
-      ufo: 1.3.2
-      uncrypto: 0.1.3
-      unenv: 1.8.0
+      unenv: 1.9.0
     dev: true
 
   /hard-rejection@2.1.0:
@@ -8916,10 +7841,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+  /has-property-descriptors@1.0.1:
+    resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
     dependencies:
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.2
     dev: false
 
   /has-proto@1.0.1:
@@ -8932,8 +7857,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
@@ -8943,13 +7868,6 @@ packages:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
     dev: true
 
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.2
-    dev: false
-
   /hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
 
@@ -8988,7 +7906,7 @@ packages:
     resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      lru-cache: 10.1.0
+      lru-cache: 10.2.0
     dev: true
 
   /html-tags@3.3.1:
@@ -9034,17 +7952,6 @@ packages:
       - supports-color
     dev: false
 
-  /http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
-    dependencies:
-      '@tootallnate/once': 2.0.0
-      agent-base: 6.0.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /http-proxy-agent@7.0.0:
     resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
     engines: {node: '>= 14'}
@@ -9078,6 +7985,7 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /https-proxy-agent@7.0.2:
     resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
@@ -9110,6 +8018,7 @@ packages:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
     dependencies:
       ms: 2.1.3
+    dev: false
 
   /humps@2.0.1:
     resolution: {integrity: sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==}
@@ -9125,7 +8034,6 @@ packages:
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
-    requiresBuild: true
     dependencies:
       safer-buffer: 2.1.2
 
@@ -9137,19 +8045,15 @@ packages:
     resolution: {integrity: sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==}
     dev: false
 
-  /ignore-walk@6.0.3:
-    resolution: {integrity: sha512-C7FfFoTA+bI10qfeydT8aZbvr91vAEU+2W5BZUlzPec47oNb07SsOfwYrtxuvOYdUApPP/Qlh4DtAO51Ekk2QA==}
+  /ignore-walk@6.0.4:
+    resolution: {integrity: sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       minimatch: 9.0.3
     dev: true
 
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-
-  /ignore@5.3.0:
-    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
   /image-meta@0.2.0:
@@ -9274,8 +8178,8 @@ packages:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
+      call-bind: 1.0.5
+      has-tostringtag: 1.0.2
     dev: false
 
   /is-arrayish@0.2.1:
@@ -9359,7 +8263,7 @@ packages:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: false
 
   /is-glob@4.0.3:
@@ -9413,7 +8317,7 @@ packages:
     resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
     dev: false
 
@@ -9475,7 +8379,7 @@ packages:
   /is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
-      '@types/estree': 1.0.2
+      '@types/estree': 1.0.5
     dev: true
 
   /is-retry-allowed@1.2.0:
@@ -9510,11 +8414,11 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
+  /is-typed-array@1.1.13:
+    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      which-typed-array: 1.1.11
+      which-typed-array: 1.1.14
     dev: false
 
   /is-unicode-supported@1.3.0:
@@ -9539,6 +8443,20 @@ packages:
       is-docker: 2.2.1
     dev: true
 
+  /is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+    dependencies:
+      is-inside-container: 1.0.0
+    dev: true
+
+  /is64bit@2.0.0:
+    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
+    engines: {node: '>=18'}
+    dependencies:
+      system-architecture: 0.1.0
+    dev: true
+
   /isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -9559,8 +8477,8 @@ packages:
       textextensions: 2.6.0
     dev: false
 
-  /jackspeak@2.3.5:
-    resolution: {integrity: sha512-Ratx+B8WeXLAtRJn26hrhY8S1+Jz6pxPMrkrdkgb/NstTNiqMhX0/oFVu5wX+g5n6JlEu2LPsDJmY8nRP4+alw==}
+  /jackspeak@2.3.6:
+    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
     engines: {node: '>=14'}
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -9579,6 +8497,10 @@ packages:
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  /js-tokens@8.0.2:
+    resolution: {integrity: sha512-Olnt+V7xYdvGze9YTbGFZIfQXuGV4R3nQwwl8BrtgaPE/wq8UFpUHWuTNc05saowhSr1ZO6tx+V6RjE9D5YQog==}
+    dev: true
+
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -9617,8 +8539,8 @@ packages:
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  /json-parse-even-better-errors@3.0.0:
-    resolution: {integrity: sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==}
+  /json-parse-even-better-errors@3.0.1:
+    resolution: {integrity: sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
@@ -9639,18 +8561,18 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  /jsonc-eslint-parser@2.3.0:
-    resolution: {integrity: sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==}
+  /jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.11.3
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       semver: 7.5.4
     dev: true
 
-  /jsonc-parser@3.2.0:
-    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+  /jsonc-parser@3.2.1:
+    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
 
   /jsonfile@3.0.1:
     resolution: {integrity: sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==}
@@ -9661,7 +8583,7 @@ packages:
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
-      universalify: 2.0.0
+      universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
 
@@ -9674,8 +8596,8 @@ packages:
     resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==}
     dev: false
 
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
     dev: true
@@ -9742,6 +8664,10 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
+  /lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+    engines: {node: '>=14'}
+
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -9765,26 +8691,27 @@ packages:
       - supports-color
     dev: true
 
-  /listhen@1.5.5:
-    resolution: {integrity: sha512-LXe8Xlyh3gnxdv4tSjTjscD1vpr/2PRpzq8YIaMJgyKzRG8wdISlWVWnGThJfHnlJ6hmLt2wq1yeeix0TEbuoA==}
+  /listhen@1.6.0:
+    resolution: {integrity: sha512-z0RcEXVX5oTpY1bO02SKoTU/kmZSrFSngNNzHRM6KICR17PTq7ANush6AE6ztGJwJD4RLpBrVHd9GnV51J7s3w==}
     hasBin: true
     dependencies:
-      '@parcel/watcher': 2.3.0
-      '@parcel/watcher-wasm': 2.3.0
+      '@parcel/watcher': 2.4.0
+      '@parcel/watcher-wasm': 2.4.0
       citty: 0.1.5
-      clipboardy: 3.0.0
+      clipboardy: 4.0.0
       consola: 3.2.3
+      crossws: 0.1.1
       defu: 6.1.4
-      get-port-please: 3.1.1
-      h3: 1.10.0
+      get-port-please: 3.1.2
+      h3: 1.10.1
       http-shutdown: 1.2.2
       jiti: 1.21.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       node-forge: 1.3.1
       pathe: 1.1.2
       std-env: 3.7.0
       ufo: 1.3.2
-      untun: 0.1.2
+      untun: 0.1.3
       uqr: 0.1.2
     dev: true
 
@@ -9801,7 +8728,7 @@ packages:
       colorette: 2.0.20
       eventemitter3: 5.0.1
       log-update: 5.0.1
-      rfdc: 1.3.0
+      rfdc: 1.3.1
       wrap-ansi: 8.1.0
     dev: true
 
@@ -9813,12 +8740,13 @@ packages:
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
+    dev: true
 
   /local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
     dependencies:
-      mlly: 1.4.2
+      mlly: 1.5.0
       pkg-types: 1.0.3
 
   /locate-path@5.0.0:
@@ -9846,10 +8774,6 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
 
-  /lodash.debounce@4.0.8:
-    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
-    dev: true
-
   /lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
     dev: true
@@ -9882,10 +8806,6 @@ packages:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
     dev: true
 
-  /lodash.pick@4.4.0:
-    resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
-    dev: true
-
   /lodash.snakecase@4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
     dev: true
@@ -9946,8 +8866,8 @@ packages:
       wrap-ansi: 8.1.0
     dev: true
 
-  /loupe@2.3.6:
-    resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
       get-func-name: 2.0.2
     dev: true
@@ -9957,8 +8877,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /lru-cache@10.1.0:
-    resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
+  /lru-cache@10.2.0:
+    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
 
   /lru-cache@4.1.5:
@@ -9979,11 +8899,6 @@ packages:
     dependencies:
       yallist: 4.0.0
 
-  /lru-cache@7.18.3:
-    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
-    engines: {node: '>=12'}
-    dev: true
-
   /lucide-vue-next@0.276.0(vue@3.4.15):
     resolution: {integrity: sha512-yQmIaTbVjG2TMwFQr98Biva99I+eDcMh0wPepJsDajk2d2lio9VGBsKhIUtAUPYwqnsvVg2+dSYsyvX21BJ5yw==}
     peerDependencies:
@@ -10001,26 +8916,20 @@ packages:
     resolution: {integrity: sha512-0shqecEPgdFpnI3AP90epXyxZy9g6CRZ+SZ7BcqFwYmtFEnZ1jpevcV5HoyVnlDS9gCnc1UIg3Rsvp3Ci7r8OA==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.6
     dev: true
 
-  /magic-string@0.30.3:
-    resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==}
+  /magic-string@0.30.6:
+    resolution: {integrity: sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /magic-string@0.30.5:
-    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
-    engines: {node: '>=12'}
+  /magicast@0.3.3:
+    resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-
-  /magicast@0.3.2:
-    resolution: {integrity: sha512-Fjwkl6a0syt9TFN0JSYpOybxiMCkYNEeOTnOTNRbjphirLakznZXAqrXgj/7GG3D1dvETONNwrBfinvAbpunDg==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@babel/types': 7.23.6
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
       source-map-js: 1.0.2
     dev: true
 
@@ -10041,38 +8950,15 @@ packages:
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
-  /make-fetch-happen@11.1.1:
-    resolution: {integrity: sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      agentkeepalive: 4.5.0
-      cacache: 17.1.4
-      http-cache-semantics: 4.1.1
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-lambda: 1.0.1
-      lru-cache: 7.18.3
-      minipass: 5.0.0
-      minipass-fetch: 3.0.4
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      negotiator: 0.6.3
-      promise-retry: 2.0.1
-      socks-proxy-agent: 7.0.0
-      ssri: 10.0.5
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /make-fetch-happen@13.0.0:
     resolution: {integrity: sha512-7ThobcL8brtGo9CavByQrQi+23aIfgYU++wg4B87AIS8Rb2ZBt/MEaDqzA00Xwv/jUjAjYkLHjVolYuTLKda2A==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@npmcli/agent': 2.1.1
-      cacache: 18.0.0
+      '@npmcli/agent': 2.2.0
+      cacache: 18.0.2
       http-cache-semantics: 4.1.1
       is-lambda: 1.0.1
-      minipass: 7.0.3
+      minipass: 7.0.4
       minipass-fetch: 3.0.4
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
@@ -10123,10 +9009,10 @@ packages:
       '@mapbox/unitbezier': 0.0.1
       '@mapbox/vector-tile': 1.3.1
       '@mapbox/whoots-js': 3.1.0
-      '@types/geojson': 7946.0.11
-      '@types/mapbox__point-geometry': 0.1.2
-      '@types/mapbox__vector-tile': 1.3.1
-      '@types/pbf': 3.0.3
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
       csscolorparser: 1.0.3
       earcut: 2.2.4
       geojson-vt: 3.2.1
@@ -10148,7 +9034,7 @@ packages:
   /mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
-      '@types/mdast': 3.0.13
+      '@types/mdast': 3.0.15
       mdast-util-to-string: 2.0.0
       micromark: 2.11.4
       parse-entities: 2.0.0
@@ -10169,19 +9055,11 @@ packages:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
     dev: true
 
-  /memory-fs@0.5.0:
-    resolution: {integrity: sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==}
-    engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
-    dependencies:
-      errno: 0.1.8
-      readable-stream: 2.3.8
-    dev: false
-
   /meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
     dependencies:
-      '@types/minimist': 1.2.3
+      '@types/minimist': 1.2.5
       camelcase-keys: 6.2.2
       decamelize-keys: 1.1.1
       hard-rejection: 2.1.0
@@ -10290,18 +9168,18 @@ packages:
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  /minipass-collect@1.0.2:
-    resolution: {integrity: sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==}
-    engines: {node: '>= 8'}
+  /minipass-collect@2.0.1:
+    resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
+    engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      minipass: 3.3.6
+      minipass: 7.0.4
     dev: true
 
   /minipass-fetch@3.0.4:
     resolution: {integrity: sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 7.0.3
+      minipass: 7.0.4
       minipass-sized: 1.0.3
       minizlib: 2.1.2
     optionalDependencies:
@@ -10346,8 +9224,8 @@ packages:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
 
-  /minipass@7.0.3:
-    resolution: {integrity: sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==}
+  /minipass@7.0.4:
+    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   /minisearch@6.3.0:
@@ -10428,13 +9306,13 @@ packages:
     dependencies:
       autoprefixer: 10.4.17(postcss@8.4.33)
       citty: 0.1.5
-      cssnano: 6.0.1(postcss@8.4.33)
-      defu: 6.1.3
-      esbuild: 0.19.11
-      fs-extra: 11.1.1
+      cssnano: 6.0.3(postcss@8.4.33)
+      defu: 6.1.4
+      esbuild: 0.19.12
+      fs-extra: 11.2.0
       globby: 13.2.2
       jiti: 1.21.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       mri: 1.2.0
       pathe: 1.1.2
       postcss: 8.4.33
@@ -10442,8 +9320,8 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /mlly@1.4.2:
-    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
+  /mlly@1.5.0:
+    resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
     dependencies:
       acorn: 8.11.3
       pathe: 1.1.2
@@ -10465,8 +9343,8 @@ packages:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
-  /mrmime@1.0.1:
-    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
     dev: true
 
@@ -10502,12 +9380,6 @@ packages:
     resolution: {integrity: sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==}
     dev: false
 
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -10519,10 +9391,6 @@ packages:
     hasBin: true
     dev: true
 
-  /napi-wasm@1.1.0:
-    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
-    dev: true
-
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -10542,19 +9410,19 @@ packages:
       xml2js:
         optional: true
     dependencies:
-      '@cloudflare/kv-asset-handler': 0.3.0
-      '@netlify/functions': 2.4.0
-      '@rollup/plugin-alias': 5.1.0(rollup@4.6.1)
-      '@rollup/plugin-commonjs': 25.0.7(rollup@4.6.1)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.6.1)
-      '@rollup/plugin-json': 6.0.1(rollup@4.6.1)
-      '@rollup/plugin-node-resolve': 15.2.3(rollup@4.6.1)
-      '@rollup/plugin-replace': 5.0.5(rollup@4.6.1)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.6.1)
-      '@rollup/plugin-wasm': 6.2.2(rollup@4.6.1)
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@cloudflare/kv-asset-handler': 0.3.1
+      '@netlify/functions': 2.5.1
+      '@rollup/plugin-alias': 5.1.0(rollup@4.9.6)
+      '@rollup/plugin-commonjs': 25.0.7(rollup@4.9.6)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.9.6)
+      '@rollup/plugin-json': 6.1.0(rollup@4.9.6)
+      '@rollup/plugin-node-resolve': 15.2.3(rollup@4.9.6)
+      '@rollup/plugin-replace': 5.0.5(rollup@4.9.6)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.9.6)
+      '@rollup/plugin-wasm': 6.2.2(rollup@4.9.6)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@types/http-proxy': 1.17.14
-      '@vercel/nft': 0.24.3
+      '@vercel/nft': 0.24.4
       archiver: 6.0.1
       c12: 1.6.1
       chalk: 5.3.0
@@ -10565,36 +9433,36 @@ packages:
       defu: 6.1.4
       destr: 2.0.2
       dot-prop: 8.0.2
-      esbuild: 0.19.11
+      esbuild: 0.19.12
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       etag: 1.8.1
       fs-extra: 11.2.0
       globby: 14.0.0
       gzip-size: 7.0.0
-      h3: 1.10.0
+      h3: 1.10.1
       hookable: 5.5.3
       httpxy: 0.1.5
       is-primitive: 3.0.1
       jiti: 1.21.0
       klona: 2.0.6
       knitwork: 1.0.0
-      listhen: 1.5.5
-      magic-string: 0.30.5
+      listhen: 1.6.0
+      magic-string: 0.30.6
       mime: 3.0.0
-      mlly: 1.4.2
+      mlly: 1.5.0
       mri: 1.2.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       ofetch: 1.3.3
       ohash: 1.1.3
-      openapi-typescript: 6.7.1
+      openapi-typescript: 6.7.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       pretty-bytes: 6.1.1
       radix3: 1.1.0
-      rollup: 4.6.1
-      rollup-plugin-visualizer: 5.9.3(rollup@4.6.1)
+      rollup: 4.9.6
+      rollup-plugin-visualizer: 5.12.0(rollup@4.9.6)
       scule: 1.2.0
       semver: 7.5.4
       serve-placeholder: 2.0.1
@@ -10604,7 +9472,7 @@ packages:
       uncrypto: 0.1.3
       unctx: 2.3.1
       unenv: 1.9.0
-      unimport: 3.7.1(rollup@4.6.1)
+      unimport: 3.7.1(rollup@4.9.6)
       unstorage: 1.10.1
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -10623,8 +9491,9 @@ packages:
       - supports-color
     dev: true
 
-  /node-addon-api@7.0.0:
-    resolution: {integrity: sha512-vgbBJTS4m5/KkE16t5Ly0WW9hz46swAstv0hYYwMtbG7AznRhNyfLRe8HZAiWIpcHzoO7HxhLuBQj9rJ/Ho0ZA==}
+  /node-addon-api@7.1.0:
+    resolution: {integrity: sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==}
+    engines: {node: ^16 || ^18 || >= 20}
     dev: true
 
   /node-domexception@1.0.0:
@@ -10632,15 +9501,8 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: false
 
-  /node-fetch-native@1.4.0:
-    resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==}
-
-  /node-fetch-native@1.4.1:
-    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
-
   /node-fetch-native@1.6.1:
     resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
-    dev: true
 
   /node-fetch-npm@2.0.4:
     resolution: {integrity: sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==}
@@ -10678,37 +9540,32 @@ packages:
     engines: {node: '>= 6.13.0'}
     dev: true
 
-  /node-gyp-build@4.7.1:
-    resolution: {integrity: sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==}
+  /node-gyp-build@4.8.0:
+    resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==}
     hasBin: true
     dev: true
 
-  /node-gyp@9.4.0:
-    resolution: {integrity: sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==}
-    engines: {node: ^12.13 || ^14.13 || >=16}
+  /node-gyp@10.0.1:
+    resolution: {integrity: sha512-gg3/bHehQfZivQVfqIyy8wTdSymF9yTyP4CJifK73imyNMU8AIGQE2pUa7dNWfmMeG9cDVF2eehiRMv0LC1iAg==}
+    engines: {node: ^16.14.0 || >=18.0.0}
     hasBin: true
     dependencies:
       env-paths: 2.2.1
       exponential-backoff: 3.1.1
-      glob: 7.2.3
+      glob: 10.3.10
       graceful-fs: 4.2.11
-      make-fetch-happen: 11.1.1
-      nopt: 6.0.0
-      npmlog: 6.0.2
-      rimraf: 3.0.2
+      make-fetch-happen: 13.0.0
+      nopt: 7.2.0
+      proc-log: 3.0.0
       semver: 7.5.4
       tar: 6.2.0
-      which: 2.0.2
+      which: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-    dev: true
 
   /nopt@5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
@@ -10718,14 +9575,6 @@ packages:
       abbrev: 1.1.1
     dev: true
 
-  /nopt@6.0.0:
-    resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      abbrev: 1.1.1
-    dev: true
-
   /nopt@7.2.0:
     resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -10778,8 +9627,8 @@ packages:
       npm-normalize-package-bin: 3.0.1
     dev: true
 
-  /npm-install-checks@6.2.0:
-    resolution: {integrity: sha512-744wat5wAAHsxa4590mWO0tJ8PKxR8ORZsH9wGpQc3nWTzozMAgBN/XyqYw7mg3yqLM8dLwEnwSfKMmXAjF69g==}
+  /npm-install-checks@6.3.0:
+    resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       semver: 7.5.4
@@ -10809,11 +9658,11 @@ packages:
       validate-npm-package-name: 3.0.0
     dev: false
 
-  /npm-packlist@8.0.0:
-    resolution: {integrity: sha512-ErAGFB5kJUciPy1mmx/C2YFbvxoJ0QJ9uwkCZOeR6CqLLISPZBOiFModAbSXnjjlwW5lOhuhXva+fURsSGJqyw==}
+  /npm-packlist@8.0.2:
+    resolution: {integrity: sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      ignore-walk: 6.0.3
+      ignore-walk: 6.0.4
     dev: true
 
   /npm-pick-manifest@1.0.4:
@@ -10827,18 +9676,18 @@ packages:
     resolution: {integrity: sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      npm-install-checks: 6.2.0
+      npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 11.0.1
       semver: 7.5.4
     dev: true
 
-  /npm-registry-fetch@16.0.0:
-    resolution: {integrity: sha512-JFCpAPUpvpwfSydv99u85yhP68rNIxSFmDpNbNnRWKSe3gpjHnWL8v320gATwRzjtgmZ9Jfe37+ZPOLZPwz6BQ==}
+  /npm-registry-fetch@16.1.0:
+    resolution: {integrity: sha512-PQCELXKt8Azvxnt5Y85GseQDJJlglTFM9L9U9gkv2y4e9s0k3GVDdOx3YoB6gm2Do0hlkzC39iCGXby+Wve1Bw==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       make-fetch-happen: 13.0.0
-      minipass: 7.0.3
+      minipass: 7.0.4
       minipass-fetch: 3.0.4
       minipass-json-stream: 1.0.1
       minizlib: 2.1.2
@@ -10862,8 +9711,8 @@ packages:
       path-key: 3.1.1
     dev: true
 
-  /npm-run-path@5.1.0:
-    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+  /npm-run-path@5.2.0:
+    resolution: {integrity: sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       path-key: 4.0.0
@@ -10877,16 +9726,6 @@ packages:
       set-blocking: 2.0.0
     dev: true
 
-  /npmlog@6.0.2:
-    resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    dependencies:
-      are-we-there-yet: 3.0.1
-      console-control-strings: 1.1.0
-      gauge: 4.0.4
-      set-blocking: 2.0.0
-    dev: true
-
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -10901,8 +9740,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /nuxt@3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@4.5.1):
-    resolution: {integrity: sha512-HUAyifmqTs2zcQBGvcby3KNs2pBAk+l7ZbLjD1oCNqQQ+wBuZ1qgLC4Ebu++y4g3o3Y8WAWSvpafbKRLQZziPw==}
+  /nuxt@3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vite@5.0.12):
+    resolution: {integrity: sha512-E9GWyrzTvkoHoJOT847EASEl8KcGDF1twcBgUzDMuNIx+llZ14F+q+XbTjHzYM/o2hqHTer0lLt2RUn5wsBLQQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
     peerDependencies:
@@ -10915,57 +9754,57 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.1)
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
-      '@nuxt/schema': 3.8.2(rollup@3.29.4)
+      '@nuxt/devtools': 1.0.8(nuxt@3.10.0)(rollup@3.29.4)(vite@5.0.12)
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
+      '@nuxt/schema': 3.10.0(rollup@3.29.4)
       '@nuxt/telemetry': 2.5.3(rollup@3.29.4)
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.8.2(@types/node@20.10.1)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15)
-      '@types/node': 20.10.1
-      '@unhead/dom': 1.8.8
-      '@unhead/ssr': 1.8.8
-      '@unhead/vue': 1.8.8(vue@3.4.15)
-      '@vue/shared': 3.3.9
-      acorn: 8.11.2
-      c12: 1.5.1
+      '@nuxt/vite-builder': 3.10.0(@types/node@20.11.16)(eslint@8.56.0)(rollup@3.29.4)(typescript@5.3.3)(vue@3.4.15)
+      '@types/node': 20.11.16
+      '@unhead/dom': 1.8.10
+      '@unhead/ssr': 1.8.10
+      '@unhead/vue': 1.8.10(vue@3.4.15)
+      '@vue/shared': 3.4.15
+      acorn: 8.11.3
+      c12: 1.6.1
       chokidar: 3.5.3
       cookie-es: 1.0.0
-      defu: 6.1.3
+      defu: 6.1.4
       destr: 2.0.2
       devalue: 4.3.2
-      esbuild: 0.19.8
+      esbuild: 0.20.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       globby: 14.0.0
-      h3: 1.9.0
+      h3: 1.10.1
       hookable: 5.5.3
       jiti: 1.21.0
       klona: 2.0.6
       knitwork: 1.0.0
-      magic-string: 0.30.5
-      mlly: 1.4.2
+      magic-string: 0.30.6
+      mlly: 1.5.0
       nitropack: 2.8.1
       nuxi: 3.10.0
-      nypm: 0.3.3
+      nypm: 0.3.6
       ofetch: 1.3.3
       ohash: 1.1.3
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       radix3: 1.1.0
-      scule: 1.1.0
-      std-env: 3.5.0
-      strip-literal: 1.3.0
+      scule: 1.2.0
+      std-env: 3.7.0
+      strip-literal: 2.0.0
       ufo: 1.3.2
       ultrahtml: 1.5.2
       uncrypto: 0.1.3
       unctx: 2.3.1
-      unenv: 1.8.0
-      unimport: 3.6.0(rollup@3.29.4)
-      unplugin: 1.5.1
+      unenv: 1.9.0
+      unimport: 3.7.1(rollup@3.29.4)
+      unplugin: 1.6.0
       unplugin-vue-router: 0.7.0(rollup@3.29.4)(vue-router@4.2.5)(vue@3.4.15)
-      untyped: 1.4.0
+      untyped: 1.4.2
       vue: 3.4.15(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
@@ -11007,8 +9846,8 @@ packages:
       - xml2js
     dev: true
 
-  /nypm@0.3.3:
-    resolution: {integrity: sha512-FHoxtTscAE723e80d2M9cJRb4YVjL82Ra+ZV+YqC6rfNZUWahi+ZhPF+krnR+bdMvibsfHCtgKXnZf5R6kmEPA==}
+  /nypm@0.3.6:
+    resolution: {integrity: sha512-2CATJh3pd6CyNfU5VZM7qSwFu0ieyabkEdnogE30Obn1czrmOYiZ8DOZLe1yBdLKWoyD3Mcy2maUs+0MR3yVjQ==}
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
     dependencies:
@@ -11016,18 +9855,6 @@ packages:
       execa: 8.0.1
       pathe: 1.1.2
       ufo: 1.3.2
-    dev: true
-
-  /nypm@0.3.4:
-    resolution: {integrity: sha512-1JLkp/zHBrkS3pZ692IqOaIKSYHmQXgqfELk6YTOfVBnwealAmPA1q2kKK7PHJAHSMBozerThEFZXP3G6o7Ukg==}
-    engines: {node: ^14.16.0 || >=16.10.0}
-    hasBin: true
-    dependencies:
-      citty: 0.1.5
-      execa: 8.0.1
-      pathe: 1.1.2
-      ufo: 1.3.2
-    dev: true
 
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -11041,7 +9868,7 @@ packages:
     resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
     dev: false
 
@@ -11050,11 +9877,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
+  /object.assign@4.1.5:
+    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
       has-symbols: 1.0.3
       object-keys: 1.1.1
@@ -11064,7 +9891,7 @@ packages:
     resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
     dependencies:
       destr: 2.0.2
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       ufo: 1.3.2
     dev: true
 
@@ -11102,6 +9929,16 @@ packages:
     dependencies:
       mimic-fn: 4.0.0
 
+  /open@10.0.3:
+    resolution: {integrity: sha512-dtbI5oW7987hwC9qjJTyABldTaa19SuyJse1QboWv3b0qCcrrLNVDqBx1XgELAjh9QTVQaP/C5b1nhQebd1H2A==}
+    engines: {node: '>=18'}
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
+    dev: true
+
   /open@6.4.0:
     resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
     engines: {node: '>=8'}
@@ -11118,25 +9955,15 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /open@9.1.0:
-    resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
-    engines: {node: '>=14.16'}
-    dependencies:
-      default-browser: 4.0.0
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      is-wsl: 2.2.0
-    dev: true
-
-  /openapi-typescript@6.7.1:
-    resolution: {integrity: sha512-Q3Ltt0KUm2smcPrsaR8qKmSwQ1KM4yGDJVoQdpYa0yvKPeN8huDx5utMT7DvwvJastHHzUxajjivK3WN2+fobg==}
+  /openapi-typescript@6.7.4:
+    resolution: {integrity: sha512-EZyeW9Wy7UDCKv0iYmKrq2pVZtquXiD/YHiUClAKqiMi42nodx/EQH11K6fLqjt1IZlJmVokrAsExsBMM2RROQ==}
     hasBin: true
     dependencies:
       ansi-colors: 4.1.3
       fast-glob: 3.3.2
       js-yaml: 4.1.0
       supports-color: 9.4.0
-      undici: 5.28.1
+      undici: 5.28.2
       yargs-parser: 21.1.1
     dev: true
 
@@ -11168,7 +9995,7 @@ packages:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 4.0.0
-      cli-spinners: 2.9.1
+      cli-spinners: 2.9.2
       is-interactive: 2.0.0
       is-unicode-supported: 1.3.0
       log-symbols: 5.1.0
@@ -11266,27 +10093,27 @@ packages:
       semver: 5.7.2
     dev: false
 
-  /pacote@17.0.4:
-    resolution: {integrity: sha512-eGdLHrV/g5b5MtD5cTPyss+JxOlaOloSMG3UwPMAvL8ywaLJ6beONPF40K4KKl/UI6q5hTKCJq5rCu8tkF+7Dg==}
+  /pacote@17.0.6:
+    resolution: {integrity: sha512-cJKrW21VRE8vVTRskJo78c/RCvwJCn1f4qgfxL4w77SOWrTCRcmfkYHlHtS0gqpgjv3zhXflRtgsrUCX5xwNnQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     hasBin: true
     dependencies:
-      '@npmcli/git': 5.0.3
+      '@npmcli/git': 5.0.4
       '@npmcli/installed-package-contents': 2.0.2
-      '@npmcli/promise-spawn': 7.0.0
-      '@npmcli/run-script': 7.0.1
-      cacache: 18.0.0
+      '@npmcli/promise-spawn': 7.0.1
+      '@npmcli/run-script': 7.0.4
+      cacache: 18.0.2
       fs-minipass: 3.0.3
-      minipass: 7.0.3
+      minipass: 7.0.4
       npm-package-arg: 11.0.1
-      npm-packlist: 8.0.0
+      npm-packlist: 8.0.2
       npm-pick-manifest: 9.0.0
-      npm-registry-fetch: 16.0.0
+      npm-registry-fetch: 16.1.0
       proc-log: 3.0.0
       promise-retry: 2.0.1
       read-package-json: 7.0.0
       read-package-json-fast: 3.0.2
-      sigstore: 2.1.0
+      sigstore: 2.2.0
       ssri: 10.0.5
       tar: 6.2.0
     transitivePeerDependencies:
@@ -11376,7 +10203,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -11443,8 +10270,8 @@ packages:
     resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.1.0
-      minipass: 7.0.3
+      lru-cache: 10.2.0
+      minipass: 7.0.4
 
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -11501,8 +10328,8 @@ packages:
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
-      jsonc-parser: 3.2.0
-      mlly: 1.4.2
+      jsonc-parser: 3.2.1
+      mlly: 1.5.0
       pathe: 1.1.2
 
   /pluralize@8.0.0:
@@ -11510,8 +10337,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /pnpm@8.10.2:
-    resolution: {integrity: sha512-B4IJPVumx62UYggbwe8HdQFqS0EJ7KHh/tzqbxEBQ69fUJk9s2xCfU+oxivjkgoyJNsS2nGdJGyhndnxgEjDPA==}
+  /pnpm@8.15.1:
+    resolution: {integrity: sha512-gxz0xfi4N0r3FSHU0VPbSdcIbeYVwq98tenX64umMN2sRv6kldZD5VLvLmijqpmj5en77oaWcClnUE31xZyycw==}
     engines: {node: '>=16.14'}
     hasBin: true
     dev: true
@@ -11523,76 +10350,70 @@ packages:
       postcss: ^8.2.2
     dependencies:
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-colormin@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==}
+  /postcss-colormin@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-TXKOxs9LWcdYo5cgmcSHPkyrLAh86hX1ijmyy6J8SbOhyv6ua053M3ZAM/0j44UsnQNIWdl8gb5L7xX2htKeLw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-convert-values@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==}
+  /postcss-convert-values@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-aeBmaTnGQ+NUSVQT8aY0sKyAD/BaLJenEKZ03YK0JnDE1w1Rr8XShoxdal2V2H26xTJKr3v5haByOhJuyT4UYw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-discard-comments@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==}
+  /postcss-discard-comments@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-f1KYNPtqYLUeZGCHQPKzzFtsHaRuECe6jLakf/RjSRqvF5XHLZnM2+fXLhb8Qh/HBFHs3M4cSLb1k3B899RYIg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /postcss-discard-duplicates@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==}
+  /postcss-discard-duplicates@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-1hvUs76HLYR8zkScbwyJ8oJEugfPV+WchpnA+26fpJ7Smzs51CzGBHC32RS03psuX/2l0l0UKh2StzNxOrKCYg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /postcss-discard-empty@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==}
+  /postcss-discard-empty@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-yitcmKwmVWtNsrrRqGJ7/C0YRy53i0mjexBDQ9zYxDwTWVBgbU4+C9jIZLmQlTDT9zhml+u0OMFJh8+31krmOg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /postcss-discard-overridden@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==}
+  /postcss-discard-overridden@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-qs0ehZMMZpSESbRkw1+inkf51kak6OOzNRaoLd/U7Fatp0aN2HQ1rxGOrJvYcRAN9VpX8kUF13R2ofn8OlvFVA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /postcss-import-resolver@2.0.0:
-    resolution: {integrity: sha512-y001XYgGvVwgxyxw9J1a5kqM/vtmIQGzx34g0A0Oy44MFcy/ZboZw1hu/iN3VYFjSTRzbvd7zZJJz0Kh0AGkTw==}
-    dependencies:
-      enhanced-resolve: 4.5.0
-    dev: false
-
   /postcss-import@15.1.0(postcss@8.4.33):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -11613,8 +10434,8 @@ packages:
       camelcase-css: 2.0.1
       postcss: 8.4.33
 
-  /postcss-load-config@4.0.1(postcss@8.4.33)(ts-node@10.9.1):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
+  /postcss-load-config@4.0.2(postcss@8.4.33)(ts-node@10.9.2):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
     peerDependencies:
       postcss: '>=8.0.9'
@@ -11625,77 +10446,77 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      lilconfig: 2.1.0
+      lilconfig: 3.0.0
       postcss: 8.4.33
-      ts-node: 10.9.1(@types/node@20.4.7)(typescript@5.2.2)
-      yaml: 2.3.2
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3)
+      yaml: 2.3.4
 
-  /postcss-merge-longhand@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==}
+  /postcss-merge-longhand@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-+yfVB7gEM8SrCo9w2lCApKIEzrTKl5yS1F4yGhV3kSim6JzbfLGJyhR1B6X+6vOT0U33Mgx7iv4X9MVWuaSAfw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
-      stylehacks: 6.0.0(postcss@8.4.33)
+      stylehacks: 6.0.2(postcss@8.4.33)
     dev: true
 
-  /postcss-merge-rules@6.0.1(postcss@8.4.33):
-    resolution: {integrity: sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==}
+  /postcss-merge-rules@6.0.3(postcss@8.4.33):
+    resolution: {integrity: sha512-yfkDqSHGohy8sGYIJwBmIGDv4K4/WrJPX355XrxQb/CSsT4Kc/RxDi6akqn5s9bap85AWgv21ArcUWwWdGNSHA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       caniuse-api: 3.0.0
-      cssnano-utils: 4.0.0(postcss@8.4.33)
+      cssnano-utils: 4.0.1(postcss@8.4.33)
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
     dev: true
 
-  /postcss-minify-font-values@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==}
+  /postcss-minify-font-values@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-tIwmF1zUPoN6xOtA/2FgVk1ZKrLcCvE0dpZLtzyyte0j9zUeB8RTbCqrHZGjJlxOvNWKMYtunLrrl7HPOiR46w==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-minify-gradients@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==}
+  /postcss-minify-gradients@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-M1RJWVjd6IOLPl1hYiOd5HQHgpp6cvJVLrieQYS9y07Yo8itAr6jaekzJphaJFR0tcg4kRewCk3kna9uHBxn/w==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 4.0.0(postcss@8.4.33)
+      cssnano-utils: 4.0.1(postcss@8.4.33)
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-minify-params@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==}
+  /postcss-minify-params@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-zwQtbrPEBDj+ApELZ6QylLf2/c5zmASoOuA4DzolyVGdV38iR2I5QRMsZcHkcdkZzxpN8RS4cN7LPskOkTwTZw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
-      cssnano-utils: 4.0.0(postcss@8.4.33)
+      browserslist: 4.22.3
+      cssnano-utils: 4.0.1(postcss@8.4.33)
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-minify-selectors@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==}
+  /postcss-minify-selectors@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-0b+m+w7OAvZejPQdN2GjsXLv5o0jqYHX3aoV0e7RBKPCsB7TYG5KKWBFhGnB/iP3213Ts8c5H4wLPLMm7z28Sg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
     dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.33):
@@ -11705,170 +10526,161 @@ packages:
       postcss: ^8.2.14
     dependencies:
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
 
-  /postcss-normalize-charset@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==}
+  /postcss-normalize-charset@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-aW5LbMNRZ+oDV57PF9K+WI1Z8MPnF+A8qbajg/T8PP126YrGX1f9IQx21GI2OlGz7XFJi/fNi0GTbY948XJtXg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
     dev: true
 
-  /postcss-normalize-display-values@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==}
+  /postcss-normalize-display-values@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-mc3vxp2bEuCb4LgCcmG1y6lKJu1Co8T+rKHrcbShJwUmKJiEl761qb/QQCfFwlrvSeET3jksolCR/RZuMURudw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-positions@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==}
+  /postcss-normalize-positions@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-HRsq8u/0unKNvm0cvwxcOUEcakFXqZ41fv3FOdPn916XFUrympjr+03oaLkuZENz3HE9RrQE9yU0Xv43ThWjQg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-repeat-style@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==}
+  /postcss-normalize-repeat-style@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-Gbb2nmCy6tTiA7Sh2MBs3fj9W8swonk6lw+dFFeQT68B0Pzwp1kvisJQkdV6rbbMSd9brMlS8I8ts52tAGWmGQ==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-string@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==}
+  /postcss-normalize-string@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-5Fhx/+xzALJD9EI26Aq23hXwmv97Zfy2VFrt5PLT8lAhnBIZvmaT5pQk+NuJ/GWj/QWaKSKbnoKDGLbV6qnhXg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-timing-functions@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==}
+  /postcss-normalize-timing-functions@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-4zcczzHqmCU7L5dqTB9rzeqPWRMc0K2HoR+Bfl+FSMbqGBUcP5LRfgcH4BdRtLuzVQK1/FHdFoGT3F7rkEnY+g==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-unicode@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==}
+  /postcss-normalize-unicode@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-Ff2VdAYCTGyMUwpevTZPZ4w0+mPjbZzLLyoLh/RMpqUqeQKZ+xMm31hkxBavDcGKcxm6ACzGk0nBfZ8LZkStKA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-url@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==}
+  /postcss-normalize-url@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-jEXL15tXSvbjm0yzUV7FBiEXwhIa9H88JOXDGQzmcWoB4mSjZIsmtto066s2iW9FYuIrIF4k04HA2BKAOpbsaQ==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-normalize-whitespace@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==}
+  /postcss-normalize-whitespace@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-76i3NpWf6bB8UHlVuLRxG4zW2YykF9CTEcq/9LGAiz2qBuX5cBStadkk0jSkg9a9TCIXbMQz7yzrygKoCW9JuA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-ordered-values@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==}
+  /postcss-ordered-values@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-XXbb1O/MW9HdEhnBxitZpPFbIvDgbo9NK4c/5bOfiKpnIGZDoL2xd7/e6jW5DYLsWxBbs+1nZEnVgnjnlFViaA==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      cssnano-utils: 4.0.0(postcss@8.4.33)
+      cssnano-utils: 4.0.1(postcss@8.4.33)
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-reduce-initial@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==}
+  /postcss-reduce-initial@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-YGKalhNlCLcjcLvjU5nF8FyeCTkCO5UtvJEt0hrPZVCTtRLSOH4z00T1UntQPj4dUmIYZgMj8qK77JbSX95hSw==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       caniuse-api: 3.0.0
       postcss: 8.4.33
     dev: true
 
-  /postcss-reduce-transforms@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==}
+  /postcss-reduce-transforms@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-fUbV81OkUe75JM+VYO1gr/IoA2b/dRiH6HvMwhrIBSUrxq3jNZQZitSnugcTLDi1KkQh1eR/zi+iyxviUNBkcQ==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+  /postcss-selector-parser@6.0.15:
+    resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  /postcss-svgo@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==}
+  /postcss-svgo@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-IH5R9SjkTkh0kfFOQDImyy1+mTCb+E830+9SV1O+AaDcoHTvfsvt6WwJeo7KwcHbFnevZVCsXhDmjFiGVuwqFQ==}
     engines: {node: ^14 || ^16 || >= 18}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
-      svgo: 3.0.4
+      svgo: 3.2.0
     dev: true
 
-  /postcss-unique-selectors@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==}
+  /postcss-unique-selectors@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-8IZGQ94nechdG7Y9Sh9FlIY2b4uS8/k8kdKRX040XHsS3B6d1HrJAkXrBSsSu4SuARruSsUjW3nlSw8BHkaAYQ==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
     dev: true
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
   /postcss@8.4.33:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -11881,8 +10693,8 @@ packages:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
     dev: false
 
-  /preact@10.17.1:
-    resolution: {integrity: sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==}
+  /preact@10.19.3:
+    resolution: {integrity: sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==}
     dev: true
 
   /prelude-ls@1.2.1:
@@ -11970,10 +10782,6 @@ packages:
       genfun: 4.0.1
     dev: false
 
-  /prr@1.0.1:
-    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
-    dev: false
-
   /pseudomap@1.0.2:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
     dev: false
@@ -12000,8 +10808,8 @@ packages:
       pump: 2.0.1
     dev: false
 
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
     dev: true
 
@@ -12027,17 +10835,6 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.3.0(vue@3.4.15):
-    resolution: {integrity: sha512-czCi649V1Xv/j3Sv8DZY1eSE+QY7acS7zfycBqbsj5vAuAj2DFDaN5nCnyIQW7/bz45KOaCWMTZcFJ0yzxtgFg==}
-    dependencies:
-      '@floating-ui/dom': 1.5.3
-      '@floating-ui/vue': 1.0.2(vue@3.4.15)
-      fast-deep-equal: 3.1.3
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /radix-vue@1.4.0(vue@3.4.15):
     resolution: {integrity: sha512-KqG1Ed7/LL+9yh+VBPLZgWCkblBjGEo/AueMLD/g6Sx0Wb7ZAvfXPUSVTriVRj3IczMZecgleiLnVOEfwM2AXg==}
     dependencies:
@@ -12094,7 +10891,7 @@ packages:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      json-parse-even-better-errors: 3.0.0
+      json-parse-even-better-errors: 3.0.1
       npm-normalize-package-bin: 3.0.1
     dev: true
 
@@ -12103,7 +10900,7 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       glob: 10.3.10
-      json-parse-even-better-errors: 3.0.0
+      json-parse-even-better-errors: 3.0.1
       normalize-package-data: 6.0.0
       npm-normalize-package-bin: 3.0.1
     dev: true
@@ -12121,7 +10918,7 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
     dependencies:
-      '@types/normalize-package-data': 2.4.2
+      '@types/normalize-package-data': 2.4.4
       normalize-package-data: 2.5.0
       parse-json: 5.2.0
       type-fest: 0.6.0
@@ -12189,8 +10986,8 @@ packages:
       redis-errors: 1.2.0
     dev: true
 
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
   /regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
@@ -12312,10 +11109,6 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  /rfdc@1.3.0:
-    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
-    dev: true
-
   /rfdc@1.3.1:
     resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
     dev: true
@@ -12352,15 +11145,15 @@ packages:
       rollup: ^3.29.4 || ^4
       typescript: ^4.5 || ^5.0
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       rollup: 3.29.4
       typescript: 5.3.3
     optionalDependencies:
       '@babel/code-frame': 7.23.5
     dev: true
 
-  /rollup-plugin-visualizer@5.9.3(rollup@3.29.4):
-    resolution: {integrity: sha512-ieGM5UAbMVqThX67GCuFHu/GkaSXIUZwFKJsSzE+7+k9fibU/6gbUz7SL+9BBzNtv5bIFHj7kEu0TWcqEnT/sQ==}
+  /rollup-plugin-visualizer@5.12.0(rollup@3.29.4):
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
     hasBin: true
     peerDependencies:
@@ -12376,8 +11169,8 @@ packages:
       yargs: 17.7.2
     dev: true
 
-  /rollup-plugin-visualizer@5.9.3(rollup@4.6.1):
-    resolution: {integrity: sha512-ieGM5UAbMVqThX67GCuFHu/GkaSXIUZwFKJsSzE+7+k9fibU/6gbUz7SL+9BBzNtv5bIFHj7kEu0TWcqEnT/sQ==}
+  /rollup-plugin-visualizer@5.12.0(rollup@4.9.6):
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
     hasBin: true
     peerDependencies:
@@ -12388,19 +11181,11 @@ packages:
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
-      rollup: 4.6.1
+      rollup: 4.9.6
       source-map: 0.7.4
       yargs: 17.7.2
     dev: true
 
-  /rollup@3.29.3:
-    resolution: {integrity: sha512-T7du6Hum8jOkSWetjRgbwpM6Sy0nECYrYRSmZjayFcOddtKJWU4d17AC3HNUk7HRuqy4p+G7aEZclSHytqUmEg==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /rollup@3.29.4:
     resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -12408,31 +11193,31 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
-  /rollup@4.6.1:
-    resolution: {integrity: sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==}
+  /rollup@4.9.6:
+    resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.6.1
-      '@rollup/rollup-android-arm64': 4.6.1
-      '@rollup/rollup-darwin-arm64': 4.6.1
-      '@rollup/rollup-darwin-x64': 4.6.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.6.1
-      '@rollup/rollup-linux-arm64-gnu': 4.6.1
-      '@rollup/rollup-linux-arm64-musl': 4.6.1
-      '@rollup/rollup-linux-x64-gnu': 4.6.1
-      '@rollup/rollup-linux-x64-musl': 4.6.1
-      '@rollup/rollup-win32-arm64-msvc': 4.6.1
-      '@rollup/rollup-win32-ia32-msvc': 4.6.1
-      '@rollup/rollup-win32-x64-msvc': 4.6.1
-      fsevents: 2.3.3
-    dev: true
-
-  /run-applescript@5.0.0:
-    resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
-    engines: {node: '>=12'}
     dependencies:
-      execa: 5.1.1
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.9.6
+      '@rollup/rollup-android-arm64': 4.9.6
+      '@rollup/rollup-darwin-arm64': 4.9.6
+      '@rollup/rollup-darwin-x64': 4.9.6
+      '@rollup/rollup-linux-arm-gnueabihf': 4.9.6
+      '@rollup/rollup-linux-arm64-gnu': 4.9.6
+      '@rollup/rollup-linux-arm64-musl': 4.9.6
+      '@rollup/rollup-linux-riscv64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-musl': 4.9.6
+      '@rollup/rollup-win32-arm64-msvc': 4.9.6
+      '@rollup/rollup-win32-ia32-msvc': 4.9.6
+      '@rollup/rollup-win32-x64-msvc': 4.9.6
+      fsevents: 2.3.3
+
+  /run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
     dev: true
 
   /run-async@2.4.1:
@@ -12470,13 +11255,6 @@ packages:
 
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    requiresBuild: true
-
-  /scule@1.0.0:
-    resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
-
-  /scule@1.1.0:
-    resolution: {integrity: sha512-vRUjqhyM/YWYzT+jsMk6tnl3NkY4A4soJ8uyh3O6Um+JXEQL9ozUCe7pqrxn3CSKokw0hw3nFStfskzpgYwR0g==}
 
   /scule@1.2.0:
     resolution: {integrity: sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==}
@@ -12528,8 +11306,8 @@ packages:
       - supports-color
     dev: true
 
-  /serialize-javascript@6.0.1:
-    resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
+  /serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
     dependencies:
       randombytes: 2.1.0
     dev: true
@@ -12556,6 +11334,17 @@ packages:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: true
 
+  /set-function-length@1.2.0:
+    resolution: {integrity: sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.1
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.2
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+    dev: false
+
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: true
@@ -12586,10 +11375,10 @@ packages:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
-  /shiki@1.0.0-beta.3:
-    resolution: {integrity: sha512-z7cHTNSSvwGx2DfeLwjSNLo+HcVxifgNIzLm6Ye52eXcIwNHXT0wHbhy7FDOKSKveuEHBwt9opfj3Hoc8LE1Yg==}
+  /shiki@1.0.0-beta.5:
+    resolution: {integrity: sha512-S5FV55ZH8zLicVyqlJZj8LYqh/VuUICDDNG/L9eDM9I4d69EX+FbgSnKRIuJIwLrmJfTiPoGVnH1HsHX5whP/g==}
     dependencies:
-      '@shikijs/core': 1.0.0-beta.3
+      '@shikijs/core': 1.0.0-beta.5
     dev: true
 
   /shortid@2.2.16:
@@ -12610,14 +11399,16 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  /sigstore@2.1.0:
-    resolution: {integrity: sha512-kPIj+ZLkyI3QaM0qX8V/nSsweYND3W448pwkDgS6CQ74MfhEkIR8ToK5Iyx46KJYRjseVcD3Rp9zAmUAj6ZjPw==}
+  /sigstore@2.2.0:
+    resolution: {integrity: sha512-fcU9clHwEss2/M/11FFM8Jwc4PjBgbhXoNskoK5guoK0qGQBSeUbQZRJ+B2fDFIvhyf0gqCaPrel9mszbhAxug==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@sigstore/bundle': 2.1.0
+      '@sigstore/bundle': 2.1.1
+      '@sigstore/core': 0.2.0
       '@sigstore/protobuf-specs': 0.2.1
-      '@sigstore/sign': 2.1.0
-      '@sigstore/tuf': 2.2.0
+      '@sigstore/sign': 2.2.1
+      '@sigstore/tuf': 2.3.0
+      '@sigstore/verify': 0.1.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12628,8 +11419,8 @@ packages:
     requiresBuild: true
     dev: true
 
-  /simple-git@3.21.0:
-    resolution: {integrity: sha512-oTzw9248AF5bDTMk9MrxsRzEzivMlY+DWH0yWS4VYpMhNLhDWnN06pCtaUyPnqv/FpsdeNmRqmZugMABHRPdDA==}
+  /simple-git@3.22.0:
+    resolution: {integrity: sha512-6JujwSs0ac82jkGjMHiCnTifvf1crOiY/+tfs/Pqih6iow7VrpNKRRNdWm6RtaXpvvv/JGNYhlUtLhGFqHF+Yw==}
     dependencies:
       '@kwsites/file-exists': 1.1.1
       '@kwsites/promise-deferred': 1.1.1
@@ -12638,12 +11429,12 @@ packages:
       - supports-color
     dev: true
 
-  /sirv@2.0.3:
-    resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
     dependencies:
-      '@polka/url': 1.0.0-next.23
-      mrmime: 1.0.1
+      '@polka/url': 1.0.0-next.24
+      mrmime: 2.0.0
       totalist: 3.0.1
     dev: true
 
@@ -12658,6 +11449,7 @@ packages:
   /slash@4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
+    dev: true
 
   /slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
@@ -12692,17 +11484,6 @@ packages:
       socks: 1.1.10
     dev: false
 
-  /socks-proxy-agent@7.0.0:
-    resolution: {integrity: sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==}
-    engines: {node: '>= 10'}
-    dependencies:
-      agent-base: 6.0.2
-      debug: 4.3.4
-      socks: 2.7.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /socks-proxy-agent@8.0.2:
     resolution: {integrity: sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==}
     engines: {node: '>= 14'}
@@ -12767,19 +11548,26 @@ packages:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.15
+      spdx-license-ids: 3.0.16
 
-  /spdx-exceptions@2.3.0:
-    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
+  /spdx-exceptions@2.4.0:
+    resolution: {integrity: sha512-hcjppoJ68fhxA/cjbN4T8N6uCUejN8yFw69ttpqtBeCbF3u13n7mb31NB9jKwGTTWWnt9IbRA/mf1FprYS8wfw==}
 
   /spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.15
+      spdx-exceptions: 2.4.0
+      spdx-license-ids: 3.0.16
 
-  /spdx-license-ids@3.0.15:
-    resolution: {integrity: sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ==}
+  /spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+    dependencies:
+      spdx-exceptions: 2.4.0
+      spdx-license-ids: 3.0.16
+    dev: true
+
+  /spdx-license-ids@3.0.16:
+    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
 
   /speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
@@ -12796,7 +11584,7 @@ packages:
     resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 7.0.3
+      minipass: 7.0.4
     dev: true
 
   /ssri@4.1.6:
@@ -12824,15 +11612,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /std-env@3.4.3:
-    resolution: {integrity: sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==}
-
-  /std-env@3.5.0:
-    resolution: {integrity: sha512-JGUEaALvL0Mf6JCfYnJOTcobY+Nc7sG/TemDRBqCA0wEr4DER7zDchaaixTlmOxAjG1uRJmX82EQcxwTQTkqVA==}
-
   /std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
-    dev: true
 
   /stdin-discarder@0.1.0:
     resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==}
@@ -12845,15 +11626,15 @@ packages:
     resolution: {integrity: sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==}
     dependencies:
       end-of-stream: 1.4.4
-      stream-shift: 1.0.1
+      stream-shift: 1.0.3
     dev: false
 
-  /stream-shift@1.0.1:
-    resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==}
+  /stream-shift@1.0.3:
+    resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
     dev: false
 
-  /streamx@2.15.5:
-    resolution: {integrity: sha512-9thPGMkKC2GctCzyCUjME3yR03x2xNo0GPKGkRw2UMYN+gqWa9uqpyNWhmsNCutU5zHmkUum0LsCRQTXUgUCAg==}
+  /streamx@2.15.7:
+    resolution: {integrity: sha512-NPEKS5+yjyo597eafGbKW5ujh7Sm6lDLHZQd/lRSz6S0VarpADBJItqfB4PnwpS+472oob1GX5cCY9vzfJpHUA==}
     dependencies:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
@@ -12893,7 +11674,7 @@ packages:
     engines: {node: '>=16'}
     dependencies:
       eastasianwidth: 0.2.0
-      emoji-regex: 10.2.1
+      emoji-regex: 10.3.0
       strip-ansi: 7.1.0
     dev: false
 
@@ -12974,33 +11755,39 @@ packages:
     dependencies:
       acorn: 8.11.3
 
+  /strip-literal@2.0.0:
+    resolution: {integrity: sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==}
+    dependencies:
+      js-tokens: 8.0.2
+    dev: true
+
   /striptags@3.2.0:
     resolution: {integrity: sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==}
     dev: false
 
-  /stylehacks@6.0.0(postcss@8.4.33):
-    resolution: {integrity: sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==}
+  /stylehacks@6.0.2(postcss@8.4.33):
+    resolution: {integrity: sha512-00zvJGnCu64EpMjX8b5iCZ3us2Ptyw8+toEkb92VdmkEaRaSGBNKAoK6aWZckhXxmQP8zWiTaFaiMGIU8Ve8sg==}
     engines: {node: ^14 || ^16 || >=18.0}
     peerDependencies:
-      postcss: ^8.2.15
+      postcss: ^8.4.31
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       postcss: 8.4.33
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
     dev: true
 
   /stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
     dev: false
 
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
       commander: 4.1.1
-      glob: 7.1.6
+      glob: 10.3.10
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
@@ -13038,8 +11825,8 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
-  /svgo@3.0.4:
-    resolution: {integrity: sha512-T+Xul3JwuJ6VGXKo/p2ndqx1ibxNKnLTvRc1ZTWKCfyKS/GgNjRZcYsK84fxTsy/izr91g/Rwx6fGnVgaFSI5g==}
+  /svgo@3.2.0:
+    resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -13052,6 +11839,18 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /synckit@0.6.2:
+    resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
+    engines: {node: '>=12.20'}
+    dependencies:
+      tslib: 2.6.2
+    dev: true
+
+  /system-architecture@0.1.0:
+    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
+    engines: {node: '>=18'}
+    dev: true
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
@@ -13059,7 +11858,7 @@ packages:
   /tailwind-merge@2.2.1:
     resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==}
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.9
     dev: true
 
   /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
@@ -13067,10 +11866,10 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
-      tailwindcss: 3.4.1(ts-node@10.9.1)
+      tailwindcss: 3.4.1(ts-node@10.9.2)
     dev: false
 
-  /tailwindcss@3.4.1(ts-node@10.9.1):
+  /tailwindcss@3.4.1(ts-node@10.9.2):
     resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
@@ -13092,19 +11891,14 @@ packages:
       postcss: 8.4.33
       postcss-import: 15.1.0(postcss@8.4.33)
       postcss-js: 4.0.1(postcss@8.4.33)
-      postcss-load-config: 4.0.1(postcss@8.4.33)(ts-node@10.9.1)
+      postcss-load-config: 4.0.2(postcss@8.4.33)(ts-node@10.9.2)
       postcss-nested: 6.0.1(postcss@8.4.33)
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.15
       resolve: 1.22.8
-      sucrase: 3.34.0
+      sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  /tapable@1.1.3:
-    resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
-    engines: {node: '>=6'}
-    dev: false
-
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -13132,12 +11926,12 @@ packages:
       xtend: 4.0.2
     dev: false
 
-  /tar-stream@3.1.6:
-    resolution: {integrity: sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==}
+  /tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
     dependencies:
       b4a: 1.6.4
       fast-fifo: 1.3.2
-      streamx: 2.15.5
+      streamx: 2.15.7
     dev: true
 
   /tar@6.2.0:
@@ -13151,17 +11945,17 @@ packages:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
-  /taze@0.12.0:
-    resolution: {integrity: sha512-ftDYS/dNF0EkiEpZZweJxJKQRVFPBFFDz3OPezFloVtOHoMmVwLiMxLM9KYLnA+30D8IFdnGgS15WiIaz2bOfA==}
+  /taze@0.12.3:
+    resolution: {integrity: sha512-kvc8+XM1nizAalJiVaFbVX0aLWuiCX4F/oW9ozt8otyy/ORejeqpe/6SIASmrY/T4CWsc1G3G4IfNg5KfGR11w==}
     hasBin: true
     dependencies:
-      '@antfu/ni': 0.21.8
-      '@npmcli/config': 8.0.1
+      '@antfu/ni': 0.21.12
+      '@npmcli/config': 8.1.0
       cli-progress: 3.12.0
       deepmerge: 4.3.1
       detect-indent: 7.0.1
       execa: 8.0.1
-      pacote: 17.0.4
+      pacote: 17.0.6
       picocolors: 1.0.0
       prompts: 2.4.2
       semver: 7.5.4
@@ -13179,8 +11973,8 @@ packages:
       execa: 0.7.0
     dev: false
 
-  /terser@5.24.0:
-    resolution: {integrity: sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==}
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -13249,8 +12043,8 @@ packages:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: true
 
-  /tinybench@2.5.1:
-    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
+  /tinybench@2.6.0:
+    resolution: {integrity: sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==}
     dev: true
 
   /tinypool@0.6.0:
@@ -13267,16 +12061,11 @@ packages:
     resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
     dev: false
 
-  /tinyspy@2.1.1:
-    resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==}
+  /tinyspy@2.2.0:
+    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /titleize@3.0.0:
-    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
-    engines: {node: '>=12'}
-    dev: true
-
   /tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -13328,7 +12117,7 @@ packages:
   /tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
   /tree-kill@1.2.2:
@@ -13341,15 +12130,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: true
-
   /ts-api-utils@1.0.3(typescript@5.3.3):
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
     engines: {node: '>=16.13.0'}
@@ -13369,8 +12149,8 @@ packages:
       code-block-writer: 12.0.0
     dev: false
 
-  /ts-node@10.9.1(@types/node@20.4.7)(typescript@5.2.2):
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+  /ts-node@10.9.2(@types/node@20.5.1)(typescript@5.3.3):
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
     peerDependencies:
       '@swc/core': '>=1.2.50'
@@ -13388,28 +12168,28 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.4.7
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      '@types/node': 20.5.1
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.2.2
+      typescript: 5.3.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
-  /tsconfck@2.1.2(typescript@5.2.2):
-    resolution: {integrity: sha512-ghqN1b0puy3MhhviwO2kGF8SeMDNhEbnKxjK7h6+fvY9JAxqvXi8y5NAHSQv687OVboS2uZIByzGd45/YxrRHg==}
-    engines: {node: ^14.13.1 || ^16 || >=18}
+  /tsconfck@3.0.1(typescript@5.3.3):
+    resolution: {integrity: sha512-7ppiBlF3UEddCLeI1JRx5m2Ryq+xk4JrZuq4EuYXykipebaq1dV0Fhgr1hb7CkmHt32QSgOZlcqVLEtHBG4/mg==}
+    engines: {node: ^18 || >=20}
     hasBin: true
     peerDependencies:
-      typescript: ^4.3.5 || ^5.0.0
+      typescript: ^5.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      typescript: 5.2.2
+      typescript: 5.3.3
     dev: false
 
   /tsconfig-paths@4.2.0:
@@ -13426,16 +12206,16 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
 
-  /tsup@7.2.0(ts-node@10.9.1)(typescript@5.2.2):
-    resolution: {integrity: sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==}
-    engines: {node: '>=16.14'}
+  /tsup@7.3.0(ts-node@10.9.2)(typescript@5.3.3):
+    resolution: {integrity: sha512-Ja1eaSRrE+QarmATlNO5fse2aOACYMBX+IZRKy1T+gpyH+jXgRrl5l4nHIQJQ1DoDgEjHDTw8cpE085UdBZuWQ==}
+    engines: {node: '>=18'}
+    deprecated: Breaking node 16
     hasBin: true
     peerDependencies:
       '@swc/core': ^1
       postcss: ^8.4.12
-      typescript: '>=4.1.0'
+      typescript: '>=4.5.0'
     peerDependenciesMeta:
       '@swc/core':
         optional: true
@@ -13444,34 +12224,34 @@ packages:
       typescript:
         optional: true
     dependencies:
-      bundle-require: 4.0.2(esbuild@0.18.20)
+      bundle-require: 4.0.2(esbuild@0.19.12)
       cac: 6.7.14
       chokidar: 3.5.3
       debug: 4.3.4
-      esbuild: 0.18.20
+      esbuild: 0.19.12
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 4.0.1(postcss@8.4.33)(ts-node@10.9.1)
+      postcss-load-config: 4.0.2(postcss@8.4.33)(ts-node@10.9.2)
       resolve-from: 5.0.0
-      rollup: 3.29.3
+      rollup: 4.9.6
       source-map: 0.8.0-beta.0
-      sucrase: 3.34.0
+      sucrase: 3.35.0
       tree-kill: 1.2.2
-      typescript: 5.2.2
+      typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
       - ts-node
     dev: true
 
-  /tsutils@3.21.0(typescript@5.2.2):
+  /tsutils@3.21.0(typescript@5.3.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.2.2
+      typescript: 5.3.3
     dev: true
 
   /tsx@4.7.0:
@@ -13479,14 +12259,14 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
     dependencies:
-      esbuild: 0.19.10
+      esbuild: 0.19.12
       get-tsconfig: 4.7.2
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /tuf-js@2.1.0:
-    resolution: {integrity: sha512-eD7YPPjVlMzdggrOeE8zwoegUaG/rt6Bt3jwoQPunRiNVzgcCE009UDFJKJjG+Gk9wFu6W/Vi+P5d/5QpdD9jA==}
+  /tuf-js@2.2.0:
+    resolution: {integrity: sha512-ZSDngmP1z6zw+FIkIBjvOp/II/mIub/O7Pp12j1WNsiCpg5R5wAc//i555bBQsE44O94btLt0xM/Zr2LQjwdCg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@tufjs/models': 2.0.0
@@ -13543,33 +12323,19 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /type-fest@4.3.2:
-    resolution: {integrity: sha512-VpwuOgnTsQUUWi0id8Hl4/xiQ+OoaeJGe8dnFjzubJYe/lOc2/d1Qx/d3FqWR0FlpOG/cvukAXfB12A49Y4iiA==}
+  /type-fest@4.10.2:
+    resolution: {integrity: sha512-anpAG63wSpdEbLwOqH8L84urkL6PiVIov3EMmgIhhThevh9aiMQov+6Btx0wldNcvm4wV+e2/Rt1QdDwKHFbHw==}
     engines: {node: '>=16'}
 
-  /type-fest@4.8.3:
-    resolution: {integrity: sha512-//BaTm14Q/gHBn09xlnKNqfI8t6bmdzx2DXYfPBNofN0WUybCEUDcbCWcTa0oF09lzLjZgPphXAsvRiMK0V6Bw==}
-    engines: {node: '>=16'}
-    dev: false
-
   /typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: false
 
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   /typescript@5.3.3:
     resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /ufo@1.3.0:
-    resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
-    dev: false
-
   /ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
 
@@ -13588,29 +12354,29 @@ packages:
     dependencies:
       '@rollup/plugin-alias': 5.1.0(rollup@3.29.4)
       '@rollup/plugin-commonjs': 25.0.7(rollup@3.29.4)
-      '@rollup/plugin-json': 6.0.1(rollup@3.29.4)
+      '@rollup/plugin-json': 6.1.0(rollup@3.29.4)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@3.29.4)
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       chalk: 5.3.0
       citty: 0.1.5
       consola: 3.2.3
-      defu: 6.1.2
-      esbuild: 0.19.11
+      defu: 6.1.4
+      esbuild: 0.19.12
       globby: 13.2.2
       hookable: 5.5.3
       jiti: 1.21.0
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       mkdist: 1.4.0(typescript@5.3.3)
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       pkg-types: 1.0.3
       pretty-bytes: 6.1.1
       rollup: 3.29.4
       rollup-plugin-dts: 6.1.0(rollup@3.29.4)(typescript@5.3.3)
-      scule: 1.0.0
+      scule: 1.2.0
       typescript: 5.3.3
-      untyped: 1.4.0
+      untyped: 1.4.2
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -13619,10 +12385,10 @@ packages:
   /unconfig@0.3.11:
     resolution: {integrity: sha512-bV/nqePAKv71v3HdVUn6UefbsDKQWRX+bJIkiSm0+twIds6WiD2bJLWWT3i214+J/B4edufZpG2w7Y63Vbwxow==}
     dependencies:
-      '@antfu/utils': 0.7.6
-      defu: 6.1.2
+      '@antfu/utils': 0.7.7
+      defu: 6.1.4
       jiti: 1.21.0
-      mlly: 1.4.2
+      mlly: 1.5.0
     dev: true
 
   /uncrypto@0.1.3:
@@ -13634,33 +12400,19 @@ packages:
     dependencies:
       acorn: 8.11.3
       estree-walker: 3.0.3
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       unplugin: 1.6.0
 
-  /undici-types@5.25.3:
-    resolution: {integrity: sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==}
-    dev: true
-
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  /undici@5.28.1:
-    resolution: {integrity: sha512-xcIIvj1LOQH9zAL54iWFkuDEaIVEjLrru7qRpa3GrEEHk6OBhb/LycuUY2m7VCcTuDeLziXCxobQVyKExyGeIA==}
+  /undici@5.28.2:
+    resolution: {integrity: sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==}
     engines: {node: '>=14.0'}
     dependencies:
       '@fastify/busboy': 2.1.0
     dev: true
 
-  /unenv@1.8.0:
-    resolution: {integrity: sha512-uIGbdCWZfhRRmyKj1UioCepQ0jpq638j/Cf0xFTn4zD1nGJ2lSdzYHLzfdXN791oo/0juUiSWW1fBklXMTsuqg==}
-    dependencies:
-      consola: 3.2.3
-      defu: 6.1.4
-      mime: 3.0.0
-      node-fetch-native: 1.4.1
-      pathe: 1.1.2
-    dev: true
-
   /unenv@1.9.0:
     resolution: {integrity: sha512-QKnFNznRxmbOF1hDgzpqrlIf6NC5sbZ2OJ+5Wl3OX8uM+LUJXbj4TXvLJCtwbPTmbMHCLIz6JLKNinNsMShK9g==}
     dependencies:
@@ -13671,12 +12423,12 @@ packages:
       pathe: 1.1.2
     dev: true
 
-  /unhead@1.8.8:
-    resolution: {integrity: sha512-SfUJ2kjz1NcfvdM+uEAlN11h31wHqMg0HZ5jriuRPjMCj5O7lPs4uSMdBUYh3KEo0uLKrW76FM85ONXkyZfm3g==}
+  /unhead@1.8.10:
+    resolution: {integrity: sha512-dth8FvZkLriO5ZWWOBIYBNSfGiwJtKcqpPWpSOk/Z0e2jdlgwoZEWZHFyte0EKvmbZxKcsWNMqIuv7dEmS5yZQ==}
     dependencies:
-      '@unhead/dom': 1.8.8
-      '@unhead/schema': 1.8.8
-      '@unhead/shared': 1.8.8
+      '@unhead/dom': 1.8.10
+      '@unhead/schema': 1.8.10
+      '@unhead/shared': 1.8.10
       hookable: 5.5.3
     dev: true
 
@@ -13684,51 +12436,56 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
-  /unimport@3.4.0(rollup@3.29.4):
-    resolution: {integrity: sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==}
-    dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      escape-string-regexp: 5.0.0
-      fast-glob: 3.3.2
-      local-pkg: 0.4.3
-      magic-string: 0.30.3
-      mlly: 1.4.2
-      pathe: 1.1.2
-      pkg-types: 1.0.3
-      scule: 1.0.0
-      strip-literal: 1.3.0
-      unplugin: 1.5.0
-    transitivePeerDependencies:
-      - rollup
-
-  /unimport@3.6.0(rollup@3.29.4):
-    resolution: {integrity: sha512-yXW3Z30yk1vX8fxO8uHlq9wY9K+L56LHp4Hlbv8i7tW+NENSOv8AaFJUPtOQchxlT7/JBAzCtkrBtcVjKIr1VQ==}
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      escape-string-regexp: 5.0.0
-      fast-glob: 3.3.2
-      local-pkg: 0.5.0
-      magic-string: 0.30.5
-      mlly: 1.4.2
-      pathe: 1.1.2
-      pkg-types: 1.0.3
-      scule: 1.1.0
-      strip-literal: 1.3.0
-      unplugin: 1.5.1
-    transitivePeerDependencies:
-      - rollup
-
-  /unimport@3.7.1(rollup@4.6.1):
+  /unimport@3.7.1:
     resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.6.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       acorn: 8.11.3
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.2
       local-pkg: 0.5.0
-      magic-string: 0.30.5
-      mlly: 1.4.2
+      magic-string: 0.30.6
+      mlly: 1.5.0
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      scule: 1.2.0
+      strip-literal: 1.3.0
+      unplugin: 1.6.0
+    transitivePeerDependencies:
+      - rollup
+    dev: false
+
+  /unimport@3.7.1(rollup@3.29.4):
+    resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      acorn: 8.11.3
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.6
+      mlly: 1.5.0
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      scule: 1.2.0
+      strip-literal: 1.3.0
+      unplugin: 1.6.0
+    transitivePeerDependencies:
+      - rollup
+
+  /unimport@3.7.1(rollup@4.9.6):
+    resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      acorn: 8.11.3
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.6
+      mlly: 1.5.0
       pathe: 1.1.2
       pkg-types: 1.0.3
       scule: 1.2.0
@@ -13774,7 +12531,7 @@ packages:
   /unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
-      '@types/unist': 2.0.8
+      '@types/unist': 2.0.10
     dev: true
 
   /universalify@0.1.2:
@@ -13782,8 +12539,8 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: false
 
-  /universalify@2.0.0:
-    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
   /unplugin-icons@0.18.3:
@@ -13807,7 +12564,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/install-pkg': 0.3.1
-      '@antfu/utils': 0.7.6
+      '@antfu/utils': 0.7.7
       '@iconify/utils': 2.1.20
       debug: 4.3.4
       kolorist: 1.8.0
@@ -13825,41 +12582,25 @@ packages:
       vue-router:
         optional: true
     dependencies:
-      '@babel/types': 7.23.6
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      '@vue-macros/common': 1.9.0(rollup@3.29.4)(vue@3.4.15)
+      '@babel/types': 7.23.9
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@vue-macros/common': 1.10.1(rollup@3.29.4)(vue@3.4.15)
       ast-walker-scope: 0.5.0(rollup@3.29.4)
       chokidar: 3.5.3
       fast-glob: 3.3.2
       json5: 2.2.3
       local-pkg: 0.4.3
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
-      scule: 1.1.0
-      unplugin: 1.5.1
+      scule: 1.2.0
+      unplugin: 1.6.0
       vue-router: 4.2.5(vue@3.4.15)
-      yaml: 2.3.2
+      yaml: 2.3.4
     transitivePeerDependencies:
       - rollup
       - vue
     dev: true
 
-  /unplugin@1.5.0:
-    resolution: {integrity: sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==}
-    dependencies:
-      acorn: 8.10.0
-      chokidar: 3.5.3
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.5.0
-
-  /unplugin@1.5.1:
-    resolution: {integrity: sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==}
-    dependencies:
-      acorn: 8.11.2
-      chokidar: 3.5.3
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.6.1
-
   /unplugin@1.6.0:
     resolution: {integrity: sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==}
     dependencies:
@@ -13912,25 +12653,20 @@ packages:
       anymatch: 3.1.3
       chokidar: 3.5.3
       destr: 2.0.2
-      h3: 1.10.0
+      h3: 1.10.1
       ioredis: 5.3.2
-      listhen: 1.5.5
-      lru-cache: 10.1.0
+      listhen: 1.6.0
+      lru-cache: 10.2.0
       mri: 1.2.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       ofetch: 1.3.3
       ufo: 1.3.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /untildify@4.0.0:
-    resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /untun@0.1.2:
-    resolution: {integrity: sha512-wLAMWvxfqyTiBODA1lg3IXHQtjggYLeTK7RnSfqtOXixWJ3bAa2kK/HHmOOg19upteqO3muLvN6O/icbyQY33Q==}
+  /untun@0.1.3:
+    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
     hasBin: true
     dependencies:
       citty: 0.1.5
@@ -13938,13 +12674,13 @@ packages:
       pathe: 1.1.2
     dev: true
 
-  /untyped@1.4.0:
-    resolution: {integrity: sha512-Egkr/s4zcMTEuulcIb7dgURS6QpN7DyqQYdf+jBtiaJvQ+eRsrtWUoX84SbvQWuLkXsOjM+8sJC9u6KoMK/U7Q==}
+  /untyped@1.4.2:
+    resolution: {integrity: sha512-nC5q0DnPEPVURPhfPQLahhSTnemVtPzdx7ofiRxXpOB2SYnb3MfdU3DVGyJdS8Lx+tBWeAePO8BfU/3EgksM7Q==}
     hasBin: true
     dependencies:
-      '@babel/core': 7.23.5
-      '@babel/standalone': 7.23.1
-      '@babel/types': 7.23.6
+      '@babel/core': 7.23.9
+      '@babel/standalone': 7.23.10
+      '@babel/types': 7.23.9
       defu: 6.1.4
       jiti: 1.21.0
       mri: 1.2.0
@@ -13957,27 +12693,16 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.0):
+  /update-browserslist-db@1.0.13(browserslist@4.22.3):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.22.0
+      browserslist: 4.22.3
       escalade: 3.1.1
       picocolors: 1.0.0
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.2):
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.22.2
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
-
   /update-notifier@2.5.0:
     resolution: {integrity: sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==}
     engines: {node: '>=4'}
@@ -14001,7 +12726,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
   /url-parse-lax@1.0.0:
@@ -14024,8 +12749,8 @@ packages:
       inherits: 2.0.4
       is-arguments: 1.1.1
       is-generator-function: 1.0.10
-      is-typed-array: 1.1.12
-      which-typed-array: 1.1.11
+      is-typed-array: 1.1.13
+      which-typed-array: 1.1.14
     dev: false
 
   /v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.15):
@@ -14035,8 +12760,8 @@ packages:
       vue: ^3.2.0
     dependencies:
       '@popperjs/core': 2.11.8
-      '@types/lodash': 4.14.199
-      '@types/resize-observer-browser': 0.1.8
+      '@types/lodash': 4.14.202
+      '@types/resize-observer-browser': 0.1.11
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
@@ -14072,21 +12797,21 @@ packages:
       vue: ^3.3.11
     dependencies:
       '@vue/devtools-api': 6.5.1
-      type-fest: 4.8.3
+      type-fest: 4.10.2
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /vite-node@0.33.0(@types/node@20.10.1):
+  /vite-node@0.33.0(@types/node@20.11.16):
     resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 4.5.1(@types/node@20.10.1)
+      vite: 4.5.2(@types/node@20.11.16)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14098,17 +12823,17 @@ packages:
       - terser
     dev: true
 
-  /vite-node@0.34.6(@types/node@20.8.8):
+  /vite-node@0.34.6(@types/node@20.11.16):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.2
+      mlly: 1.5.0
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.0.12(@types/node@20.8.8)
+      vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14120,8 +12845,29 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker@0.6.2(eslint@8.56.0)(typescript@5.3.3)(vite@4.5.1):
-    resolution: {integrity: sha512-YvvvQ+IjY09BX7Ab+1pjxkELQsBd4rPhWNw8WLBeFVxu/E7O+n6VYAqNsKdK/a2luFlX/sMpoWdGFfg4HvwdJQ==}
+  /vite-node@1.2.2(@types/node@20.11.16):
+    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.0.12(@types/node@20.11.16)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite-plugin-checker@0.6.4(eslint@8.56.0)(typescript@5.3.3)(vite@5.0.12):
+    resolution: {integrity: sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==}
     engines: {node: '>=14.16'}
     peerDependencies:
       eslint: '>=7'
@@ -14158,23 +12904,21 @@ packages:
       commander: 8.3.0
       eslint: 8.56.0
       fast-glob: 3.3.2
-      fs-extra: 11.1.1
-      lodash.debounce: 4.0.8
-      lodash.pick: 4.4.0
+      fs-extra: 11.2.0
       npm-run-path: 4.0.1
       semver: 7.5.4
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.3.3
-      vite: 4.5.1(@types/node@20.10.1)
+      vite: 5.0.12(@types/node@20.11.16)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.11
       vscode-uri: 3.0.8
     dev: true
 
-  /vite-plugin-inspect@0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@4.5.1):
-    resolution: {integrity: sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==}
+  /vite-plugin-inspect@0.8.3(@nuxt/kit@3.10.0)(rollup@3.29.4)(vite@5.0.12):
+    resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
@@ -14183,42 +12927,43 @@ packages:
       '@nuxt/kit':
         optional: true
     dependencies:
-      '@antfu/utils': 0.7.6
-      '@nuxt/kit': 3.8.2(rollup@3.29.4)
+      '@antfu/utils': 0.7.7
+      '@nuxt/kit': 3.10.0(rollup@3.29.4)
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       debug: 4.3.4
       error-stack-parser-es: 0.1.1
-      fs-extra: 11.1.1
-      open: 9.1.0
+      fs-extra: 11.2.0
+      open: 10.0.3
+      perfect-debounce: 1.0.0
       picocolors: 1.0.0
-      sirv: 2.0.3
-      vite: 4.5.1(@types/node@20.10.1)
+      sirv: 2.0.4
+      vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-vue-inspector@4.0.0(vite@4.5.1):
-    resolution: {integrity: sha512-xNjMbRj3YrebuuInTvlC8ghPtzT+3LjMIQPeeR/5CaFd+WcbA9wBnECZmlcP3GITCVED0SxGmTyoJ3iVKsK4vQ==}
+  /vite-plugin-vue-inspector@4.0.2(vite@5.0.12):
+    resolution: {integrity: sha512-KPvLEuafPG13T7JJuQbSm5PwSxKFnVS965+MP1we2xGw9BPkkc/+LPix5MMWenpKWqtjr0ws8THrR+KuoDC8hg==}
     peerDependencies:
-      vite: ^3.0.0-0 || ^4.0.0-0
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
     dependencies:
-      '@babel/core': 7.23.5
-      '@babel/plugin-proposal-decorators': 7.23.5(@babel/core@7.23.5)
-      '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
-      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
-      '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
+      '@babel/core': 7.23.9
+      '@babel/plugin-proposal-decorators': 7.23.9(@babel/core@7.23.9)
+      '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.9)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.9)
+      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9)
+      '@vue/babel-plugin-jsx': 1.2.1(@babel/core@7.23.9)
       '@vue/compiler-dom': 3.4.15
       kolorist: 1.8.0
-      magic-string: 0.30.5
-      vite: 4.5.1(@types/node@20.10.1)
+      magic-string: 0.30.6
+      vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-tsconfig-paths@4.2.1(typescript@5.2.2):
-    resolution: {integrity: sha512-GNUI6ZgPqT3oervkvzU+qtys83+75N/OuDaQl7HmOqFTb0pjZsuARrRipsyJhJ3enqV8beI1xhGbToR4o78nSQ==}
+  /vite-tsconfig-paths@4.3.1(typescript@5.3.3):
+    resolution: {integrity: sha512-cfgJwcGOsIxXOLU/nELPny2/LUD/lcf1IbfyeKTv2bsupVbTH/xpFtdQlBmIP1GEK2CjjLxYhFfB+QODFAx5aw==}
     peerDependencies:
       vite: '*'
     peerDependenciesMeta:
@@ -14227,14 +12972,14 @@ packages:
     dependencies:
       debug: 4.3.4
       globrex: 0.1.2
-      tsconfck: 2.1.2(typescript@5.2.2)
+      tsconfck: 3.0.1(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: false
 
-  /vite@4.5.1(@types/node@20.10.1):
-    resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==}
+  /vite@4.5.2(@types/node@20.11.16):
+    resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -14261,7 +13006,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.10.1
+      '@types/node': 20.11.16
       esbuild: 0.18.20
       postcss: 8.4.33
       rollup: 3.29.4
@@ -14269,7 +13014,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.12(@types/node@20.8.10):
+  /vite@5.0.12(@types/node@20.11.16):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -14297,51 +13042,15 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.8.10
-      esbuild: 0.19.11
+      '@types/node': 20.11.16
+      esbuild: 0.19.12
       postcss: 8.4.33
-      rollup: 4.6.1
+      rollup: 4.9.6
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.12(@types/node@20.8.8):
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 20.8.8
-      esbuild: 0.19.11
-      postcss: 8.4.33
-      rollup: 4.6.1
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
-  /vitepress@1.0.0-rc.41(@algolia/client-search@4.22.0)(@types/node@20.8.10)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
+  /vitepress@1.0.0-rc.41(@algolia/client-search@4.22.1)(@types/node@20.11.16)(postcss@8.4.33)(search-insights@2.13.0)(typescript@5.3.3):
     resolution: {integrity: sha512-PAEoIIc9J//k/Wg39C6k86hZpXPmLZjRiTBwieDNeYGdevD7xr5Ve8o1W/w+e9dtyQMkuvzgianEamXDX3aj7g==}
     hasBin: true
     peerDependencies:
@@ -14354,9 +13063,9 @@ packages:
         optional: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.22.0)(search-insights@2.13.0)
-      '@shikijs/core': 1.0.0-beta.3
-      '@shikijs/transformers': 1.0.0-beta.3
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0)
+      '@shikijs/core': 1.0.0-beta.5
+      '@shikijs/transformers': 1.0.0-beta.5
       '@types/markdown-it': 13.0.7
       '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
       '@vue/devtools-api': 7.0.14
@@ -14366,8 +13075,8 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.3.0
       postcss: 8.4.33
-      shiki: 1.0.0-beta.3
-      vite: 5.0.12(@types/node@20.8.10)
+      shiki: 1.0.0-beta.5
+      vite: 5.0.12(@types/node@20.11.16)
       vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14397,6 +13106,28 @@ packages:
       - universal-cookie
     dev: true
 
+  /vitest-environment-nuxt@1.0.0(h3@1.10.1)(rollup@3.29.4)(vite@5.0.12)(vitest@0.33.0)(vue-router@4.2.5)(vue@3.4.15):
+    resolution: {integrity: sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==}
+    dependencies:
+      '@nuxt/test-utils': 3.11.0(h3@1.10.1)(rollup@3.29.4)(vite@5.0.12)(vitest@0.33.0)(vue-router@4.2.5)(vue@3.4.15)
+    transitivePeerDependencies:
+      - '@cucumber/cucumber'
+      - '@jest/globals'
+      - '@testing-library/vue'
+      - '@vitest/ui'
+      - '@vue/test-utils'
+      - h3
+      - happy-dom
+      - jsdom
+      - playwright-core
+      - rollup
+      - supports-color
+      - vite
+      - vitest
+      - vue
+      - vue-router
+    dev: true
+
   /vitest@0.33.0:
     resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
     engines: {node: '>=v14.18.0'}
@@ -14428,29 +13159,29 @@ packages:
       webdriverio:
         optional: true
     dependencies:
-      '@types/chai': 4.3.6
-      '@types/chai-subset': 1.3.3
-      '@types/node': 20.10.1
+      '@types/chai': 4.3.11
+      '@types/chai-subset': 1.3.5
+      '@types/node': 20.11.16
       '@vitest/expect': 0.33.0
       '@vitest/runner': 0.33.0
       '@vitest/snapshot': 0.33.0
       '@vitest/spy': 0.33.0
       '@vitest/utils': 0.33.0
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
       cac: 6.7.14
-      chai: 4.3.10
+      chai: 4.4.1
       debug: 4.3.4
       local-pkg: 0.4.3
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       pathe: 1.1.2
       picocolors: 1.0.0
-      std-env: 3.4.3
+      std-env: 3.7.0
       strip-literal: 1.3.0
-      tinybench: 2.5.1
+      tinybench: 2.6.0
       tinypool: 0.6.0
-      vite: 4.5.1(@types/node@20.10.1)
-      vite-node: 0.33.0(@types/node@20.10.1)
+      vite: 4.5.2(@types/node@20.11.16)
+      vite-node: 0.33.0(@types/node@20.11.16)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -14462,7 +13193,7 @@ packages:
       - terser
     dev: true
 
-  /vitest@0.34.6(@vitest/ui@0.34.5):
+  /vitest@0.34.6(@vitest/ui@0.34.7):
     resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -14493,30 +13224,30 @@ packages:
       webdriverio:
         optional: true
     dependencies:
-      '@types/chai': 4.3.6
-      '@types/chai-subset': 1.3.3
-      '@types/node': 20.8.8
+      '@types/chai': 4.3.11
+      '@types/chai-subset': 1.3.5
+      '@types/node': 20.11.16
       '@vitest/expect': 0.34.6
       '@vitest/runner': 0.34.6
       '@vitest/snapshot': 0.34.6
       '@vitest/spy': 0.34.6
-      '@vitest/ui': 0.34.5(vitest@0.34.6)
+      '@vitest/ui': 0.34.7(vitest@0.34.6)
       '@vitest/utils': 0.34.6
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
       cac: 6.7.14
-      chai: 4.3.10
+      chai: 4.4.1
       debug: 4.3.4
       local-pkg: 0.4.3
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       pathe: 1.1.2
       picocolors: 1.0.0
-      std-env: 3.4.3
+      std-env: 3.7.0
       strip-literal: 1.3.0
-      tinybench: 2.5.1
+      tinybench: 2.6.0
       tinypool: 0.7.0
-      vite: 5.0.12(@types/node@20.8.8)
-      vite-node: 0.34.6(@types/node@20.8.8)
+      vite: 5.0.12(@types/node@20.11.16)
+      vite-node: 0.34.6(@types/node@20.11.16)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -14582,8 +13313,8 @@ packages:
       ufo: 1.3.2
     dev: true
 
-  /vue-demi@0.14.6(vue@3.4.15):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.4.15):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -14600,26 +13331,8 @@ packages:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
     dev: true
 
-  /vue-eslint-parser@9.3.1(eslint@8.53.0):
-    resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-    dependencies:
-      debug: 4.3.4
-      eslint: 8.53.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      lodash: 4.17.21
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /vue-eslint-parser@9.3.1(eslint@8.56.0):
-    resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
+  /vue-eslint-parser@9.4.2(eslint@8.56.0):
+    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -14657,8 +13370,8 @@ packages:
     resolution: {integrity: sha512-uJPvtcftMjmiXfpsMtB77+TkzWn8gEPI0l5sN+X+UqYuAOVacf0dk7ONqRsc5DWy1ilJtLexz/wSggwjimkYKA==}
     dev: false
 
-  /vue-template-compiler@2.7.14:
-    resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
+  /vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
     dependencies:
       de-indent: 1.0.2
       he: 1.2.0
@@ -14681,25 +13394,10 @@ packages:
     peerDependencies:
       vue: ^3.3.0
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
-  /vue@3.4.15(typescript@5.2.2):
-    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@vue/compiler-dom': 3.4.15
-      '@vue/compiler-sfc': 3.4.15
-      '@vue/runtime-dom': 3.4.15
-      '@vue/server-renderer': 3.4.15(vue@3.4.15)
-      '@vue/shared': 3.4.15
-      typescript: 5.2.2
-
   /vue@3.4.15(typescript@5.3.3):
     resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
@@ -14719,8 +13417,8 @@ packages:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
     dev: true
 
-  /web-streams-polyfill@3.2.1:
-    resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
+  /web-streams-polyfill@3.3.2:
+    resolution: {integrity: sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==}
     engines: {node: '>= 8'}
     dev: false
 
@@ -14736,9 +13434,6 @@ packages:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
 
-  /webpack-virtual-modules@0.5.0:
-    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
-
   /webpack-virtual-modules@0.6.1:
     resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
 
@@ -14757,15 +13452,15 @@ packages:
       webidl-conversions: 4.0.2
     dev: true
 
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
+  /which-typed-array@1.1.14:
+    resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.5
       for-each: 0.3.3
       gopd: 1.0.1
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: false
 
   /which@1.3.1:
@@ -14847,8 +13542,8 @@ packages:
       signal-exit: 3.0.7
     dev: false
 
-  /ws@8.14.2:
-    resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
+  /ws@8.16.0:
+    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -14904,7 +13599,7 @@ packages:
     dependencies:
       eslint-visitor-keys: 3.4.3
       lodash: 4.17.21
-      yaml: 2.3.2
+      yaml: 2.3.4
     dev: true
 
   /yaml@1.10.2:
@@ -14917,8 +13612,8 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
     engines: {node: '>= 14'}
 
   /yargs-parser@20.2.9:
@@ -14971,10 +13666,6 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
-  /zod@3.22.2:
-    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
-    dev: false
-
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false

From 5c69b2160c82db9e3965b6d3db7db0170264bf87 Mon Sep 17 00:00:00 2001
From: Dunqing <dengqing0821@gmail.com>
Date: Sat, 3 Feb 2024 23:14:10 +0800
Subject: [PATCH 16/29] fix(cli): cannot add Carousel component without enabled
 typescript (#318)

---
 packages/cli/src/commands/add.ts | 40 +++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index 4abeaa74..279ae085 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -1,4 +1,4 @@
-import { existsSync, promises as fs } from 'node:fs'
+import { existsSync, promises as fs, rmSync } from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
 import chalk from 'chalk'
@@ -159,28 +159,46 @@ export const add = new Command()
           }
         }
 
-        for (const file of item.files) {
-          const componentDir = path.resolve(targetDir, item.name)
-          let filePath = path.resolve(
+        const componentDir = path.resolve(targetDir, item.name)
+        if (!existsSync(componentDir))
+          await fs.mkdir(componentDir, { recursive: true })
+
+        const files = item.files.map(file => ({
+          ...file,
+          path: path.resolve(
             targetDir,
             item.name,
             file.name,
-          )
+          ),
+        }))
 
-          if (!config.typescript)
-            filePath = filePath.replace(/\.ts$/, '.js')
-
-          if (!existsSync(componentDir))
-            await fs.mkdir(componentDir, { recursive: true })
+        // We need to write original files to disk if we're not using TypeScript.
+        // Rewrite or delete added files after transformed
+        if (!config.typescript) {
+          for (const file of files)
+            await fs.writeFile(file.path, file.content)
+        }
 
+        for (const file of files) {
           // Run transformers.
           const content = await transform({
-            filename: file.name,
+            filename: file.path,
             raw: file.content,
             config,
             baseColor,
           })
 
+          let filePath = file.path
+
+          if (!config.typescript) {
+            // remove original .ts file if we're not using TypeScript.
+            if (file.path.endsWith('.ts')) {
+              if (existsSync(file.path))
+                rmSync(file.path)
+            }
+            filePath = file.path.replace(/\.ts$/, '.js')
+          }
+
           await fs.writeFile(filePath, content)
         }
 

From 83d0a06e6f0a00a5746ddc25b0932226e0607ef3 Mon Sep 17 00:00:00 2001
From: itsTPM <26815728+itsTPM@users.noreply.github.com>
Date: Sat, 3 Feb 2024 20:42:49 +0300
Subject: [PATCH 17/29] fix(cli): add `xl` item to borderRadius in
 tailwind.config template (#319)

---
 apps/www/tailwind.config.js         | 1 +
 packages/cli/src/utils/templates.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 2cfff6f8..d9fd9918 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -49,6 +49,7 @@ export default {
         },
       },
       borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index 015ee5f8..677de92c 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -116,6 +116,7 @@ module.exports = {
         },
       },
       borderRadius: {
+      	xl: "calc(var(--radius) + 4px)",
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",

From 6c99fd6dd196d46d15e3f1644c481a67df85ab36 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 4 Feb 2024 21:53:00 +0800
Subject: [PATCH 18/29] chore: fix testing pipeline

---
 packages/cli/package.json                     |  2 +-
 .../transform-cjs-to-esm.test.ts.snap         |  1 +
 pnpm-lock.yaml                                | 50 +++++++++++--------
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 59fcdc7b..80605c4f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -41,7 +41,7 @@
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
     "pub:release": "pnpm build && pnpm publish  --no-git-checks --access public",
-    "test": "vitest run",
+    "test": "vitest run -u",
     "test:ui": "vitest --ui"
   },
   "dependencies": {
diff --git a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
index e6927d8c..009aaf53 100644
--- a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
@@ -112,6 +112,7 @@ export default {
         },
       },
       borderRadius: {
+      	xl: \\"calc(var(--radius) + 4px)\\",
         lg: \\"var(--radius)\\",
         md: \\"calc(var(--radius) - 2px)\\",
         sm: \\"calc(var(--radius) - 4px)\\",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56c7dc4f..5674ad6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,7 +128,7 @@ importers:
         version: 1.1.105
       '@iconify/json':
         specifier: ^2.2.108
-        version: 2.2.178
+        version: 2.2.179
       '@iconify/vue':
         specifier: ^4.1.1
         version: 4.1.1(vue@3.4.15)
@@ -188,7 +188,7 @@ importers:
         version: 5.3.3
       unplugin-icons:
         specifier: ^0.18.3
-        version: 0.18.3
+        version: 0.18.4
       vite:
         specifier: ^5.0.12
         version: 5.0.12(@types/node@20.11.16)
@@ -1964,8 +1964,8 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
-  /@iconify/json@2.2.178:
-    resolution: {integrity: sha512-AYw9z/Lu9Y0Q5V0DvyhysJA3ohwKMOgXxCJ1AzTnsZizbUqZ7zh5/wnBegv1ikBEISAY0tC/R46j0tJBjliHkw==}
+  /@iconify/json@2.2.179:
+    resolution: {integrity: sha512-PcbNPyNmd8NdyY8ad71v3xIv3G4WemRkK+nu64YUJlXBiU/6VMvI73ggP84VexV07pPnwoazBSZ6DdKH3F45aA==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -1975,8 +1975,8 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.20:
-    resolution: {integrity: sha512-t8TeKlYK/5i9yTY9VAGAE4P0qQHd/0vH+VSRO+bdpxlt8wqB6f2I0/IrciRsdeFZPMoL8IICgP7lgl2ZtbG8Tw==}
+  /@iconify/utils@2.1.22:
+    resolution: {integrity: sha512-6UHVzTVXmvO8uS6xFF+L/QTSpTzA/JZxtgU+KYGFyDYMEObZ1bu/b5l+zNJjHy+0leWjHI+C0pXlzGvv3oXZMA==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.7
@@ -1984,6 +1984,7 @@ packages:
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.5.0
+      mlly: 1.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5155,7 +5156,7 @@ packages:
     resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
     dependencies:
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.3
       set-function-length: 1.2.0
     dev: false
 
@@ -5542,7 +5543,7 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   /concat-stream@1.6.2:
     resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
@@ -6262,7 +6263,7 @@ packages:
     resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.3
       gopd: 1.0.1
       has-property-descriptors: 1.0.1
     dev: false
@@ -6480,7 +6481,7 @@ packages:
     dev: false
 
   /ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
     dev: true
 
   /electron-to-chromium@1.4.656:
@@ -6585,6 +6586,11 @@ packages:
     resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
     dev: true
 
+  /es-errors@1.0.0:
+    resolution: {integrity: sha512-yHV74THqMJUyFKkHyN7hyENcEZM3Dj2a2IrdClY+IT4BFQHkIVwlh8s6uZfjsFydMdNHv0F5mWgAA3ajFbsvVQ==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /es6-promise@4.2.8:
     resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
     dev: false
@@ -7531,9 +7537,11 @@ packages:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
-  /get-intrinsic@1.2.2:
-    resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
+  /get-intrinsic@1.2.3:
+    resolution: {integrity: sha512-JIcZczvcMVE7AUOP+X72bh8HqHBRxFdz5PDHYtNG/lE3yk9b3KZBJlwFcTyPYjg3L4RLLmZJzvjxhaZVapxFrQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
+      es-errors: 1.0.0
       function-bind: 1.1.2
       has-proto: 1.0.1
       has-symbols: 1.0.3
@@ -7777,7 +7785,7 @@ packages:
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.3
     dev: false
 
   /got@6.7.1:
@@ -7844,7 +7852,7 @@ packages:
   /has-property-descriptors@1.0.1:
     resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.3
     dev: false
 
   /has-proto@1.0.1:
@@ -8497,8 +8505,8 @@ packages:
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  /js-tokens@8.0.2:
-    resolution: {integrity: sha512-Olnt+V7xYdvGze9YTbGFZIfQXuGV4R3nQwwl8BrtgaPE/wq8UFpUHWuTNc05saowhSr1ZO6tx+V6RjE9D5YQog==}
+  /js-tokens@8.0.3:
+    resolution: {integrity: sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==}
     dev: true
 
   /js-yaml@4.1.0:
@@ -11340,7 +11348,7 @@ packages:
     dependencies:
       define-data-property: 1.1.1
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.3
       gopd: 1.0.1
       has-property-descriptors: 1.0.1
     dev: false
@@ -11758,7 +11766,7 @@ packages:
   /strip-literal@2.0.0:
     resolution: {integrity: sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==}
     dependencies:
-      js-tokens: 8.0.2
+      js-tokens: 8.0.3
     dev: true
 
   /striptags@3.2.0:
@@ -12543,8 +12551,8 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  /unplugin-icons@0.18.3:
-    resolution: {integrity: sha512-6EHPMXOq7XL8JAULzX0o3KqOsJHhYfpDfB1WvBWwZJH/PutIkV/ahRpHytucQ1evfRFuv/DVIozEmFIhP1xRxA==}
+  /unplugin-icons@0.18.4:
+    resolution: {integrity: sha512-89J3zPTfJLJIyka8SMk5rkwiykzAlnKYNUC58gbNbfmuA7aE3Vbh5BjDCeRS8UkTXLR72cs+ywCF/9EE9c/SoQ==}
     peerDependencies:
       '@svgr/core': '>=7.0.0'
       '@svgx/core': ^1.0.1
@@ -12565,7 +12573,7 @@ packages:
     dependencies:
       '@antfu/install-pkg': 0.3.1
       '@antfu/utils': 0.7.7
-      '@iconify/utils': 2.1.20
+      '@iconify/utils': 2.1.22
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.5.0

From 69576afcff87c70645e9b6715f2fb6c0ce714a37 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 4 Feb 2024 21:53:32 +0800
Subject: [PATCH 19/29] chore: cleanup

---
 packages/cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 80605c4f..59fcdc7b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -41,7 +41,7 @@
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
     "pub:release": "pnpm build && pnpm publish  --no-git-checks --access public",
-    "test": "vitest run -u",
+    "test": "vitest run",
     "test:ui": "vitest --ui"
   },
   "dependencies": {

From 5dc01fa62a8bd7cecc2ac83807bc123e8aa07e4c Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 4 Feb 2024 21:55:01 +0800
Subject: [PATCH 20/29] chore: release v0.9.0

---
 apps/www/package.json        | 2 +-
 package.json                 | 2 +-
 packages/cli/package.json    | 2 +-
 packages/module/package.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index ba163c0f..6719993a 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "files": [
     "dist"
   ],
diff --git a/package.json b/package.json
index 30d43952..e81ad08d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn-vue",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "private": true,
   "packageManager": "pnpm@8.15.1",
   "license": "MIT",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 59fcdc7b..4e76a7cd 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
diff --git a/packages/module/package.json b/packages/module/package.json
index 9085259d..1e527755 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-nuxt",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "Add shadcn-vue module to Nuxt",
   "publishConfig": {
     "access": "public"

From 32552dc83a7d7bb29332510f4d38a5a071cd0d2d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 5 Feb 2024 11:06:21 +0800
Subject: [PATCH 21/29] chore: bump radix-vue

---
 apps/www/package.json                        |  2 +-
 packages/cli/package.json                    |  2 +-
 packages/cli/test/fixtures/nuxt/package.json |  2 +-
 packages/module/playground/package.json      |  2 +-
 pnpm-lock.yaml                               | 17 +++++++++++------
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 6719993a..97e9415a 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -32,7 +32,7 @@
     "embla-carousel-autoplay": "^8.0.0-rc22",
     "embla-carousel-vue": "^8.0.0-rc22",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.4.0",
+    "radix-vue": "^1.4.1",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vee-validate": "4.12.5",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 4e76a7cd..837c6939 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -63,7 +63,7 @@
     "node-fetch": "^3.3.2",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.4.1",
     "recast": "^0.23.4",
     "rimraf": "^5.0.1",
     "ts-morph": "^19.0.0",
diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/nuxt/package.json
index 06c2c638..9b4ee1f9 100644
--- a/packages/cli/test/fixtures/nuxt/package.json
+++ b/packages/cli/test/fixtures/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.4.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index 9ed5f882..b8012a53 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -14,7 +14,7 @@
     "embla-carousel": "8.0.0-rc19",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.4.1",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5674ad6b..1f767de3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,8 +96,8 @@ importers:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.4.15)
       radix-vue:
-        specifier: ^1.4.0
-        version: 1.4.0(vue@3.4.15)
+        specifier: ^1.4.1
+        version: 1.4.1(vue@3.4.15)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
@@ -256,8 +256,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       radix-vue:
-        specifier: ^1.3.0
-        version: 1.4.0(vue@3.4.15)
+        specifier: ^1.4.1
+        version: 1.4.1(vue@3.4.15)
       recast:
         specifier: ^0.23.4
         version: 0.23.4
@@ -2823,6 +2823,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     dev: true
     bundledDependencies:
       - napi-wasm
@@ -9399,6 +9400,10 @@ packages:
     hasBin: true
     dev: true
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+    dev: true
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -10843,8 +10848,8 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.4.0(vue@3.4.15):
-    resolution: {integrity: sha512-KqG1Ed7/LL+9yh+VBPLZgWCkblBjGEo/AueMLD/g6Sx0Wb7ZAvfXPUSVTriVRj3IczMZecgleiLnVOEfwM2AXg==}
+  /radix-vue@1.4.1(vue@3.4.15):
+    resolution: {integrity: sha512-eJsyIHDZPfIdH0iqrfTODuklPqDXfO0iNDNI1isOYIr+ejmeCjP6Yw1LA7LtDryPnjsSkqj0t04DF7eBn2wtMQ==}
     dependencies:
       '@floating-ui/dom': 1.6.1
       '@floating-ui/vue': 1.0.6(vue@3.4.15)

From b486a10129d91b6ef6bf54e595f179e48df2b121 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 5 Feb 2024 12:00:32 +0330
Subject: [PATCH 22/29] fix: `CommandItem` hightlighted bg (#322)

* fix: `CommandItem` hightlighted bg

* fix: escape key not closing combobox

---------

Co-authored-by: zernonia <zernonia@gmail.com>
---
 apps/www/src/lib/registry/default/ui/command/CommandItem.vue  | 3 +--
 apps/www/src/lib/registry/default/ui/command/CommandList.vue  | 2 +-
 apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue | 3 +--
 apps/www/src/lib/registry/new-york/ui/command/CommandList.vue | 2 +-
 apps/www/src/public/registry/styles/default/command.json      | 4 ++--
 apps/www/src/public/registry/styles/new-york/command.json     | 4 ++--
 6 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
index 29725b18..c373d12e 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
@@ -19,8 +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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
-    @select.prevent
+    :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-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
   >
     <slot />
   </ComboboxItem>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index 710d0bc5..2184bd3a 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)" :dismissable="false">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
index 29725b18..c373d12e 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
@@ -19,8 +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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
-    @select.prevent
+    :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-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
   >
     <slot />
   </ComboboxItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index 710d0bc5..2184bd3a 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)" :dismissable="false">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index 8264aa4e..704cb0ad 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -28,11 +28,11 @@
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[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 HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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)\" :dismissable=\"false\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
     },
     {
       "name": "CommandSeparator.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index bf2d343b..80ccf7e4 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -28,11 +28,11 @@
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n    @select.prevent\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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-[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 HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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)\" :dismissable=\"false\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
     },
     {
       "name": "CommandSeparator.vue",

From 67d10e1191ab2b078c9c59e97e2fb7069847c460 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 5 Feb 2024 16:58:07 +0800
Subject: [PATCH 23/29] chore: revert dismissable

---
 apps/www/src/lib/registry/default/ui/command/CommandList.vue  | 2 +-
 apps/www/src/lib/registry/new-york/ui/command/CommandList.vue | 2 +-
 apps/www/src/public/registry/styles/default/command.json      | 2 +-
 apps/www/src/public/registry/styles/new-york/command.json     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index 2184bd3a..710d0bc5 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)" :dismissable="false">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index 2184bd3a..710d0bc5 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)" :dismissable="false">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index 704cb0ad..a71b6fbd 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -32,7 +32,7 @@
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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)\" :dismissable=\"false\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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",
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index 80ccf7e4..160b4f63 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -32,7 +32,7 @@
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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)\" :dismissable=\"false\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\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",

From b0e1b5553792a3420a7ec193b1dcd1f856dd5a88 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 5 Feb 2024 21:00:31 +0330
Subject: [PATCH 24/29] docs: add simple column pinning example (#320)

---
 apps/www/__registry__/index.ts                |  14 +
 .../src/content/docs/components/data-table.md |   9 +-
 .../example/DataTableColumnPinningDemo.vue    | 273 ++++++++++++++++++
 .../example/DataTableColumnPinningDemo.vue    | 273 ++++++++++++++++++
 4 files changed, 568 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index fa91bc27..c8ca92f4 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -317,6 +317,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ContextMenuDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ContextMenuDemo.vue'],
     },
+    DataTableColumnPinningDemo: {
+      name: 'DataTableColumnPinningDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/default/example/DataTableColumnPinningDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTableColumnPinningDemo.vue'],
+    },
     DataTableDemo: {
       name: 'DataTableDemo',
       type: 'components:example',
@@ -1215,6 +1222,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/ContextMenuDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/ContextMenuDemo.vue'],
     },
+    DataTableColumnPinningDemo: {
+      name: 'DataTableColumnPinningDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue'],
+    },
     DataTableDemo: {
       name: 'DataTableDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index 1e8c7b3c..aa42fc92 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -5,7 +5,7 @@ primitive: https://tanstack.com/table/v8/docs/guide/introduction
 ---
 
 
-<ComponentPreview name="DataTableDemo"  />
+<ComponentPreview name="DataTableDemo" />
 
 ## Introduction
 
@@ -50,6 +50,13 @@ npx shadcn-vue@latest add table
 npm install @tanstack/vue-table
 ```
 
+## Examples
+
+### Column Pinning
+
+<ComponentPreview name="DataTableColumnPinningDemo" />
+
+
 ## Prerequisites
 
 We are going to build a table to show recent payments. Here's what our data looks like:
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
new file mode 100644
index 00000000..ed827193
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import {
+  FlexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
+
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/default/ui/table'
+import { cn, valueUpdater } from '@/lib/utils'
+
+export interface Payment {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+const data: Payment[] = [
+  {
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'success',
+    email: 'ken99@yahoo.com',
+  },
+  {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'success',
+    email: 'Abe45@gmail.com',
+  },
+  {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'processing',
+    email: 'Monserrat44@gmail.com',
+  },
+  {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'success',
+    email: 'Silas22@gmail.com',
+  },
+  {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'failed',
+    email: 'carmella@hotmail.com',
+  },
+]
+
+const columnHelper = createColumnHelper<Payment>()
+
+const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => h(Checkbox, {
+      'checked': table.getIsAllPageRowsSelected(),
+      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'ariaLabel': 'Select all',
+    }),
+    cell: ({ row, column }) => {
+      return h(Checkbox, {
+        'checked': row.getIsSelected(),
+        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'ariaLabel': 'Select row',
+      })
+    },
+    enableSorting: false,
+    enableHiding: false,
+  }),
+  columnHelper.accessor('status', {
+    enablePinning: true,
+    header: 'Status',
+    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),
+  }),
+  columnHelper.accessor('email', {
+    header: ({ column }) => {
+      return h(Button, {
+        variant: 'ghost',
+        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
+    },
+    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
+  }),
+  columnHelper.accessor('amount', {
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+  }),
+  columnHelper.display({
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return h('div', { class: 'relative' }, h(DropdownAction, {
+        payment,
+      }))
+    },
+  }),
+]
+
+const sorting = ref<SortingState>([])
+const columnFilters = ref<ColumnFiltersState>([])
+const columnVisibility = ref<VisibilityState>({})
+const rowSelection = ref({})
+
+const table = useVueTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get columnVisibility() { return columnVisibility.value },
+    get rowSelection() { return rowSelection.value },
+    columnPinning: {
+      left: ['status'],
+    },
+  },
+})
+
+const getState = table.getState()
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 items-center py-4">
+      <Input
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        :model-value="table.getColumn('email')?.getFilterValue() as string"
+        @update:model-value=" table.getColumn('email')?.setFilterValue($event)"
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto">
+            Columns <ChevronDown class="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuCheckboxItem
+            v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
+            :key="column.id"
+            class="capitalize"
+            :checked="column.getIsVisible()"
+            @update:checked="(value) => {
+              column.toggleVisibility(!!value)
+            }"
+          >
+            {{ column.id }}
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <div class="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+            <TableHead
+              v-for="header in headerGroup.headers" :key="header.id" :data-pinned="header.column.getIsPinned()"
+              :class="cn(
+                { 'sticky bg-background/95': header.column.getIsPinned() },
+                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',
+              )"
+            >
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-if="table.getRowModel().rows?.length">
+            <TableRow
+              v-for="row in table.getRowModel().rows"
+              :key="row.id"
+              :data-state="row.getIsSelected() && 'selected'"
+            >
+              <TableCell
+                v-for="cell in row.getVisibleCells()" :key="cell.id" :data-pinned="cell.column.getIsPinned()"
+                :class="cn(
+                  { 'sticky bg-background/95': cell.column.getIsPinned() },
+                  cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',
+                )"
+              >
+                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+              </TableCell>
+            </TableRow>
+          </template>
+
+          <TableRow v-else>
+            <TableCell
+              col-span="{columns.length}"
+              class="h-24 text-center"
+            >
+              No results.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <div class="flex items-center justify-end space-x-2 py-4">
+      <div class="flex-1 text-sm text-muted-foreground">
+        {{ table.getFilteredSelectedRowModel().rows.length }} of
+        {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+      </div>
+      <div class="space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
new file mode 100644
index 00000000..3d5f7d8c
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import {
+  FlexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+
+  useVueTable,
+} from '@tanstack/vue-table'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
+
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import { cn, valueUpdater } from '@/lib/utils'
+
+export interface Payment {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+const data: Payment[] = [
+  {
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'success',
+    email: 'ken99@yahoo.com',
+  },
+  {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'success',
+    email: 'Abe45@gmail.com',
+  },
+  {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'processing',
+    email: 'Monserrat44@gmail.com',
+  },
+  {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'success',
+    email: 'Silas22@gmail.com',
+  },
+  {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'failed',
+    email: 'carmella@hotmail.com',
+  },
+]
+
+const columnHelper = createColumnHelper<Payment>()
+
+const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => h(Checkbox, {
+      'checked': table.getIsAllPageRowsSelected(),
+      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'ariaLabel': 'Select all',
+    }),
+    cell: ({ row, column }) => {
+      return h(Checkbox, {
+        'checked': row.getIsSelected(),
+        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'ariaLabel': 'Select row',
+      })
+    },
+    enableSorting: false,
+    enableHiding: false,
+  }),
+  columnHelper.accessor('status', {
+    enablePinning: true,
+    header: 'Status',
+    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),
+  }),
+  columnHelper.accessor('email', {
+    header: ({ column }) => {
+      return h(Button, {
+        variant: 'ghost',
+        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+    },
+    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
+  }),
+  columnHelper.accessor('amount', {
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+  }),
+  columnHelper.display({
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return h('div', { class: 'relative' }, h(DropdownAction, {
+        payment,
+      }))
+    },
+  }),
+]
+
+const sorting = ref<SortingState>([])
+const columnFilters = ref<ColumnFiltersState>([])
+const columnVisibility = ref<VisibilityState>({})
+const rowSelection = ref({})
+
+const table = useVueTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get columnVisibility() { return columnVisibility.value },
+    get rowSelection() { return rowSelection.value },
+    columnPinning: {
+      left: ['status'],
+    },
+  },
+})
+
+const getState = table.getState()
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 items-center py-4">
+      <Input
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        :model-value="table.getColumn('email')?.getFilterValue() as string"
+        @update:model-value=" table.getColumn('email')?.setFilterValue($event)"
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto">
+            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuCheckboxItem
+            v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
+            :key="column.id"
+            class="capitalize"
+            :checked="column.getIsVisible()"
+            @update:checked="(value) => {
+              column.toggleVisibility(!!value)
+            }"
+          >
+            {{ column.id }}
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <div class="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+            <TableHead
+              v-for="header in headerGroup.headers" :key="header.id" :data-pinned="header.column.getIsPinned()"
+              :class="cn(
+                { 'sticky bg-background/95': header.column.getIsPinned() },
+                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',
+              )"
+            >
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-if="table.getRowModel().rows?.length">
+            <TableRow
+              v-for="row in table.getRowModel().rows"
+              :key="row.id"
+              :data-state="row.getIsSelected() && 'selected'"
+            >
+              <TableCell
+                v-for="cell in row.getVisibleCells()" :key="cell.id" :data-pinned="cell.column.getIsPinned()"
+                :class="cn(
+                  { 'sticky bg-background/95': cell.column.getIsPinned() },
+                  cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',
+                )"
+              >
+                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+              </TableCell>
+            </TableRow>
+          </template>
+
+          <TableRow v-else>
+            <TableCell
+              col-span="{columns.length}"
+              class="h-24 text-center"
+            >
+              No results.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <div class="flex items-center justify-end space-x-2 py-4">
+      <div class="flex-1 text-sm text-muted-foreground">
+        {{ table.getFilteredSelectedRowModel().rows.length }} of
+        {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+      </div>
+      <div class="space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

From 6ab704a6fb0bbab93d092c9faa52b04e5a523b15 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Tue, 6 Feb 2024 05:36:59 +0330
Subject: [PATCH 25/29] feat: pin input (#325)

* feat: pin input

* chore: build registry

* chore: build registry, add form example

* chore: update demo abit

---------

Co-authored-by: zernonia <zernonia@gmail.com>
---
 apps/www/.vitepress/theme/config/docs.ts      |  6 ++
 apps/www/__registry__/index.ts                | 28 +++++++
 .../src/content/docs/components/pin-input.md  | 21 +++++
 .../registry/default/example/PinInputDemo.vue | 28 +++++++
 .../default/example/PinInputFormDemo.vue      | 78 +++++++++++++++++++
 .../default/ui/pin-input/PinInput.vue         | 21 +++++
 .../default/ui/pin-input/PinInputInput.vue    | 18 +++++
 .../registry/default/ui/pin-input/index.ts    |  2 +
 .../new-york/example/PinInputDemo.vue         | 28 +++++++
 .../new-york/example/PinInputFormDemo.vue     | 78 +++++++++++++++++++
 .../new-york/ui/pin-input/PinInput.vue        | 21 +++++
 .../new-york/ui/pin-input/PinInputInput.vue   | 18 +++++
 .../registry/new-york/ui/pin-input/index.ts   |  2 +
 apps/www/src/public/registry/index.json       | 13 ++++
 .../registry/styles/default/pin-input.json    | 22 ++++++
 .../registry/styles/new-york/pin-input.json   | 22 ++++++
 16 files changed, 406 insertions(+)
 create mode 100644 apps/www/src/content/docs/components/pin-input.md
 create mode 100644 apps/www/src/lib/registry/default/example/PinInputDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pin-input/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
 create mode 100644 apps/www/src/public/registry/styles/default/pin-input.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/pin-input.json

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 4f69dc39..7432c50a 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -254,6 +254,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/pagination',
           items: [],
         },
+        {
+          title: 'Pin Input',
+          href: '/docs/components/pin-input',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Popover',
           href: '/docs/components/popover',
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index c8ca92f4..3bee58c3 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -485,6 +485,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/PaginationDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/PaginationDemo.vue'],
     },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/default/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/default/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputFormDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
@@ -1390,6 +1404,20 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/PaginationDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/PaginationDemo.vue'],
     },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputFormDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/pin-input.md b/apps/www/src/content/docs/components/pin-input.md
new file mode 100644
index 00000000..207e11c4
--- /dev/null
+++ b/apps/www/src/content/docs/components/pin-input.md
@@ -0,0 +1,21 @@
+---
+title: PIN Input
+description: Allows users to input a sequence of one-character alphanumeric inputs.
+source: apps/www/src/lib/registry/default/ui/pin-input
+primitive: https://www.radix-vue.com/components/pin-input.html
+---
+
+<ComponentPreview name="PinInputDemo" /> 
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add pin-input
+```
+
+## Usage
+
+### Form
+
+<ComponentPreview name="PinInputFormDemo" /> 
diff --git a/apps/www/src/lib/registry/default/example/PinInputDemo.vue b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
new file mode 100644
index 00000000..fb5d5c93
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
+
+const value = ref<string[]>([])
+const handleComplete = (e: string[]) => alert(e.join(''))
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      class="flex gap-2 items-center mt-1"
+      @complete="handleComplete"
+    >
+      <PinInputInput
+        v-for="(id, index) in 5"
+        :key="id"
+        :index="index"
+      />
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
new file mode 100644
index 00000000..0f909a95
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { toast } from '@/lib/registry/default/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: [],
+  },
+})
+
+const onSubmit = handleSubmit(({ pin }) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),
+  })
+})
+
+const handleComplete = (e: string[]) => console.log(e.join(''))
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="pin">
+      <FormItem>
+        <FormLabel>OTP</FormLabel>
+        <FormControl>
+          <PinInput
+            id="pin-input"
+            placeholder="○"
+            class="flex gap-2 items-center mt-1"
+            otp
+            type="number"
+            :name="componentField.name"
+            @complete="handleComplete"
+            @update:model-value="(arrStr) => {
+              setValues({
+                pin: arrStr.filter(Boolean),
+              })
+            }"
+          >
+            <PinInputInput
+              v-for="(id, index) in 5"
+              :key="id"
+              :index="index"
+            />
+          </PinInput>
+        </FormControl>
+        <FormDescription>
+          Allows users to input a sequence of one-character alphanumeric inputs.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
new file mode 100644
index 00000000..9a5edb97
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
new file mode 100644
index 00000000..47eaccbe
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('flex w-10 h-10 text-center rounded-md border border-input bg-background 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)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/index.ts b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
new file mode 100644
index 00000000..ee290cc8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputInput } from './PinInputInput.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
new file mode 100644
index 00000000..0d8bacf2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+
+const value = ref<string[]>([])
+function handleComplete() {
+  console.log('212121')
+}
+</script>
+
+<template>
+  <PinInput
+    id="pin-input"
+    v-model="value"
+    placeholder="○"
+    class="flex gap-2 items-center mt-1"
+    @complete="handleComplete"
+  >
+    <PinInputInput
+      v-for="(id, index) in 5"
+      :key="id"
+      :index="index"
+    />
+  </PinInput>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
new file mode 100644
index 00000000..50b3345b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: [],
+  },
+})
+
+const onSubmit = handleSubmit(({ pin }) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),
+  })
+})
+
+const handleComplete = (e: string[]) => console.log(e.join(''))
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="pin">
+      <FormItem>
+        <FormLabel>OTP</FormLabel>
+        <FormControl>
+          <PinInput
+            id="pin-input"
+            placeholder="○"
+            class="flex gap-2 items-center mt-1"
+            otp
+            type="number"
+            :name="componentField.name"
+            @complete="handleComplete"
+            @update:model-value="(arrStr) => {
+              setValues({
+                pin: arrStr.filter(Boolean),
+              })
+            }"
+          >
+            <PinInputInput
+              v-for="(id, index) in 5"
+              :key="id"
+              :index="index"
+            />
+          </PinInput>
+        </FormControl>
+        <FormDescription>
+          Allows users to input a sequence of one-character alphanumeric inputs.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
new file mode 100644
index 00000000..9a5edb97
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
new file mode 100644
index 00000000..47eaccbe
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('flex w-10 h-10 text-center rounded-md border border-input bg-background 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)" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
new file mode 100644
index 00000000..ee290cc8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputInput } from './PinInputInput.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 9589b3b6..de3369a8 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -392,6 +392,19 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "pin-input",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/pin-input/PinInput.vue",
+      "ui/pin-input/PinInputInput.vue",
+      "ui/pin-input/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "popover",
     "dependencies": [],
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
new file mode 100644
index 00000000..ee35d2bf
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -0,0 +1,22 @@
+{
+  "name": "pin-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\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": "PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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('flex w-10 h-10 text-center rounded-md border border-input bg-background 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 PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..ee35d2bf
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/pin-input.json
@@ -0,0 +1,22 @@
+{
+  "name": "pin-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\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": "PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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('flex w-10 h-10 text-center rounded-md border border-input bg-background 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 PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file

From 25f4a7292aff32b9b02751b9ab2be94ca5373440 Mon Sep 17 00:00:00 2001
From: Lucas Nunes <2693803+lucascnunes@users.noreply.github.com>
Date: Tue, 6 Feb 2024 14:01:39 -0300
Subject: [PATCH 26/29] docs: minor fix to display the correct icon on dark
 mode (#326)

fixing the glitch when reloading the page on dark mode and the icon changing back to light mode.
---
 .../.vitepress/theme/layout/MainLayout.vue    | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 8ff32f0d..920487c5 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -138,17 +138,19 @@ watch(() => $route.path, (n) => {
               <component :is="link.icon" class="w-[20px] h-5" />
             </Button>
 
-            <Button
-              class="flex items-center justify-center"
-              aria-label="Toggle dark mode"
-              :variant="'ghost'"
-              :size="'icon'" @click="toggleDark()"
-            >
-              <component
-                :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                class="w-[20px] h-5 text-foreground"
-              />
-            </Button>
+            <ClientOnly>
+              <Button
+                class="flex items-center justify-center"
+                aria-label="Toggle dark mode"
+                :variant="'ghost'"
+                :size="'icon'" @click="toggleDark()"
+              >
+                <component
+                  :is="isDark ? RadixIconsSun : RadixIconsMoon"
+                  class="w-[20px] h-5 text-foreground"
+                />
+              </Button>
+            </ClientOnly>
           </div>
         </div>
       </div>

From aef277bbfe9e58c07d0e5b9116ca597b3c3eb7ee Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 7 Feb 2024 22:21:48 +0800
Subject: [PATCH 27/29] docs: update landing page

---
 .../.vitepress/theme/components/LandingPage.vue    |  5 +++--
 .../www/.vitepress/theme/components/PageAction.vue | 14 ++++++++++++++
 .../www/.vitepress/theme/components/PageHeader.vue |  2 +-
 .../theme/components/PageHeaderDescription.vue     |  2 +-
 .../theme/components/PageHeaderHeading.vue         |  2 +-
 apps/www/.vitepress/theme/config/site.ts           |  4 ++--
 .../www/.vitepress/theme/layout/ExamplesLayout.vue |  5 +++--
 7 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/PageAction.vue

diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index f853b49a..9dcff16c 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -2,6 +2,7 @@
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import { announcementConfig } from '../config/site'
 import GitHubIcon from '~icons/radix-icons/github-logo'
@@ -31,7 +32,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
       apps. Accessible. Customizable. Open Source.
     </PageHeaderDescription>
 
-    <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+    <PageAction>
       <a
         href="/docs/introduction"
         :class="cn(buttonVariants(), 'rounded-[6px]')"
@@ -49,7 +50,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
         <GitHubIcon class="mr-2 h-4 w-4" />
         GitHub
       </a>
-    </section>
+    </PageAction>
   </PageHeader>
   <ExamplesNav />
   <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
diff --git a/apps/www/.vitepress/theme/components/PageAction.vue b/apps/www/.vitepress/theme/components/PageAction.vue
new file mode 100644
index 00000000..4564c959
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/PageAction.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </section>
+</template>
diff --git a/apps/www/.vitepress/theme/components/PageHeader.vue b/apps/www/.vitepress/theme/components/PageHeader.vue
index 824c3068..72fc028c 100644
--- a/apps/www/.vitepress/theme/components/PageHeader.vue
+++ b/apps/www/.vitepress/theme/components/PageHeader.vue
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12',
+      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
index 40df01f2..24e04dd5 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <WrapBalancer :class="cn('max-w-[750px] text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
+  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
     <slot />
   </WrapBalancer>
 </template>
diff --git a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
index 32ad81a9..bab35a82 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :class="cn(
-      'text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
+      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/config/site.ts b/apps/www/.vitepress/theme/config/site.ts
index 060adca5..b1ba1608 100644
--- a/apps/www/.vitepress/theme/config/site.ts
+++ b/apps/www/.vitepress/theme/config/site.ts
@@ -15,6 +15,6 @@ export const siteConfig = {
 
 export const announcementConfig = {
   icon: '✨',
-  title: 'VSCode extension',
-  link: '/docs/installation.html#vscode-extension',
+  title: 'New components!',
+  link: '/docs/components/carousel.html',
 }
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index c81a3f9f..b1252643 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -2,6 +2,7 @@
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import { announcementConfig } from '../config/site'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
@@ -36,7 +37,7 @@ import { cn } from '@/lib/utils'
         components. Use this as a guide to build your own.
       </PageHeaderDescription>
 
-      <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+      <PageAction>
         <a
           href="/docs/introduction"
           :class="cn(buttonVariants(), 'rounded-[6px]')"
@@ -52,7 +53,7 @@ import { cn } from '@/lib/utils'
         >
           Components
         </a>
-      </section>
+      </PageAction>
     </PageHeader>
     <section>
       <ExamplesNav />

From 08d6ea6a5367ded2c911f934a12e41d51b448f48 Mon Sep 17 00:00:00 2001
From: Victor Garcia <76071376+TortitasT@users.noreply.github.com>
Date: Fri, 9 Feb 2024 13:27:05 +0100
Subject: [PATCH 28/29] docs: calendar typo (#330)

---
 apps/www/src/content/docs/components/sonner.md            | 2 +-
 apps/www/src/content/docs/components/toast.md             | 2 +-
 apps/www/src/lib/registry/default/example/SonnerDemo.vue  | 2 +-
 apps/www/src/lib/registry/default/example/ToastDemo.vue   | 2 +-
 apps/www/src/lib/registry/new-york/example/SonnerDemo.vue | 2 +-
 apps/www/src/lib/registry/new-york/example/ToastDemo.vue  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
index 0aa8298e..792b4352 100644
--- a/apps/www/src/content/docs/components/sonner.md
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -57,7 +57,7 @@ import { Button } from '@/components/ui/button'
       })
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>
 ```
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index fcba11d6..b2cc424e 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -61,7 +61,7 @@ const { toast } = useToast()
       });
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>
 ```
diff --git a/apps/www/src/lib/registry/default/example/SonnerDemo.vue b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
index da34f15c..17eba2d4 100644
--- a/apps/www/src/lib/registry/default/example/SonnerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
@@ -15,6 +15,6 @@ import { Button } from '@/lib/registry/default/ui/button'
       })
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/ToastDemo.vue b/apps/www/src/lib/registry/default/example/ToastDemo.vue
index abb8cbb7..273038ed 100644
--- a/apps/www/src/lib/registry/default/example/ToastDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToastDemo.vue
@@ -14,6 +14,6 @@ const { toast } = useToast()
       });
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
index c46d9482..cb5b7415 100644
--- a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
@@ -15,6 +15,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
       })
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToastDemo.vue b/apps/www/src/lib/registry/new-york/example/ToastDemo.vue
index 041565e1..c6b0c02d 100644
--- a/apps/www/src/lib/registry/new-york/example/ToastDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToastDemo.vue
@@ -14,6 +14,6 @@ const { toast } = useToast()
       });
     }"
   >
-    Add to calander
+    Add to calendar
   </Button>
 </template>

From 41660d36cdb0d4eb8b22ab1efe815d6a5c1fb4a9 Mon Sep 17 00:00:00 2001
From: Jared Jolton <2PacIsAlive@users.noreply.github.com>
Date: Sun, 11 Feb 2024 12:34:37 -0700
Subject: [PATCH 29/29] docs: add line highlighting for resolve paths
 instructions (#331)

---
 .../www/src/content/docs/installation/vite.md | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 314f0790..65fc6d67 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -24,7 +24,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
 
 <TabsMarkdown>
-  <TabMarkdown title="vite.config.ts">
+  <TabMarkdown title="vite.config">
 
   Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
 
@@ -34,7 +34,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
   #### `vite.config`
 
-  ```typescript {5,6,10-14}
+  ```typescript {5,6,9-13}
   import path from "path"
   import { defineConfig } from "vite"
   import vue from "@vitejs/plugin-vue"
@@ -43,13 +43,17 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
   import autoprefixer from "autoprefixer"
 
   export default defineConfig({
-    plugins: [vue()],
     css: {
       postcss: {
         plugins: [tailwind(), autoprefixer()],
       },
     },
-    resolve: {...}
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
   })
   ```
 
@@ -81,10 +85,16 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
 Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
 
-```typescript
-"baseUrl": ".",
-"paths": {
-  "@/*": ["./src/*"]
+```json {4-7}
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+    // ...
+  }
 }
 ```
 
@@ -97,12 +107,17 @@ Add the code below to the vite.config.ts so your app can resolve paths without e
 npm i -D @types/node
 ```
 
-```typescript
+```typescript {12-16}
 import path from "path"
 import vue from "@vitejs/plugin-vue"
 import { defineConfig } from "vite"
 
 export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [tailwind(), autoprefixer()],
+    },
+  },
   plugins: [vue()],
   resolve: {
     alias: {