From cfccb8e510e04afe3f42fe8d48d6aca55537a596 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 11 Apr 2024 18:42:20 +0330
Subject: [PATCH] feat: new calendar components (#468)

---
 .../theme/components/theming/Theming.vue      |  18 +-
 apps/www/.vitepress/theme/config/docs.ts      |  16 +-
 apps/www/__registry__/index.ts                | 176 ++++-
 apps/www/package.json                         |   7 +-
 .../src/content/docs/components/calendar.md   |  87 +--
 .../content/docs/components/date-picker.md    |  71 +-
 .../content/docs/components/range-calendar.md |  18 +
 .../src/content/docs/components/v-calendar.md |  91 +++
 .../content/docs/components/v-date-picker.md  |  79 +++
 .../dashboard/components/DateRangePicker.vue  |  53 +-
 .../examples/forms/components/AccountForm.vue |  63 +-
 .../registry/default/example/CalendarDemo.vue |   7 +-
 .../registry/default/example/CalendarForm.vue | 105 +++
 .../default/example/CalendarWithSelect.vue    | 127 ++++
 .../default/example/DatePickerDemo.vue        |  34 +-
 .../default/example/DatePickerForm.vue        |  70 +-
 .../default/example/DatePickerWithPresets.vue |  77 +--
 .../default/example/DatePickerWithRange.vue   |  88 +--
 .../default/example/RangeCalendarDemo.vue     |  18 +
 .../default/example/VCalendarDemo.vue         |  10 +
 .../default/example/VDatePickerDemo.vue       |  36 +
 .../default/example/VDatePickerForm.vue       |  79 +++
 .../example/VDatePickerWithPresets.vue        |  73 +++
 .../default/example/VDatePickerWithRange.vue  |  51 ++
 ...PickerDemo.vue => VDateTimePickerDemo.vue} |   2 +-
 ...rWithSlot.vue => VRangePickerWithSlot.vue} |   2 +-
 .../registry/default/ui/calendar/Calendar.vue | 369 ++---------
 .../default/ui/calendar/CalendarCell.vue      |  24 +
 .../ui/calendar/CalendarCellTrigger.vue       |  38 ++
 .../default/ui/calendar/CalendarGrid.vue      |  24 +
 .../default/ui/calendar/CalendarGridBody.vue  |  11 +
 .../default/ui/calendar/CalendarGridHead.vue  |  11 +
 .../default/ui/calendar/CalendarGridRow.vue   |  21 +
 .../default/ui/calendar/CalendarHeadCell.vue  |  21 +
 .../default/ui/calendar/CalendarHeader.vue    |  21 +
 .../default/ui/calendar/CalendarHeading.vue   |  27 +
 .../ui/calendar/CalendarNextButton.vue        |  32 +
 .../ui/calendar/CalendarPrevButton.vue        |  32 +
 .../lib/registry/default/ui/calendar/index.ts |  32 +-
 .../ui/range-calendar/RangeCalendar.vue       |  60 ++
 .../ui/range-calendar/RangeCalendarCell.vue   |  24 +
 .../RangeCalendarCellTrigger.vue              |  40 ++
 .../ui/range-calendar/RangeCalendarGrid.vue   |  24 +
 .../range-calendar/RangeCalendarGridBody.vue  |  11 +
 .../range-calendar/RangeCalendarGridHead.vue  |  11 +
 .../range-calendar/RangeCalendarGridRow.vue   |  21 +
 .../range-calendar/RangeCalendarHeadCell.vue  |  21 +
 .../ui/range-calendar/RangeCalendarHeader.vue |  21 +
 .../range-calendar/RangeCalendarHeading.vue   |  27 +
 .../RangeCalendarNextButton.vue               |  32 +
 .../RangeCalendarPrevButton.vue               |  32 +
 .../default/ui/range-calendar/index.ts        |  12 +
 .../default/ui/v-calendar/Calendar.vue        | 331 ++++++++++
 .../registry/default/ui/v-calendar/index.ts   |  22 +
 .../new-york/example/CalendarDemo.vue         |   7 +-
 .../new-york/example/CalendarForm.vue         | 105 +++
 .../new-york/example/CalendarWithSelect.vue   | 127 ++++
 .../new-york/example/Cards/ActivityGoal.vue   |   2 +-
 .../new-york/example/DatePickerDemo.vue       |  34 +-
 .../new-york/example/DatePickerForm.vue       |  70 +-
 .../example/DatePickerWithPresets.vue         |  77 +--
 .../new-york/example/DatePickerWithRange.vue  |  88 +--
 .../new-york/example/RangeCalendarDemo.vue    |  18 +
 .../new-york/example/VCalendarDemo.vue        |  10 +
 .../new-york/example/VDatePickerDemo.vue      |  36 +
 .../new-york/example/VDatePickerForm.vue      |  79 +++
 .../example/VDatePickerWithPresets.vue        |  73 +++
 .../new-york/example/VDatePickerWithRange.vue |  51 ++
 ...PickerDemo.vue => VDateTimePickerDemo.vue} |   4 +-
 ...rWithSlot.vue => VRangePickerWithSlot.vue} |   2 +-
 .../new-york/ui/calendar/Calendar.vue         | 365 ++---------
 .../new-york/ui/calendar/CalendarCell.vue     |  24 +
 .../ui/calendar/CalendarCellTrigger.vue       |  38 ++
 .../new-york/ui/calendar/CalendarGrid.vue     |  24 +
 .../new-york/ui/calendar/CalendarGridBody.vue |  11 +
 .../new-york/ui/calendar/CalendarGridHead.vue |  12 +
 .../new-york/ui/calendar/CalendarGridRow.vue  |  21 +
 .../new-york/ui/calendar/CalendarHeadCell.vue |  21 +
 .../new-york/ui/calendar/CalendarHeader.vue   |  21 +
 .../new-york/ui/calendar/CalendarHeading.vue  |  27 +
 .../ui/calendar/CalendarNextButton.vue        |  32 +
 .../ui/calendar/CalendarPrevButton.vue        |  32 +
 .../registry/new-york/ui/calendar/index.ts    |  32 +-
 .../ui/range-calendar/RangeCalendar.vue       |  60 ++
 .../ui/range-calendar/RangeCalendarCell.vue   |  24 +
 .../RangeCalendarCellTrigger.vue              |  40 ++
 .../ui/range-calendar/RangeCalendarGrid.vue   |  24 +
 .../range-calendar/RangeCalendarGridBody.vue  |  11 +
 .../range-calendar/RangeCalendarGridHead.vue  |  11 +
 .../range-calendar/RangeCalendarGridRow.vue   |  21 +
 .../range-calendar/RangeCalendarHeadCell.vue  |  21 +
 .../ui/range-calendar/RangeCalendarHeader.vue |  21 +
 .../range-calendar/RangeCalendarHeading.vue   |  27 +
 .../RangeCalendarNextButton.vue               |  32 +
 .../RangeCalendarPrevButton.vue               |  32 +
 .../new-york/ui/range-calendar/index.ts       |  12 +
 .../new-york/ui/v-calendar/Calendar.vue       | 325 +++++++++
 .../registry/new-york/ui/v-calendar/index.ts  |  22 +
 apps/www/src/public/registry/colors/gray.json |   2 +-
 .../www/src/public/registry/colors/index.json |   2 +-
 apps/www/src/public/registry/colors/lime.json |   2 +-
 .../src/public/registry/colors/neutral.json   |   2 +-
 .../www/src/public/registry/colors/slate.json |   2 +-
 .../www/src/public/registry/colors/stone.json |   2 +-
 apps/www/src/public/registry/colors/zinc.json |   2 +-
 apps/www/src/public/registry/index.json       |  56 +-
 .../registry/styles/default/accordion.json    |   2 +-
 .../registry/styles/default/alert-dialog.json |   2 +-
 .../public/registry/styles/default/alert.json |   2 +-
 .../registry/styles/default/aspect-ratio.json |   2 +-
 .../registry/styles/default/avatar.json       |   2 +-
 .../public/registry/styles/default/badge.json |   2 +-
 .../registry/styles/default/breadcrumb.json   |   2 +-
 .../registry/styles/default/button.json       |   2 +-
 .../registry/styles/default/calendar.json     |  53 +-
 .../public/registry/styles/default/card.json  |   2 +-
 .../registry/styles/default/carousel.json     |   2 +-
 .../registry/styles/default/checkbox.json     |   2 +-
 .../registry/styles/default/collapsible.json  |   2 +-
 .../registry/styles/default/command.json      |   2 +-
 .../registry/styles/default/context-menu.json |   2 +-
 .../registry/styles/default/dialog.json       |   2 +-
 .../registry/styles/default/drawer.json       |   2 +-
 .../styles/default/dropdown-menu.json         |   2 +-
 .../public/registry/styles/default/form.json  |   2 +-
 .../registry/styles/default/hover-card.json   |   2 +-
 .../public/registry/styles/default/input.json |   2 +-
 .../public/registry/styles/default/label.json |   2 +-
 .../registry/styles/default/menubar.json      |   2 +-
 .../styles/default/navigation-menu.json       |   2 +-
 .../registry/styles/default/pagination.json   |   2 +-
 .../registry/styles/default/pin-input.json    |   2 +-
 .../registry/styles/default/popover.json      |   2 +-
 .../registry/styles/default/progress.json     |   2 +-
 .../registry/styles/default/radio-group.json  |   2 +-
 .../styles/default/range-calendar.json        |  63 ++
 .../registry/styles/default/resizable.json    |   2 +-
 .../registry/styles/default/scroll-area.json  |   2 +-
 .../registry/styles/default/select.json       |   2 +-
 .../registry/styles/default/separator.json    |   2 +-
 .../public/registry/styles/default/sheet.json |   2 +-
 .../registry/styles/default/skeleton.json     |   2 +-
 .../registry/styles/default/slider.json       |   2 +-
 .../registry/styles/default/sonner.json       |   2 +-
 .../registry/styles/default/switch.json       |   2 +-
 .../public/registry/styles/default/table.json |   2 +-
 .../public/registry/styles/default/tabs.json  |   2 +-
 .../registry/styles/default/tags-input.json   |   2 +-
 .../registry/styles/default/textarea.json     |   2 +-
 .../public/registry/styles/default/toast.json |   2 +-
 .../registry/styles/default/toggle-group.json |   2 +-
 .../registry/styles/default/toggle.json       |   2 +-
 .../registry/styles/default/tooltip.json      |   2 +-
 .../registry/styles/default/v-calendar.json   |  22 +
 .../www/src/public/registry/styles/index.json |   2 +-
 .../registry/styles/new-york/accordion.json   |   2 +-
 .../styles/new-york/alert-dialog.json         |   2 +-
 .../registry/styles/new-york/alert.json       |   2 +-
 .../styles/new-york/aspect-ratio.json         |   2 +-
 .../registry/styles/new-york/avatar.json      |   2 +-
 .../registry/styles/new-york/badge.json       |   2 +-
 .../registry/styles/new-york/breadcrumb.json  |   2 +-
 .../registry/styles/new-york/button.json      |   2 +-
 .../registry/styles/new-york/calendar.json    |  53 +-
 .../public/registry/styles/new-york/card.json |   2 +-
 .../registry/styles/new-york/carousel.json    |   2 +-
 .../registry/styles/new-york/checkbox.json    |   2 +-
 .../registry/styles/new-york/collapsible.json |   2 +-
 .../registry/styles/new-york/command.json     |   2 +-
 .../styles/new-york/context-menu.json         |   2 +-
 .../registry/styles/new-york/dialog.json      |   2 +-
 .../registry/styles/new-york/drawer.json      |   2 +-
 .../styles/new-york/dropdown-menu.json        |   2 +-
 .../public/registry/styles/new-york/form.json |   2 +-
 .../registry/styles/new-york/hover-card.json  |   2 +-
 .../registry/styles/new-york/input.json       |   2 +-
 .../registry/styles/new-york/label.json       |   2 +-
 .../registry/styles/new-york/menubar.json     |   2 +-
 .../styles/new-york/navigation-menu.json      |   2 +-
 .../registry/styles/new-york/pagination.json  |   2 +-
 .../registry/styles/new-york/pin-input.json   |   2 +-
 .../registry/styles/new-york/popover.json     |   2 +-
 .../registry/styles/new-york/progress.json    |   2 +-
 .../registry/styles/new-york/radio-group.json |   2 +-
 .../styles/new-york/range-calendar.json       |  63 ++
 .../registry/styles/new-york/resizable.json   |   2 +-
 .../registry/styles/new-york/scroll-area.json |   2 +-
 .../registry/styles/new-york/select.json      |   2 +-
 .../registry/styles/new-york/separator.json   |   2 +-
 .../registry/styles/new-york/sheet.json       |   2 +-
 .../registry/styles/new-york/skeleton.json    |   2 +-
 .../registry/styles/new-york/slider.json      |   2 +-
 .../registry/styles/new-york/sonner.json      |   2 +-
 .../registry/styles/new-york/switch.json      |   2 +-
 .../registry/styles/new-york/table.json       |   2 +-
 .../public/registry/styles/new-york/tabs.json |   2 +-
 .../registry/styles/new-york/tags-input.json  |   2 +-
 .../registry/styles/new-york/textarea.json    |   2 +-
 .../registry/styles/new-york/toast.json       |   2 +-
 .../styles/new-york/toggle-group.json         |   2 +-
 .../registry/styles/new-york/toggle.json      |   2 +-
 .../registry/styles/new-york/tooltip.json     |   2 +-
 .../registry/styles/new-york/v-calendar.json  |  22 +
 apps/www/tsconfig.json                        |   1 -
 pnpm-lock.yaml                                | 614 +++++-------------
 205 files changed, 4389 insertions(+), 1690 deletions(-)
 create mode 100644 apps/www/src/content/docs/components/range-calendar.md
 create mode 100644 apps/www/src/content/docs/components/v-calendar.md
 create mode 100644 apps/www/src/content/docs/components/v-date-picker.md
 create mode 100644 apps/www/src/lib/registry/default/example/CalendarForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
 create mode 100644 apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/VCalendarDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/VDatePickerForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
 create mode 100644 apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
 rename apps/www/src/lib/registry/default/example/{DateTimePickerDemo.vue => VDateTimePickerDemo.vue} (93%)
 rename apps/www/src/lib/registry/default/example/{RangePickerWithSlot.vue => VRangePickerWithSlot.vue} (96%)
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/range-calendar/index.ts
 create mode 100644 apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/v-calendar/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/CalendarForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
 rename apps/www/src/lib/registry/new-york/example/{DateTimePickerDemo.vue => VDateTimePickerDemo.vue} (93%)
 rename apps/www/src/lib/registry/new-york/example/{RangePickerWithSlot.vue => VRangePickerWithSlot.vue} (96%)
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts
 create mode 100644 apps/www/src/public/registry/styles/default/range-calendar.json
 create mode 100644 apps/www/src/public/registry/styles/default/v-calendar.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/range-calendar.json
 create mode 100644 apps/www/src/public/registry/styles/new-york/v-calendar.json

diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index a3047b9a..bf3b949e 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { addDays, startOfToday } from 'date-fns'
+import { type Ref, ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { getLocalTimeZone, today } from '@internationalized/date'
+
 import ThemingLayout from './../../layout/ThemingLayout.vue'
 
 import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
@@ -19,12 +21,14 @@ import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
 import {
   Card,
 } from '@/lib/registry/new-york/ui/card'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+
+const now = today(getLocalTimeZone())
 
 const range = ref({
-  start: startOfToday(),
-  end: addDays(startOfToday(), 8),
-})
+  start: now,
+  end: now.add({ days: 8 }),
+}) as Ref<DateRange>
 </script>
 
 <template>
@@ -52,7 +56,7 @@ const range = ref({
       <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
         <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
           <Card class="max-w-[280px]">
-            <Calendar v-model.range="range" />
+            <RangeCalendar v-model="range" />
           </Card>
 
           <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index a3056849..71fce55a 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -106,7 +106,6 @@ export const docsConfig: DocsConfig = {
           title: 'Contribution',
           href: '/docs/contribution',
           items: [],
-          label: 'New',
         },
       ],
     },
@@ -172,7 +171,6 @@ export const docsConfig: DocsConfig = {
           title: 'Breadcrumb',
           href: '/docs/components/breadcrumb',
           items: [],
-          label: 'New',
         },
         {
           title: 'Button',
@@ -183,6 +181,7 @@ export const docsConfig: DocsConfig = {
           title: 'Calendar',
           href: '/docs/components/calendar',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Card',
@@ -192,7 +191,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Carousel',
           href: '/docs/components/carousel',
-          label: 'New',
           items: [],
         },
         {
@@ -229,6 +227,7 @@ export const docsConfig: DocsConfig = {
           title: 'Date Picker',
           href: '/docs/components/date-picker',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Dialog',
@@ -239,7 +238,6 @@ export const docsConfig: DocsConfig = {
           title: 'Drawer',
           href: '/docs/components/drawer',
           items: [],
-          label: 'New',
         },
         {
           title: 'Dropdown Menu',
@@ -284,7 +282,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Pin Input',
           href: '/docs/components/pin-input',
-          label: 'New',
           items: [],
         },
         {
@@ -302,10 +299,15 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/radio-group',
           items: [],
         },
+        {
+          title: 'Range Calendar',
+          href: '/docs/components/range-calendar',
+          items: [],
+          label: 'New',
+        },
         {
           title: 'Resizable',
           href: '/docs/components/resizable',
-          label: 'New',
           items: [],
         },
         {
@@ -341,7 +343,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Sonner',
           href: '/docs/components/sonner',
-          label: 'New',
           items: [],
         },
         {
@@ -362,7 +363,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Tags Input',
           href: '/docs/components/tags-input',
-          label: 'New',
           items: [],
         },
         {
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 265902db..15a985b9 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -192,6 +192,20 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/CalendarDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CalendarDemo.vue"],
     },
+    "CalendarForm": {
+      name: "CalendarForm",
+      type: "components:example",
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      component: () => import("../src/lib/registry/default/example/CalendarForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/CalendarForm.vue"],
+    },
+    "CalendarWithSelect": {
+      name: "CalendarWithSelect",
+      type: "components:example",
+      registryDependencies: ["calendar","select","utils"],
+      component: () => import("../src/lib/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/CalendarWithSelect.vue"],
+    },
     "CardChat": {
       name: "CardChat",
       type: "components:example",
@@ -398,38 +412,31 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
+      registryDependencies: ["calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerDemo.vue"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","form","popover","toast"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerForm.vue"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover","select"],
+      registryDependencies: ["calendar","button","popover","select","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerWithPresets.vue"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerWithRange.vue"],
     },
-    "DateTimePickerDemo": {
-      name: "DateTimePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/default/example/DateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DateTimePickerDemo.vue"],
-    },
     "DialogCustomCloseButton": {
       name: "DialogCustomCloseButton",
       type: "components:example",
@@ -654,12 +661,12 @@ 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",
+    "RangeCalendarDemo": {
+      name: "RangeCalendarDemo",
       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"],
+      registryDependencies: ["range-calendar"],
+      component: () => import("../src/lib/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/RangeCalendarDemo.vue"],
     },
     "ResizableDemo": {
       name: "ResizableDemo",
@@ -1081,6 +1088,55 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/TypographyTable.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TypographyTable.vue"],
     },
+    "VCalendarDemo": {
+      name: "VCalendarDemo",
+      type: "components:example",
+      registryDependencies: ["v-calendar"],
+      component: () => import("../src/lib/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VCalendarDemo.vue"],
+    },
+    "VDatePickerDemo": {
+      name: "VDatePickerDemo",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VDatePickerDemo.vue"],
+    },
+    "VDatePickerForm": {
+      name: "VDatePickerForm",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
+      component: () => import("../src/lib/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VDatePickerForm.vue"],
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover","select"],
+      component: () => import("../src/lib/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VDatePickerWithPresets.vue"],
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VDatePickerWithRange.vue"],
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VDateTimePickerDemo.vue"],
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/VRangePickerWithSlot.vue"],
+    },
     "ActivityGoal": {
       name: "ActivityGoal",
       type: "components:example",
@@ -1369,6 +1425,20 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CalendarDemo.vue"],
     },
+    "CalendarForm": {
+      name: "CalendarForm",
+      type: "components:example",
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      component: () => import("../src/lib/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/CalendarForm.vue"],
+    },
+    "CalendarWithSelect": {
+      name: "CalendarWithSelect",
+      type: "components:example",
+      registryDependencies: ["calendar","select","utils"],
+      component: () => import("../src/lib/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/CalendarWithSelect.vue"],
+    },
     "CardChat": {
       name: "CardChat",
       type: "components:example",
@@ -1575,38 +1645,31 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
+      registryDependencies: ["calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerDemo.vue"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","form","popover","toast"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerForm.vue"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover","select"],
+      registryDependencies: ["calendar","button","popover","select","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerWithPresets.vue"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerWithRange.vue"],
     },
-    "DateTimePickerDemo": {
-      name: "DateTimePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/new-york/example/DateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DateTimePickerDemo.vue"],
-    },
     "DialogCustomCloseButton": {
       name: "DialogCustomCloseButton",
       type: "components:example",
@@ -1831,12 +1894,12 @@ 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",
+    "RangeCalendarDemo": {
+      name: "RangeCalendarDemo",
       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"],
+      registryDependencies: ["range-calendar"],
+      component: () => import("../src/lib/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/RangeCalendarDemo.vue"],
     },
     "ResizableDemo": {
       name: "ResizableDemo",
@@ -2258,6 +2321,55 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TypographyTable.vue"],
     },
+    "VCalendarDemo": {
+      name: "VCalendarDemo",
+      type: "components:example",
+      registryDependencies: ["v-calendar"],
+      component: () => import("../src/lib/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VCalendarDemo.vue"],
+    },
+    "VDatePickerDemo": {
+      name: "VDatePickerDemo",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VDatePickerDemo.vue"],
+    },
+    "VDatePickerForm": {
+      name: "VDatePickerForm",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
+      component: () => import("../src/lib/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VDatePickerForm.vue"],
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover","select"],
+      component: () => import("../src/lib/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VDatePickerWithPresets.vue"],
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VDatePickerWithRange.vue"],
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VDateTimePickerDemo.vue"],
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      type: "components:example",
+      registryDependencies: ["utils","button","v-calendar","popover"],
+      component: () => import("../src/lib/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/VRangePickerWithSlot.vue"],
+    },
     "ActivityGoal": {
       name: "ActivityGoal",
       type: "components:example",
diff --git a/apps/www/package.json b/apps/www/package.json
index 1b1ba221..5736c2c1 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
+    "@internationalized/date": "^3.5.2",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
     "@tanstack/vue-table": "^8.14.0",
@@ -32,7 +33,7 @@
     "embla-carousel-vue": "^8.0.0",
     "lucide-vue-next": "^0.359.0",
     "magic-string": "^0.30.8",
-    "radix-vue": "^1.6.2",
+    "radix-vue": "^1.7.0",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.1.0",
@@ -67,8 +68,8 @@
     "tsx": "^4.7.1",
     "typescript": "^5.4.2",
     "unplugin-icons": "^0.18.5",
-    "vite": "^5.2.2",
-    "vitepress": "^1.0.0-rc.45",
+    "vite": "^5.2.7",
+    "vitepress": "^1.0.1",
     "vue-tsc": "^2.0.7"
   }
 }
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 416aa0f8..9447d118 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -2,90 +2,41 @@
 title: Calendar
 description: A date field component that allows users to enter and edit date.
 source: apps/www/src/lib/registry/default/ui/calendar
-primitive: https://vcalendar.io/
+primitive: https://www.radix-vue.com/components/calendar.html
 ---
 
-<ComponentPreview name="CalendarDemo"  />
+<ComponentPreview name="CalendarDemo" />
+
+<Callout class="text-base mt-12">
+
+If you're looking for **previous** Calendar implementation, checkout to <span class="font-bold underline">[VCalendar](/docs/components/v-calendar)</span> component
+
+</Callout>
 
 ## About
 
-The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/getting-started/installation.html).
+The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+
+If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
 ```bash
 npx shadcn-vue@latest add calendar
 ```
-</template>
 
-<template #Manual>
+## Datepicker
 
-<Steps>
+You can use the `<Calendar />` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
 
-### Install the following dependency
+## Examples
 
-```bash
-npm install v-calendar
-```
+### Form
 
-### Copy and paste the following code into your project
+<ComponentPreview name="CalendarForm" />
 
-<<< @/lib/registry/default/ui/calendar/Calendar.vue
+## Advanced Customization
 
-</Steps>
+### Month & Year Selects
 
-</template>
-</TabPreview>
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/calendar'
-</script>
-
-<template>
-  <Calendar />
-</template>
-```
-
-The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
-
-### Slots
-
-The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
-
-- `day-content`
-- `day-popover`
-- `dp-footer`
-- `footer`
-- `header-title-wrapper`
-- `header-title`
-- `header-prev-button`
-- `header-next-button`
-- `nav`
-- `nav-prev-button`
-- `nav-next-button`
-- `page`
-- `time-header`
-
-Example using the `day-content` slot:
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/calendar'
-</script>
-
-<template>
-  <Calendar>
-    <template #day-content="{ day, dayProps, dayEvents }">
-      <div v-bind="dayProps" v-on="dayEvents">
-        {{ day.label }}
-      </div>
-    </template>
-  </Calendar>
-</template>
-```
+<ComponentPreview name="CalendarWithSelect" />
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 7416c51c..6073c593 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -1,79 +1,38 @@
 ---
 title: Date Picker
 description: A date picker component with range and presets.
+source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+primitive: https://www.radix-vue.com/components/calendar.html
 ---
 
-<ComponentPreview name="DatePickerDemo"  />
+<ComponentPreview name="DatePickerDemo" />
+
+<Callout class="text-base mt-12">
+
+If you're looking for **previous** Date Picker implementation, checkout to <span class="font-bold underline">[VCalendar Datepicker](/docs/components/v-date-picker)</span> component
+
+</Callout>
 
 ## Installation
 
-The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+The Date Picker is built using a composition of the `<Popover />` and either the `<Calendar />` or `<RangeCalendar />` components.
 
-See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>
-```
+See installations instructions for the [Popover](/docs/components/popover), [Calendar](/docs/components/calendar), and [Range Calendar](/docs/components/range-calendar) components.
 
 ## Examples
 
 ### Date Picker
 
-<ComponentPreview name="DatePickerDemo"  />
+<ComponentPreview name="DatePickerDemo" />
 
 ### Date Range Picker
 
-<ComponentPreview name="DatePickerWithRange"  />
-
-### Date Time Picker
-
-<ComponentPreview name="DateTimePickerDemo"  />
+<ComponentPreview name="DatePickerWithRange" />
 
 ### With Presets
 
-<ComponentPreview name="DatePickerWithPresets"  />
-
-### With Slot
-
-<ComponentPreview name="RangePickerWithSlot"  />
+<ComponentPreview name="DatePickerWithPresets" />
 
 ### Form
 
-<ComponentPreview name="DatePickerForm"  />
+<ComponentPreview name="DatePickerForm" />
diff --git a/apps/www/src/content/docs/components/range-calendar.md b/apps/www/src/content/docs/components/range-calendar.md
new file mode 100644
index 00000000..b8ea7312
--- /dev/null
+++ b/apps/www/src/content/docs/components/range-calendar.md
@@ -0,0 +1,18 @@
+---
+title: Range Calendar
+description: A calendar component that allows users to select a range of dates.
+source: apps/www/src/lib/registry/default/ui/range-calendar
+primitive: https://www.radix-vue.com/components/range-calendar.html
+---
+
+<ComponentPreview name="RangeCalendarDemo" />
+
+## About
+
+The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.bits-ui.com/docs/components/range-calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add range-calendar
+```
diff --git a/apps/www/src/content/docs/components/v-calendar.md b/apps/www/src/content/docs/components/v-calendar.md
new file mode 100644
index 00000000..c5c9b097
--- /dev/null
+++ b/apps/www/src/content/docs/components/v-calendar.md
@@ -0,0 +1,91 @@
+---
+title: VCalendar
+description: A date field component that allows users to enter and edit date.
+source: apps/www/src/lib/registry/default/ui/calendar
+primitive: https://vcalendar.io/
+---
+
+<ComponentPreview name="VCalendarDemo" />
+
+## About
+
+The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/getting-started/installation.html).
+
+## Installation
+
+<TabPreview name="CLI">
+<template #CLI>
+
+```bash
+npx shadcn-vue@latest add v-calendar
+```
+</template>
+
+<template #Manual>
+
+<Steps>
+
+### Install the following dependency
+
+```bash
+npm install v-calendar
+```
+
+### Copy and paste the following code into your project
+
+<<< @/lib/registry/default/ui/v-calendar/Calendar.vue
+
+</Steps>
+
+</template>
+</TabPreview>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Calendar } from '@/components/ui/v-calendar'
+</script>
+
+<template>
+  <Calendar />
+</template>
+```
+
+The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
+
+### Slots
+
+The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
+
+- `day-content`
+- `day-popover`
+- `dp-footer`
+- `footer`
+- `header-title-wrapper`
+- `header-title`
+- `header-prev-button`
+- `header-next-button`
+- `nav`
+- `nav-prev-button`
+- `nav-next-button`
+- `page`
+- `time-header`
+
+Example using the `day-content` slot:
+
+```vue
+<script setup lang="ts">
+import { Calendar } from '@/components/ui/v-calendar'
+</script>
+
+<template>
+  <Calendar>
+    <template #day-content="{ day, dayProps, dayEvents }">
+      <div v-bind="dayProps" v-on="dayEvents">
+        {{ day.label }}
+      </div>
+    </template>
+  </Calendar>
+</template>
+```
diff --git a/apps/www/src/content/docs/components/v-date-picker.md b/apps/www/src/content/docs/components/v-date-picker.md
new file mode 100644
index 00000000..219e36c5
--- /dev/null
+++ b/apps/www/src/content/docs/components/v-date-picker.md
@@ -0,0 +1,79 @@
+---
+title: VCalendar Date Picker
+description: A date picker component with range and presets.
+---
+
+<ComponentPreview name="VDatePickerDemo"  />
+
+## Installation
+
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/v-calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" />
+    </PopoverContent>
+  </Popover>
+</template>
+```
+
+## Examples
+
+### Date Picker
+
+<ComponentPreview name="VDatePickerDemo"  />
+
+### Date Range Picker
+
+<ComponentPreview name="VDatePickerWithRange"  />
+
+### Date Time Picker
+
+<ComponentPreview name="VDateTimePickerDemo"  />
+
+### With Presets
+
+<ComponentPreview name="VDatePickerWithPresets"  />
+
+### With Slot
+
+<ComponentPreview name="VRangePickerWithSlot"  />
+
+### Form
+
+<ComponentPreview name="VDatePickerForm"  />
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 87e7f589..2763319f 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 
-import { ref } from 'vue'
+import { type Ref, ref } from '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 { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
 
-const date = ref({
-  start: new Date(2023, 0, 20),
-  end: addDays(new Date(2023, 0, 20), 20),
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
 })
+
+const calendarDate = new CalendarDate(2023, 0, 20)
+
+const value = ref({
+  start: calendarDate,
+  end: calendarDate.add({ days: 20 }),
+}) as Ref<DateRange>
 </script>
 
 <template>
@@ -26,24 +33,34 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[260px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
+            'w-[300px] justify-start text-left font-normal',
+            !value && '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>
+          <template v-if="value.start">
+            <template v-if="value.end">
+              {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+            </template>
+
+            <template v-else>
+              {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+            </template>
+          </template>
+          <template v-else>
+            Pick a date
+          </template>
         </Button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" :align="'end'">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
+      <PopoverContent class="w-auto p-0" align="end">
+        <RangeCalendar
+          v-model="value"
+          weekday-format="short"
+          :number-of-months="2"
+          initial-focus
+          :placeholder="value.start"
+          @update:start-value="(startDate) => value.start = startDate"
         />
       </PopoverContent>
     </Popover>
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 084701fc..5523180c 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { h, ref } from 'vue'
 import * as z from 'zod'
-import { format } from 'date-fns'
+import { toDate } from 'radix-vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
 import { cn } from '@/lib/utils'
 
 import RadixIconsCalendar from '~icons/radix-icons/calendar'
 
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
 import {
@@ -18,17 +19,19 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/default/ui/command'
+} from '@/lib/registry/new-york/ui/command'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/lib/registry/new-york/ui/popover'
 import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
 const open = ref(false)
+const dateValue = ref()
+const placeholder = ref()
 
 const languages = [
   { label: 'English', value: 'en' },
@@ -42,25 +45,25 @@ const languages = [
   { label: 'Chinese', value: 'zh' },
 ] as const
 
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
 const accountFormSchema = toTypedSchema(z.object({
   name: z
-    .string()
+    .string({
+      required_error: 'Required.',
+    })
     .min(2, {
       message: 'Name must be at least 2 characters.',
     })
     .max(30, {
       message: 'Name must not be longer than 30 characters.',
     }),
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
-  language: z.string().nonempty({
-    message: 'Please select a language.',
-  }),
+  dob: z.string().datetime().optional().refine(date => date !== undefined, 'Please select a valid date.'),
+  language: z.string().min(1, 'Please select a language.'),
 }))
 
-const filterFunction = (list: typeof languages, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase()))
-
 // https://github.com/logaretm/vee-validate/issues/3521
 // https://github.com/logaretm/vee-validate/discussions/3571
 async function onSubmit(values: any) {
@@ -95,7 +98,7 @@ async function onSubmit(values: any) {
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ componentField, value }" name="dob">
+    <FormField v-slot="{ field, value }" name="dob">
       <FormItem class="flex flex-col">
         <FormLabel>Date of birth</FormLabel>
         <Popover>
@@ -103,17 +106,38 @@ async function onSubmit(values: any) {
             <FormControl>
               <Button
                 variant="outline" :class="cn(
-                  'w-[280px] pl-3 text-left font-normal',
+                  'w-[240px] justify-start text-left font-normal',
                   !value && 'text-muted-foreground',
                 )"
               >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
-                <RadixIconsCalendar class="ml-auto h-4 w-4 opacity-50" />
+                <RadixIconsCalendar class="mr-2 h-4 w-4 opacity-50" />
+                <span>{{ value ? df.format(toDate(dateValue, getLocalTimeZone())) : "Pick a date" }}</span>
               </Button>
             </FormControl>
           </PopoverTrigger>
           <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
+            <Calendar
+              v-model:placeholder="placeholder"
+              v-model="dateValue"
+              calendar-label="Date of birth"
+              initial-focus
+              :min-value="new CalendarDate(1900, 1, 1)"
+              :max-value="today(getLocalTimeZone())"
+              @update:model-value="(v) => {
+                if (v) {
+                  dateValue = v
+                  setValues({
+                    dob: toDate(v).toISOString(),
+                  }, false)
+                }
+                else {
+                  dateValue = undefined
+                  setValues({
+                    dob: undefined,
+                  }, false)
+                }
+              }"
+            />
           </PopoverContent>
         </Popover>
         <FormDescription>
@@ -121,6 +145,7 @@ async function onSubmit(values: any) {
         </FormDescription>
         <FormMessage />
       </FormItem>
+      <input type="hidden" v-bind="field">
     </FormField>
 
     <FormField v-slot="{ value }" name="language">
@@ -155,7 +180,7 @@ async function onSubmit(values: any) {
                     @select="() => {
                       setValues({
                         language: language.value,
-                      })
+                      }, false)
                       open = false
                     }"
                   >
diff --git a/apps/www/src/lib/registry/default/example/CalendarDemo.vue b/apps/www/src/lib/registry/default/example/CalendarDemo.vue
index 3dd2a71a..5795206b 100644
--- a/apps/www/src/lib/registry/default/example/CalendarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarDemo.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { type Ref, ref } from 'vue'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { Calendar } from '@/lib/registry/default/ui/calendar'
 
-const date = ref(new Date())
+const value = ref(today(getLocalTimeZone())) as Ref<DateValue>
 </script>
 
 <template>
-  <Calendar v-model="date" class="rounded-md border" />
+  <Calendar v-model="value" :weekday-format="'short'" class="rounded-md border" />
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/src/lib/registry/default/example/CalendarForm.vue
new file mode 100644
index 00000000..5b6b762e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CalendarForm.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, h, ref } from 'vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
+import { toDate } from 'radix-vue/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
+import { toast } from '@/lib/registry/default/ui/toast'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const formSchema = toTypedSchema(z.object({
+  dob: z
+    .string()
+    .refine(v => v, { message: 'A date of birth is required.' }),
+}))
+
+const placeholder = ref()
+
+const { handleSubmit, setValues, values } = useForm({
+  validationSchema: formSchema,
+})
+
+const value = computed({
+  get: () => values.dob ? parseDate(values.dob) : undefined,
+  set: val => val,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-8" @submit="onSubmit">
+    <FormField name="dob">
+      <FormItem class="flex flex-col">
+        <FormLabel>Date of birth</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline" :class="cn(
+                  'w-[240px] ps-3 text-start font-normal',
+                  !value && 'text-muted-foreground',
+                )"
+              >
+                <span>{{ value ? df.format(toDate(value)) : "Pick a date" }}</span>
+                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
+              </Button>
+              <input hidden>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0">
+            <Calendar
+              v-model:placeholder="placeholder"
+              v-model="value"
+              calendar-label="Date of birth"
+              initial-focus
+              :min-value="new CalendarDate(1900, 1, 1)"
+              :max-value="today(getLocalTimeZone())"
+              @update:model-value="(v) => {
+                if (v) {
+                  setValues({
+                    dob: v.toString(),
+                  })
+                }
+                else {
+                  setValues({
+                    dob: '',
+                  })
+                }
+              }"
+            />
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          Your date of birth is used to calculate your age.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
new file mode 100644
index 00000000..5152e416
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
+import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { useVModel } from '@vueuse/core'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/default/ui/calendar'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: undefined,
+  placeholder() {
+    return today(getLocalTimeZone())
+  },
+  weekdayFormat: 'short',
+})
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, placeholder: __, ...delegated } = props
+
+  return delegated
+})
+
+const placeholder = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: today(getLocalTimeZone()),
+}) as Ref<DateValue>
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const formatter = useDateFormatter('en')
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ date, grid, weekDays }"
+    v-model:placeholder="placeholder"
+    v-bind="forwarded"
+    :class="cn('rounded-md border p-3', props.class)"
+  >
+    <CalendarHeader>
+      <CalendarHeading class="flex w-full items-center justify-between gap-2">
+        <Select
+          :default-value="placeholder.month.toString()"
+          @update:model-value="(v) => {
+            if (!v || !placeholder) return;
+            if (Number(v) === placeholder?.month) return;
+            placeholder = placeholder.set({
+              month: Number(v),
+            })
+          }"
+        >
+          <SelectTrigger aria-label="Select month" class="w-[60%]">
+            <SelectValue placeholder="Select month" />
+          </SelectTrigger>
+          <SelectContent class="max-h-[200px]">
+            <SelectItem
+              v-for="month in createYear({ dateObj: date })"
+              :key="month.toString()" :value="month.month.toString()"
+            >
+              {{ formatter.custom(toDate(month), { month: 'long' }) }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select
+          :default-value="props.placeholder.year.toString()"
+          @update:model-value="(v) => {
+            if (!v || !placeholder) return;
+            if (Number(v) === placeholder?.year) return;
+            placeholder = placeholder.set({
+              year: Number(v),
+            })
+          }"
+        >
+          <SelectTrigger aria-label="Select year" class="w-[40%]">
+            <SelectValue placeholder="Select year" />
+          </SelectTrigger>
+          <SelectContent class="max-h-[200px]">
+            <SelectItem
+              v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
+              :key="yearValue.toString()" :value="yearValue.year.toString()"
+            >
+              {{ yearValue.year }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CalendarHeading>
+    </CalendarHeader>
+
+    <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody class="grid">
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
index 18334e63..4cf6cb2e 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
@@ -1,36 +1,40 @@
 <script setup lang="ts">
-import { 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'
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+} from '@internationalized/date'
 
-const date = ref<Date>()
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const value = ref<DateValue>()
 </script>
 
 <template>
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        :variant="'outline'"
+        variant="outline"
         :class="cn(
           'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
+          !value && 'text-muted-foreground',
         )"
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+        {{ value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date" }}
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
+      <Calendar v-model="value" initial-focus />
     </PopoverContent>
   </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
index 9d6e79a5..3fa542fb 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { format } from 'date-fns'
+import { computed, h, ref } from 'vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
+import { toDate } from 'radix-vue/date'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/default/ui/button'
+import { z } from 'zod'
 import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -17,22 +16,32 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
 
 const formSchema = toTypedSchema(z.object({
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
+  dob: z
+    .string()
+    .refine(v => v, { message: 'A date of birth is required.' }),
 }))
 
-const { handleSubmit } = useForm({
+const placeholder = ref()
+
+const { handleSubmit, setValues, values } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+
+  },
+})
+
+const value = computed({
+  get: () => values.dob ? parseDate(values.dob) : undefined,
+  set: val => val,
 })
 
 const onSubmit = handleSubmit((values) => {
@@ -45,7 +54,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField, value }" name="dob">
+    <FormField name="dob">
       <FormItem class="flex flex-col">
         <FormLabel>Date of birth</FormLabel>
         <Popover>
@@ -57,13 +66,34 @@ const onSubmit = handleSubmit((values) => {
                   !value && 'text-muted-foreground',
                 )"
               >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
+                <span>{{ value ? df.format(toDate(value)) : "Pick a date" }}</span>
                 <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
               </Button>
+              <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
+          <PopoverContent class="w-auto p-0">
+            <Calendar
+              v-model:placeholder="placeholder"
+              v-model="value"
+              calendar-label="Date of birth"
+              initial-focus
+              :min-value="new CalendarDate(1900, 1, 1)"
+              :max-value="today(getLocalTimeZone())"
+              @update:model-value="(v) => {
+                if (v) {
+                  setValues({
+                    dob: v.toString(),
+                  })
+                }
+                else {
+                  setValues({
+                    dob: '',
+                  })
+                }
+
+              }"
+            />
           </PopoverContent>
         </Popover>
         <FormDescription>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
index c45446f8..cfe0a953 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -1,25 +1,31 @@
 <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'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/default/ui/select'
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+  today,
+} from '@internationalized/date'
 
-const date = ref<Date>()
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const items = [
+  { value: 0, label: 'Today' },
+  { value: 1, label: 'Tomorrow' },
+  { value: 3, label: 'In 3 days' },
+  { value: 7, label: 'In a week' },
+]
+
+const value = ref<DateValue>()
 </script>
 
 <template>
@@ -29,45 +35,30 @@ const date = ref<Date>()
         variant="outline"
         :class="cn(
           'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
+          !value && 'text-muted-foreground',
         )"
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
-        <template v-if="date">
-          {{ format(date, "PPP") }}
-        </template>
-        <template v-else>
-          <span>Pick a date</span>
-        </template>
+        {{ value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date" }}
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+    <PopoverContent class="flex w-auto flex-col gap-y-2 p-2">
       <Select
-        @update:model-value="(value) => {
-          date = addDays(new Date(), parseInt(value))
+        @update:model-value="(v) => {
+          if (!v) return;
+          value = today(getLocalTimeZone()).add({ days: Number(v) });
         }"
       >
         <SelectTrigger>
           <SelectValue placeholder="Select" />
         </SelectTrigger>
-        <SelectContent position="popper">
-          <SelectItem value="0">
-            Today
-          </SelectItem>
-          <SelectItem value="1">
-            Tomorrow
-          </SelectItem>
-          <SelectItem value="3">
-            In 3 days
-          </SelectItem>
-          <SelectItem value="7">
-            In a week
+        <SelectContent>
+          <SelectItem v-for="item in items" :key="item.value" :value="item.value.toString()">
+            {{ item.label }}
           </SelectItem>
         </SelectContent>
       </Select>
-      <div class="rounded-md border">
-        <Calendar v-model="date" mode="single" />
-      </div>
+      <Calendar v-model="value" />
     </PopoverContent>
   </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index 212b9c06..6e7ea98d 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -1,51 +1,55 @@
 <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 { type Ref, ref } from 'vue'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+} from '@internationalized/date'
 
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import type { DateRange } from 'radix-vue'
+import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
 })
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
 </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" />
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+          </template>
 
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
-        />
-      </PopoverContent>
-    </Popover>
-  </div>
+          <template v-else>
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+          </template>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
+    </PopoverContent>
+  </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
new file mode 100644
index 00000000..caec1ef6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type Ref, ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { getLocalTimeZone, today } from '@internationalized/date'
+import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
+
+const start = today(getLocalTimeZone())
+const end = start.add({ days: 7 })
+
+const value = ref({
+  start,
+  end,
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <RangeCalendar v-model="value" class="rounded-md border" />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/VCalendarDemo.vue b/apps/www/src/lib/registry/default/example/VCalendarDemo.vue
new file mode 100644
index 00000000..2add2507
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/VCalendarDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+
+const date = ref(new Date())
+</script>
+
+<template>
+  <Calendar v-model="date" class="rounded-md border" />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue b/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
new file mode 100644
index 00000000..3b8540cf
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { 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/v-calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerForm.vue b/apps/www/src/lib/registry/default/example/VDatePickerForm.vue
new file mode 100644
index 00000000..b46495c3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/VDatePickerForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { toast } from '@/lib/registry/default/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-8" @submit="onSubmit">
+    <FormField v-slot="{ componentField, value }" name="dob">
+      <FormItem class="flex flex-col">
+        <FormLabel>Date of birth</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline" :class="cn(
+                  'w-[240px] ps-3 text-start font-normal',
+                  !value && 'text-muted-foreground',
+                )"
+              >
+                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
+                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="p-0">
+            <Calendar v-bind="componentField" />
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          Your date of birth is used to calculate your age.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
new file mode 100644
index 00000000..5b310a99
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
@@ -0,0 +1,73 @@
+<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/v-calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="date">
+          {{ format(date, "PPP") }}
+        </template>
+        <template v-else>
+          <span>Pick a date</span>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+      <Select
+        @update:model-value="(value) => {
+          date = addDays(new Date(), parseInt(value))
+        }"
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent position="popper">
+          <SelectItem value="0">
+            Today
+          </SelectItem>
+          <SelectItem value="1">
+            Tomorrow
+          </SelectItem>
+          <SelectItem value="3">
+            In 3 days
+          </SelectItem>
+          <SelectItem value="7">
+            In a week
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="rounded-md border">
+        <Calendar v-model="date" mode="single" />
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
new file mode 100644
index 00000000..5f6e0be8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
@@ -0,0 +1,51 @@
+<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/v-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">
+        <Calendar
+          v-model.range="date"
+          :columns="2"
+        />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
similarity index 93%
rename from apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
rename to apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
index 883f7a89..ba0b231d 100644
--- a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
@@ -5,7 +5,7 @@ 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 { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
diff --git a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
similarity index 96%
rename from apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
rename to apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
index 2add61c6..e71e81cd 100644
--- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
@@ -5,7 +5,7 @@ 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 { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
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 381c2713..0486e496 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -1,331 +1,60 @@
-<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 { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
 
-defineOptions({
-  inheritAttrs: false,
-})
-const props = withDefaults(defineProps< {
-  modelValue?: string | number | Date | DatePickerModel
-  modelModifiers?: object
-  columns?: number
-  type?: 'single' | 'range'
-}>(), {
-  type: 'single',
-  columns: 1,
-})
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
+const emits = defineEmits<CalendarRootEmits>()
 
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
 })
 
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value)
-    return
-
-  if (direction === 'prev')
-    calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter(name => isVCalendarSlot(name))
-    .reduce((obj: Record<string, any>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <div class="relative">
-    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
-        <ChevronLeft class="w-4 h-4" />
-      </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
-        <ChevronRight class="w-4 h-4" />
-      </button>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
     </div>
-
-    <DatePicker
-      ref="datePicker"
-      v-bind="$attrs"
-      v-model="modelValue"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-
-      <template #nav-prev-button>
-        <ChevronLeft />
-      </template>
-
-      <template #nav-next-button>
-        <ChevronRight />
-      </template>
-    </DatePicker>
-  </div>
+  </CalendarRoot>
 </template>
-
-<style lang="css">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium relative z-20;
-}
-.vc-popover-content-wrapper .vc-popover-content {
-  @apply mt-3 rounded-md max-w-xs border bg-background;
-}
-.vc-popover-content-wrapper .vc-nav-header {
-  @apply flex justify-between items-center p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items {
-  @apply grid grid-cols-4 gap-2 p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
-  @apply rounded-md px-2 py-1;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
-  @apply text-muted-foreground bg-muted;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
-  @apply bg-primary text-primary-foreground;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply justify-items-center;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
-}
-.calendar .vc-weeks {
-  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
-  @apply bg-secondary text-primary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
-  @apply rounded-md;
-}
-.calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent text-accent-foreground;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply w-full relative;
-}
-:root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
-}
-
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
-}
-
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
-}
-
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-	opacity: 0;
-}
-
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-t border-solid border-secondary mt-2;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
-}
-.vc-time-select-group {
-  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
-}
-.vc-time-select-group select {
-  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..14843ce2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..77fec283
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..2fe5439a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..23d71ced
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..f8101a3d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..47fdb460
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..f1ebfbab
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..8bfa1969
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..7062d3db
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..5670dd98
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..22398acc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</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 d17d00f2..5239a1bd 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/calendar/index.ts
@@ -1,22 +1,12 @@
 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)
-}
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 00000000..3033f05b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarPrevButton />
+      <RangeCalendarHeading />
+      <RangeCalendarNextButton />
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 00000000..bc8e4152
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 00000000..283aad5e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 00000000..e346b07d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 00000000..cae15cc7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 00000000..c11ad365
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 00000000..425ed58f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 00000000..26ea9283
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 00000000..7d98cafa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 00000000..51ee1f8b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 00000000..e82731e4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 00000000..97d5cbf4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/index.ts b/apps/www/src/lib/registry/default/ui/range-calendar/index.ts
new file mode 100644
index 00000000..7ba1637e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'
diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
new file mode 100644
index 00000000..b8c60f3d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
@@ -0,0 +1,331 @@
+<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 { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps< {
+  modelValue?: string | number | Date | DatePickerModel
+  modelModifiers?: object
+  columns?: number
+  type?: 'single' | 'range'
+}>(), {
+  type: 'single',
+  columns: 1,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value)
+    return
+
+  if (direction === 'prev')
+    calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+        <ChevronLeft class="w-4 h-4" />
+      </button>
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+        <ChevronRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <DatePicker
+      ref="datePicker"
+      v-bind="$attrs"
+      v-model="modelValue"
+      :model-modifiers="modelModifiers"
+      class="calendar"
+      trim-weeks
+      :transition="'none'"
+      :columns="columns"
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
+    </DatePicker>
+  </div>
+</template>
+
+<style lang="css">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4;
+}
+.calendar .vc-title {
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply justify-items-center;
+}
+.calendar .vc-weekday {
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
+}
+.calendar .vc-weeks {
+  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply first:rounded-l-md last:rounded-r-md;
+}
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-start) {
+  @apply rounded-l-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-end) {
+  @apply rounded-r-md;
+}
+.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
+  @apply rounded-md;
+}
+.calendar .vc-day-content  {
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent text-accent-foreground;
+}
+.calendar .vc-pane-container.in-transition {
+  @apply overflow-hidden;
+}
+.calendar .vc-pane-container {
+  @apply w-full relative;
+}
+:root {
+	--vc-slide-translate: 22px;
+	--vc-slide-duration: 0.15s;
+	--vc-slide-timing: ease;
+}
+
+.calendar .vc-fade-enter-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-enter-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+	transition:
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	pointer-events: none;
+}
+
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+	position: absolute !important;
+	width: 100%;
+}
+
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.calendar .vc-slide-fade-leave-to {
+	opacity: 0;
+}
+
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-left,
+.calendar .vc-slide-fade-leave-to.direction-left {
+	-webkit-transform: translateX(var(--vc-slide-translate));
+	transform: translateX(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-right,
+.calendar .vc-slide-fade-leave-to.direction-right {
+	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+}
+
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-top,
+.calendar .vc-slide-fade-leave-to.direction-top {
+	-webkit-transform: translateY(var(--vc-slide-translate));
+	transform: translateY(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-bottom,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
+</style>
diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/index.ts b/apps/www/src/lib/registry/default/ui/v-calendar/index.ts
new file mode 100644
index 00000000..d17d00f2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/v-calendar/index.ts
@@ -0,0 +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/CalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
index 26b8b930..33243667 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { type Ref, ref } from 'vue'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 
-const date = ref(new Date())
+const value = ref(today(getLocalTimeZone())) as Ref<DateValue>
 </script>
 
 <template>
-  <Calendar v-model="date" class="rounded-md border" />
+  <Calendar v-model="value" :weekday-format="'short'" class="rounded-md border" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
new file mode 100644
index 00000000..90c599f1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, h, ref } from 'vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
+import { toDate } from 'radix-vue/date'
+import { CalendarIcon } from '@radix-icons/vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const formSchema = toTypedSchema(z.object({
+  dob: z
+    .string()
+    .refine(v => v, { message: 'A date of birth is required.' }),
+}))
+
+const placeholder = ref()
+
+const { handleSubmit, setValues, values } = useForm({
+  validationSchema: formSchema,
+})
+
+const value = computed({
+  get: () => values.dob ? parseDate(values.dob) : undefined,
+  set: val => val,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-8" @submit="onSubmit">
+    <FormField name="dob">
+      <FormItem class="flex flex-col">
+        <FormLabel>Date of birth</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline" :class="cn(
+                  'w-[240px] ps-3 text-start font-normal',
+                  !value && 'text-muted-foreground',
+                )"
+              >
+                <span>{{ value ? df.format(toDate(value)) : "Pick a date" }}</span>
+                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
+              </Button>
+              <input hidden>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0">
+            <Calendar
+              v-model:placeholder="placeholder"
+              v-model="value"
+              calendar-label="Date of birth"
+              initial-focus
+              :min-value="new CalendarDate(1900, 1, 1)"
+              :max-value="today(getLocalTimeZone())"
+              @update:model-value="(v) => {
+                if (v) {
+                  setValues({
+                    dob: v.toString(),
+                  })
+                }
+                else {
+                  setValues({
+                    dob: '',
+                  })
+                }
+              }"
+            />
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          Your date of birth is used to calculate your age.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
new file mode 100644
index 00000000..820d0d9a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
+import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { useVModel } from '@vueuse/core'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: undefined,
+  placeholder() {
+    return today(getLocalTimeZone())
+  },
+  weekdayFormat: 'short',
+})
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, placeholder: __, ...delegated } = props
+
+  return delegated
+})
+
+const placeholder = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: today(getLocalTimeZone()),
+}) as Ref<DateValue>
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const formatter = useDateFormatter('en')
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ date, grid, weekDays }"
+    v-model:placeholder="placeholder"
+    v-bind="forwarded"
+    :class="cn('rounded-md border p-3', props.class)"
+  >
+    <CalendarHeader>
+      <CalendarHeading class="flex w-full items-center justify-between gap-2">
+        <Select
+          :default-value="placeholder.month.toString()"
+          @update:model-value="(v) => {
+            if (!v || !placeholder) return;
+            if (Number(v) === placeholder?.month) return;
+            placeholder = placeholder.set({
+              month: Number(v),
+            })
+          }"
+        >
+          <SelectTrigger aria-label="Select month" class="w-[60%]">
+            <SelectValue placeholder="Select month" />
+          </SelectTrigger>
+          <SelectContent class="max-h-[200px]">
+            <SelectItem
+              v-for="month in createYear({ dateObj: date })"
+              :key="month.toString()" :value="month.month.toString()"
+            >
+              {{ formatter.custom(toDate(month), { month: 'long' }) }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select
+          :default-value="props.placeholder.year.toString()"
+          @update:model-value="(v) => {
+            if (!v || !placeholder) return;
+            if (Number(v) === placeholder?.year) return;
+            placeholder = placeholder.set({
+              year: Number(v),
+            })
+          }"
+        >
+          <SelectTrigger aria-label="Select year" class="w-[40%]">
+            <SelectValue placeholder="Select year" />
+          </SelectTrigger>
+          <SelectContent class="max-h-[200px]">
+            <SelectItem
+              v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
+              :key="yearValue.toString()" :value="yearValue.year.toString()"
+            >
+              {{ yearValue.year }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CalendarHeading>
+    </CalendarHeader>
+
+    <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody class="grid">
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index 420887d9..85aba6f3 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -37,7 +37,7 @@ const data = [
 </script>
 
 <template>
-  <Card>
+  <Card class="h-full">
     <CardHeader class="pb-4">
       <CardTitle class="text-base">
         Move Goal
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 685f17cb..8b3dfba1 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -1,36 +1,40 @@
 <script setup lang="ts">
-import { 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'
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+} from '@internationalized/date'
 
-const date = ref<Date>()
+import { CalendarIcon } from '@radix-icons/vue'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const value = ref<DateValue>()
 </script>
 
 <template>
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        :variant="'outline'"
+        variant="outline"
         :class="cn(
           'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
+          !value && 'text-muted-foreground',
         )"
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+        {{ value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date" }}
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
+      <Calendar v-model="value" initial-focus />
     </PopoverContent>
   </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
index 7203b9db..c751b251 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { format } from 'date-fns'
+import { computed, h, ref } from 'vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
+import { toDate } from 'radix-vue/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { z } from 'zod'
 import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -17,22 +16,32 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
 
 const formSchema = toTypedSchema(z.object({
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
+  dob: z
+    .string()
+    .refine(v => v, { message: 'A date of birth is required.' }),
 }))
 
-const { handleSubmit } = useForm({
+const placeholder = ref()
+
+const { handleSubmit, setValues, values } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+
+  },
+})
+
+const value = computed({
+  get: () => values.dob ? parseDate(values.dob) : undefined,
+  set: val => val,
 })
 
 const onSubmit = handleSubmit((values) => {
@@ -45,7 +54,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField, value }" name="dob">
+    <FormField name="dob">
       <FormItem class="flex flex-col">
         <FormLabel>Date of birth</FormLabel>
         <Popover>
@@ -57,13 +66,34 @@ const onSubmit = handleSubmit((values) => {
                   !value && 'text-muted-foreground',
                 )"
               >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
+                <span>{{ value ? df.format(toDate(value)) : "Pick a date" }}</span>
                 <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
               </Button>
+              <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
+          <PopoverContent class="w-auto p-0">
+            <Calendar
+              v-model:placeholder="placeholder"
+              v-model="value"
+              calendar-label="Date of birth"
+              initial-focus
+              :min-value="new CalendarDate(1900, 1, 1)"
+              :max-value="today(getLocalTimeZone())"
+              @update:model-value="(v) => {
+                if (v) {
+                  setValues({
+                    dob: v.toString(),
+                  })
+                }
+                else {
+                  setValues({
+                    dob: '',
+                  })
+                }
+
+              }"
+            />
           </PopoverContent>
         </Popover>
         <FormDescription>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
index 0e96f721..a903df30 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -1,25 +1,31 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { CalendarIcon } from '@radix-icons/vue'
-
 import { ref } from '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'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+  today,
+} from '@internationalized/date'
 
-const date = ref<Date>()
+import { CalendarIcon } from '@radix-icons/vue'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+
+const items = [
+  { value: 0, label: 'Today' },
+  { value: 1, label: 'Tomorrow' },
+  { value: 3, label: 'In 3 days' },
+  { value: 7, label: 'In a week' },
+]
+
+const value = ref<DateValue>()
 </script>
 
 <template>
@@ -29,45 +35,30 @@ const date = ref<Date>()
         variant="outline"
         :class="cn(
           'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
+          !value && 'text-muted-foreground',
         )"
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
-        <template v-if="date">
-          {{ format(date, "PPP") }}
-        </template>
-        <template v-else>
-          <span>Pick a date</span>
-        </template>
+        {{ value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date" }}
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+    <PopoverContent class="flex w-auto flex-col gap-y-2 p-2">
       <Select
-        @update:model-value="(value) => {
-          date = addDays(new Date(), parseInt(value))
+        @update:model-value="(v) => {
+          if (!v) return;
+          value = today(getLocalTimeZone()).add({ days: Number(v) });
         }"
       >
         <SelectTrigger>
           <SelectValue placeholder="Select" />
         </SelectTrigger>
-        <SelectContent position="popper">
-          <SelectItem value="0">
-            Today
-          </SelectItem>
-          <SelectItem value="1">
-            Tomorrow
-          </SelectItem>
-          <SelectItem value="3">
-            In 3 days
-          </SelectItem>
-          <SelectItem value="7">
-            In a week
+        <SelectContent>
+          <SelectItem v-for="item in items" :key="item.value" :value="item.value.toString()">
+            {{ item.label }}
           </SelectItem>
         </SelectContent>
       </Select>
-      <div class="rounded-md border">
-        <Calendar v-model="date" mode="single" />
-      </div>
+      <Calendar v-model="value" />
     </PopoverContent>
   </Popover>
 </template>
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 7b8c3084..0e6c3c4d 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -1,51 +1,55 @@
 <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 { type Ref, ref } from 'vue'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+} from '@internationalized/date'
 
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
+import { CalendarIcon } from '@radix-icons/vue'
+import type { DateRange } from 'radix-vue'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { cn } from '@/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
 })
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
 </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" />
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+          </template>
 
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
-        />
-      </PopoverContent>
-    </Popover>
-  </div>
+          <template v-else>
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+          </template>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
+    </PopoverContent>
+  </Popover>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
new file mode 100644
index 00000000..2c3d0748
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type Ref, ref } from 'vue'
+import { getLocalTimeZone, today } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+
+const start = today(getLocalTimeZone())
+const end = start.add({ days: 7 })
+
+const value = ref({
+  start,
+  end,
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <RangeCalendar v-model="value" class="rounded-md border" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
new file mode 100644
index 00000000..2ada5321
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+
+const date = ref(new Date())
+</script>
+
+<template>
+  <Calendar v-model="date" class="rounded-md border" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
new file mode 100644
index 00000000..1b0b4472
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { 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/v-calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
new file mode 100644
index 00000000..bcb34221
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { format } from 'date-fns'
+import { CalendarIcon } from '@radix-icons/vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-8" @submit="onSubmit">
+    <FormField v-slot="{ componentField, value }" name="dob">
+      <FormItem class="flex flex-col">
+        <FormLabel>Date of birth</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline" :class="cn(
+                  'w-[240px] ps-3 text-start font-normal',
+                  !value && 'text-muted-foreground',
+                )"
+              >
+                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
+                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="p-0">
+            <Calendar v-bind="componentField" />
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          Your date of birth is used to calculate your age.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
new file mode 100644
index 00000000..2d070262
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { CalendarIcon } from '@radix-icons/vue'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="date">
+          {{ format(date, "PPP") }}
+        </template>
+        <template v-else>
+          <span>Pick a date</span>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+      <Select
+        @update:model-value="(value) => {
+          date = addDays(new Date(), parseInt(value))
+        }"
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent position="popper">
+          <SelectItem value="0">
+            Today
+          </SelectItem>
+          <SelectItem value="1">
+            Tomorrow
+          </SelectItem>
+          <SelectItem value="3">
+            In 3 days
+          </SelectItem>
+          <SelectItem value="7">
+            In a week
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="rounded-md border">
+        <Calendar v-model="date" mode="single" />
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
new file mode 100644
index 00000000..1fe0fe65
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
@@ -0,0 +1,51 @@
+<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/v-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">
+        <Calendar
+          v-model.range="date"
+          :columns="2"
+        />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
similarity index 93%
rename from apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
rename to apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
index 401d89a8..0c9fd7cc 100644
--- a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
-import { ref } from 'vue'
 import { CalendarIcon } from '@radix-icons/vue'
 
+import { ref } from '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 { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
diff --git a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
similarity index 96%
rename from apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
rename to apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
index 6099b11c..f655cc76 100644
--- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
@@ -5,7 +5,7 @@ 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 { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
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 0fe6e4d5..0486e496 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,325 +1,60 @@
-<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 { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
 
-defineOptions({
-  inheritAttrs: false,
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
 })
 
-const props = withDefaults(defineProps<{
-  modelValue?: string | number | Date | DatePickerModel
-  modelModifiers?: object
-  columns?: number
-  type?: 'single' | 'range'
-}>(), {
-  type: 'single',
-  columns: 1,
-})
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-})
-
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value)
-    return
-
-  if (direction === 'prev')
-    calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter(name => isVCalendarSlot(name))
-    .reduce((obj: Record<string, any>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <div class="relative">
-    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
-        <ChevronLeftIcon class="w-4 h-4" />
-      </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
-        <ChevronRightIcon class="w-4 h-4" />
-      </button>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
     </div>
-
-    <DatePicker
-      ref="datePicker"
-      v-model="modelValue"
-      v-bind="$attrs"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-
-      <template #nav-prev-button>
-        <ChevronLeftIcon />
-      </template>
-
-      <template #nav-next-button>
-        <ChevronRightIcon />
-      </template>
-    </DatePicker>
-  </div>
+  </CalendarRoot>
 </template>
-
-<style lang="css">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium relative z-20;
-}
-.vc-popover-content-wrapper .vc-popover-content {
-  @apply mt-3 rounded-md max-w-xs border bg-background;
-}
-.vc-popover-content-wrapper .vc-nav-header {
-  @apply flex justify-between items-center p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items {
-  @apply grid grid-cols-4 gap-2 p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
-  @apply rounded-md px-2 py-1;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
-  @apply text-muted-foreground bg-muted;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
-  @apply bg-primary text-primary-foreground;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply justify-items-center;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
-}
-.calendar .vc-weeks {
-  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
-  @apply bg-secondary text-primary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
-  @apply rounded-md;
-}
-.calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent text-accent-foreground;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply w-full relative;
-}
-:root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
-}
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
-}
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
-}
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-	opacity: 0;
-}
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
-}
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
-}
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-t border-solid border-secondary mt-2;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
-}
-.vc-time-select-group {
-  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
-}
-.vc-time-select-group select {
-  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..45d2f5c4
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..196240ed
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..2fe5439a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..23d71ced
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..b1356fb7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..47fdb460
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..d3b6380a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..8bfa1969
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..7062d3db
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..8ead0696
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRightIcon class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..189d2fb5
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeftIcon class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</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 d17d00f2..5239a1bd 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,22 +1,12 @@
 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)
-}
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 00000000..3033f05b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarPrevButton />
+      <RangeCalendarHeading />
+      <RangeCalendarNextButton />
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 00000000..b606f375
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 00000000..283aad5e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 00000000..e346b07d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 00000000..cae15cc7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 00000000..c11ad365
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 00000000..425ed58f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 00000000..26ea9283
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 00000000..7d98cafa
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 00000000..51ee1f8b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 00000000..eb0487d6
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRightIcon class="h-4 w-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 00000000..0934bf50
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeftIcon class="h-4 w-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts b/apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts
new file mode 100644
index 00000000..7ba1637e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
new file mode 100644
index 00000000..deba4ac8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
@@ -0,0 +1,325 @@
+<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 { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | Date | DatePickerModel
+  modelModifiers?: object
+  columns?: number
+  type?: 'single' | 'range'
+}>(), {
+  type: 'single',
+  columns: 1,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value)
+    return
+
+  if (direction === 'prev')
+    calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+        <ChevronLeftIcon class="w-4 h-4" />
+      </button>
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+        <ChevronRightIcon class="w-4 h-4" />
+      </button>
+    </div>
+
+    <DatePicker
+      ref="datePicker"
+      v-model="modelValue"
+      v-bind="$attrs"
+      :model-modifiers="modelModifiers"
+      class="calendar"
+      trim-weeks
+      :transition="'none'"
+      :columns="columns"
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+
+      <template #nav-prev-button>
+        <ChevronLeftIcon />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRightIcon />
+      </template>
+    </DatePicker>
+  </div>
+</template>
+
+<style lang="css">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4;
+}
+.calendar .vc-title {
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply justify-items-center;
+}
+.calendar .vc-weekday {
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
+}
+.calendar .vc-weeks {
+  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply first:rounded-l-md last:rounded-r-md;
+}
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-start) {
+  @apply rounded-l-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-end) {
+  @apply rounded-r-md;
+}
+.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
+  @apply rounded-md;
+}
+.calendar .vc-day-content  {
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent text-accent-foreground;
+}
+.calendar .vc-pane-container.in-transition {
+  @apply overflow-hidden;
+}
+.calendar .vc-pane-container {
+  @apply w-full relative;
+}
+:root {
+	--vc-slide-translate: 22px;
+	--vc-slide-duration: 0.15s;
+	--vc-slide-timing: ease;
+}
+.calendar .vc-fade-enter-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-enter-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+	transition:
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	pointer-events: none;
+}
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+	position: absolute !important;
+	width: 100%;
+}
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.calendar .vc-slide-fade-leave-to {
+	opacity: 0;
+}
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-left,
+.calendar .vc-slide-fade-leave-to.direction-left {
+	-webkit-transform: translateX(var(--vc-slide-translate));
+	transform: translateX(var(--vc-slide-translate));
+}
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-right,
+.calendar .vc-slide-fade-leave-to.direction-right {
+	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+}
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-top,
+.calendar .vc-slide-fade-leave-to.direction-top {
+	-webkit-transform: translateY(var(--vc-slide-translate));
+	transform: translateY(var(--vc-slide-translate));
+}
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-bottom,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
+</style>
diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts b/apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts
new file mode 100644
index 00000000..d17d00f2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts
@@ -0,0 +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/colors/gray.json b/apps/www/src/public/registry/colors/gray.json
index 1f5c04f6..8a1d9438 100644
--- a/apps/www/src/public/registry/colors/gray.json
+++ b/apps/www/src/public/registry/colors/gray.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/index.json b/apps/www/src/public/registry/colors/index.json
index 6b70773e..c25158ef 100644
--- a/apps/www/src/public/registry/colors/index.json
+++ b/apps/www/src/public/registry/colors/index.json
@@ -1996,4 +1996,4 @@
       "hslChannel": "343.1 87.7% 15.9%"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/lime.json b/apps/www/src/public/registry/colors/lime.json
index cec9a36d..e36faf45 100644
--- a/apps/www/src/public/registry/colors/lime.json
+++ b/apps/www/src/public/registry/colors/lime.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n \n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n \n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n \n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n \n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n \n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 89.3 80.4% 10%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n \n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n \n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n \n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n \n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n \n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n \n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n \n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 82 84.5% 67.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/neutral.json b/apps/www/src/public/registry/colors/neutral.json
index 0a65056e..3deb3deb 100644
--- a/apps/www/src/public/registry/colors/neutral.json
+++ b/apps/www/src/public/registry/colors/neutral.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/slate.json b/apps/www/src/public/registry/colors/slate.json
index bf5be7ff..19a86b72 100644
--- a/apps/www/src/public/registry/colors/slate.json
+++ b/apps/www/src/public/registry/colors/slate.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/stone.json b/apps/www/src/public/registry/colors/stone.json
index d31a29ae..bd31d945 100644
--- a/apps/www/src/public/registry/colors/stone.json
+++ b/apps/www/src/public/registry/colors/stone.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/zinc.json b/apps/www/src/public/registry/colors/zinc.json
index 9fcf1311..72484fec 100644
--- a/apps/www/src/public/registry/colors/zinc.json
+++ b/apps/www/src/public/registry/colors/zinc.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 6c4c3d93..01d6aedf 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -117,16 +117,24 @@
   },
   {
     "name": "calendar",
-    "dependencies": [
-      "@vueuse/core",
-      "v-calendar@next"
-    ],
+    "dependencies": [],
     "registryDependencies": [
       "utils",
       "button"
     ],
     "files": [
       "ui/calendar/Calendar.vue",
+      "ui/calendar/CalendarCell.vue",
+      "ui/calendar/CalendarCellTrigger.vue",
+      "ui/calendar/CalendarGrid.vue",
+      "ui/calendar/CalendarGridBody.vue",
+      "ui/calendar/CalendarGridHead.vue",
+      "ui/calendar/CalendarGridRow.vue",
+      "ui/calendar/CalendarHeadCell.vue",
+      "ui/calendar/CalendarHeader.vue",
+      "ui/calendar/CalendarHeading.vue",
+      "ui/calendar/CalendarNextButton.vue",
+      "ui/calendar/CalendarPrevButton.vue",
       "ui/calendar/index.ts"
     ],
     "type": "components:ui"
@@ -485,6 +493,30 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "range-calendar",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      "ui/range-calendar/RangeCalendar.vue",
+      "ui/range-calendar/RangeCalendarCell.vue",
+      "ui/range-calendar/RangeCalendarCellTrigger.vue",
+      "ui/range-calendar/RangeCalendarGrid.vue",
+      "ui/range-calendar/RangeCalendarGridBody.vue",
+      "ui/range-calendar/RangeCalendarGridHead.vue",
+      "ui/range-calendar/RangeCalendarGridRow.vue",
+      "ui/range-calendar/RangeCalendarHeadCell.vue",
+      "ui/range-calendar/RangeCalendarHeader.vue",
+      "ui/range-calendar/RangeCalendarHeading.vue",
+      "ui/range-calendar/RangeCalendarNextButton.vue",
+      "ui/range-calendar/RangeCalendarPrevButton.vue",
+      "ui/range-calendar/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "resizable",
     "dependencies": [],
@@ -737,5 +769,21 @@
       "ui/tooltip/index.ts"
     ],
     "type": "components:ui"
+  },
+  {
+    "name": "v-calendar",
+    "dependencies": [
+      "@vueuse/core",
+      "v-calendar@next"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      "ui/v-calendar/Calendar.vue",
+      "ui/v-calendar/index.ts"
+    ],
+    "type": "components:ui"
   }
 ]
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index be4913a4..a9cc9e42 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -27,4 +27,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 18ef194a..c569742a 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/alert.json b/apps/www/src/public/registry/styles/default/alert.json
index 54bb63e9..7bc3f44c 100644
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ b/apps/www/src/public/registry/styles/default/alert.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
index 54f7608c..f8534f00 100644
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/default/aspect-ratio.json
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index 4a5c7da8..a3be030c 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/badge.json b/apps/www/src/public/registry/styles/default/badge.json
index 2c7f9d83..b964534b 100644
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ b/apps/www/src/public/registry/styles/default/badge.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
index d9baa9cd..ce3008c8 100644
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
index 8d960a1d..6e6f2f43 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -15,4 +15,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 b77470ee..57c1ef5a 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -1,9 +1,6 @@
 {
   "name": "calendar",
-  "dependencies": [
-    "@vueuse/core",
-    "v-calendar@next"
-  ],
+  "dependencies": [],
   "registryDependencies": [
     "utils",
     "button"
@@ -11,11 +8,55 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "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')\" type=\"button\" @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')\" type=\"button\" @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 justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
+    },
+    {
+      "name": "CalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+    },
+    {
+      "name": "CalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
+    },
+    {
+      "name": "CalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+    },
+    {
+      "name": "CalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\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"
+      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
index 139bac3a..a9a8f43b 100644
--- a/apps/www/src/public/registry/styles/default/card.json
+++ b/apps/www/src/public/registry/styles/default/card.json
@@ -35,4 +35,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 5ca5575d..e74a7edc 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -44,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 2efd9229..86d0a16e 100644
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ b/apps/www/src/public/registry/styles/default/checkbox.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
index 0c8ac927..39e79fca 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -21,4 +21,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index a999b1a0..b9f15c83 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -48,4 +48,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 4d2b2cce..51dcd6d8 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/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 754ae8e9..c2f2df4d 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/drawer.json b/apps/www/src/public/registry/styles/default/drawer.json
index 8982181d..6c60eae7 100644
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ b/apps/www/src/public/registry/styles/default/drawer.json
@@ -41,4 +41,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 1afc9343..0198694c 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/form.json b/apps/www/src/public/registry/styles/default/form.json
index 19a29433..5e61096e 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 7dfb7f47..5883a52e 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
index 249a6657..7f500be6 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/apps/www/src/public/registry/styles/default/input.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index d827d8be..0cfedee1 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -15,4 +15,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 d3a44c54..9c9e9c98 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 501c88c9..ecda26c9 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/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
index 77a558de..6d25fc6f 100644
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -32,4 +32,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
index 654672e8..894719f4 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index 5d8069ce..916e0eab 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
index 65493f42..cd2edde9 100644
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ b/apps/www/src/public/registry/styles/default/progress.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 e1bf9019..beae81f5 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/range-calendar.json b/apps/www/src/public/registry/styles/default/range-calendar.json
new file mode 100644
index 00000000..c9802e43
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/range-calendar.json
@@ -0,0 +1,63 @@
+{
+  "name": "range-calendar",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "RangeCalendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/resizable.json b/apps/www/src/public/registry/styles/default/resizable.json
index 53b405a0..96622614 100644
--- a/apps/www/src/public/registry/styles/default/resizable.json
+++ b/apps/www/src/public/registry/styles/default/resizable.json
@@ -19,4 +19,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 2647bf53..4d7a79fa 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 d4d4ca10..cafc7f97 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/separator.json b/apps/www/src/public/registry/styles/default/separator.json
index 2d5d85df..da6dd655 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index d347764a..33287e21 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
index 019e0486..13be9875 100644
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ b/apps/www/src/public/registry/styles/default/skeleton.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index 036c32f9..ece41b77 100644
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ b/apps/www/src/public/registry/styles/default/slider.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
index 3a164849..ae170e52 100644
--- a/apps/www/src/public/registry/styles/default/sonner.json
+++ b/apps/www/src/public/registry/styles/default/sonner.json
@@ -15,4 +15,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/table.json b/apps/www/src/public/registry/styles/default/table.json
index 9b2e8ab7..cd605e4f 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
index c3fb9437..cc0e099d 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
index ca31d56c..01060323 100644
--- a/apps/www/src/public/registry/styles/default/tags-input.json
+++ b/apps/www/src/public/registry/styles/default/tags-input.json
@@ -31,4 +31,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 cc38a39e..4236a997 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 d901ad1a..3cc32c77 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/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
index 71b4c12a..b0909535 100644
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ b/apps/www/src/public/registry/styles/default/toggle-group.json
@@ -20,4 +20,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index 5dca88ac..5ae5563a 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
index fbafb977..ab74ed0f 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
new file mode 100644
index 00000000..660d94c2
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/v-calendar.json
@@ -0,0 +1,22 @@
+{
+  "name": "v-calendar",
+  "dependencies": [
+    "@vueuse/core",
+    "v-calendar@next"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "Calendar.vue",
+      "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 justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/index.json b/apps/www/src/public/registry/styles/index.json
index 2002ac50..bbefdacf 100644
--- a/apps/www/src/public/registry/styles/index.json
+++ b/apps/www/src/public/registry/styles/index.json
@@ -7,4 +7,4 @@
     "name": "new-york",
     "label": "New York"
   }
-]
+]
\ No newline at end of file
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 4d354d57..ecf40bab 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -27,4 +27,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 283c1d01..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
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 72872a7a..43eaad08 100644
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ b/apps/www/src/public/registry/styles/new-york/alert.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
index 54f7608c..f8534f00 100644
--- a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 4a5c7da8..a3be030c 100644
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ b/apps/www/src/public/registry/styles/new-york/avatar.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 d20934b6..1057abff 100644
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ b/apps/www/src/public/registry/styles/new-york/badge.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/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
index 094ff22e..7e70d173 100644
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 09a735fd..b3526f5b 100644
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ b/apps/www/src/public/registry/styles/new-york/button.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/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index 1296c153..0cc02c58 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -1,9 +1,6 @@
 {
   "name": "calendar",
-  "dependencies": [
-    "@vueuse/core",
-    "v-calendar@next"
-  ],
+  "dependencies": [],
   "registryDependencies": [
     "utils",
     "button"
@@ -11,11 +8,55 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "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')\" type=\"button\" @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')\" type=\"button\" @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        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
+    },
+    {
+      "name": "CalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+    },
+    {
+      "name": "CalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
+    },
+    {
+      "name": "CalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
+    },
+    {
+      "name": "CalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
+    },
+    {
+      "name": "CalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+    },
+    {
+      "name": "CalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\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"
+      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/card.json b/apps/www/src/public/registry/styles/new-york/card.json
index 8446eff0..b2ccbb05 100644
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ b/apps/www/src/public/registry/styles/new-york/card.json
@@ -35,4 +35,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 e3c0edd3..43543e79 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -44,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 dc3c2cd0..35fa7f1d 100644
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/src/public/registry/styles/new-york/checkbox.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/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
index 0c8ac927..39e79fca 100644
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/src/public/registry/styles/new-york/collapsible.json
@@ -21,4 +21,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 ffcbdb03..42c34759 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.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/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
index 38d07d10..f27e8dca 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 b7e8da2f..fcc6ca4c 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.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/drawer.json b/apps/www/src/public/registry/styles/new-york/drawer.json
index 8982181d..6c60eae7 100644
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ b/apps/www/src/public/registry/styles/new-york/drawer.json
@@ -41,4 +41,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 3c2ab614..e834d04c 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/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index b2a3dcf4..2c69a3a5 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.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/hover-card.json b/apps/www/src/public/registry/styles/new-york/hover-card.json
index 7dfb7f47..5883a52e 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
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 a7e9c552..7b840496 100644
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ b/apps/www/src/public/registry/styles/new-york/input.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 d827d8be..0cfedee1 100644
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ b/apps/www/src/public/registry/styles/new-york/label.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/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 578ebe84..9602ca23 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 055569f9..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
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 4dd33388..e07f0b04 100644
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -32,4 +32,4 @@
     }
   ],
   "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
index 617f41a3..041f1411 100644
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ b/apps/www/src/public/registry/styles/new-york/pin-input.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 00f53e9c..034bb416 100644
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ b/apps/www/src/public/registry/styles/new-york/popover.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 0df36278..03f8fe71 100644
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ b/apps/www/src/public/registry/styles/new-york/progress.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/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
index 1a415d84..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
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/range-calendar.json b/apps/www/src/public/registry/styles/new-york/range-calendar.json
new file mode 100644
index 00000000..26bdb1a5
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/range-calendar.json
@@ -0,0 +1,63 @@
+{
+  "name": "range-calendar",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "RangeCalendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+    },
+    {
+      "name": "RangeCalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/resizable.json b/apps/www/src/public/registry/styles/new-york/resizable.json
index eb2ccc2b..8d9ab3c7 100644
--- a/apps/www/src/public/registry/styles/new-york/resizable.json
+++ b/apps/www/src/public/registry/styles/new-york/resizable.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/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
index 2647bf53..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
@@ -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 da8076e4..01409a08 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/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
index 2d5d85df..da6dd655 100644
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ b/apps/www/src/public/registry/styles/new-york/separator.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/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index 8fd739e1..215d8f67 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.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/skeleton.json b/apps/www/src/public/registry/styles/new-york/skeleton.json
index ceb9997d..1487c9e2 100644
--- a/apps/www/src/public/registry/styles/new-york/skeleton.json
+++ b/apps/www/src/public/registry/styles/new-york/skeleton.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/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
index 6f1c60fd..dbe372c5 100644
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ b/apps/www/src/public/registry/styles/new-york/slider.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/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
index 3a164849..ae170e52 100644
--- a/apps/www/src/public/registry/styles/new-york/sonner.json
+++ b/apps/www/src/public/registry/styles/new-york/sonner.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/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 d7f98df7..27805556 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/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
index 8c2cef7c..f238ee00 100644
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ b/apps/www/src/public/registry/styles/new-york/tabs.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
index 247c32ce..3eaa3f7e 100644
--- a/apps/www/src/public/registry/styles/new-york/tags-input.json
+++ b/apps/www/src/public/registry/styles/new-york/tags-input.json
@@ -31,4 +31,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 72d2929a..40b5b596 100644
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ b/apps/www/src/public/registry/styles/new-york/textarea.json
@@ -17,4 +17,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 185a083e..99669a77 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/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
index 7d1e77a8..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
@@ -20,4 +20,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
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 52151f2d..4ccde5ca 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.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/tooltip.json b/apps/www/src/public/registry/styles/new-york/tooltip.json
index 5b08bfaf..975435fe 100644
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/src/public/registry/styles/new-york/tooltip.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json
new file mode 100644
index 00000000..47ba04d0
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/v-calendar.json
@@ -0,0 +1,22 @@
+{
+  "name": "v-calendar",
+  "dependencies": [
+    "@vueuse/core",
+    "v-calendar@next"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "Calendar.vue",
+      "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        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 2150c34e..b74b9c13 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "baseUrl": ".",
-    "moduleResolution": "Node",
     "paths": {
       "@/*": ["./src/*"]
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 096d1a2e..24d4935e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.1
         version: 0.8.1
+      '@internationalized/date':
+        specifier: ^3.5.2
+        version: 3.5.2
       '@radix-icons/vue':
         specifier: ^1.0.0
         version: 1.0.0(vue@3.4.21)
@@ -93,8 +96,8 @@ importers:
         specifier: ^0.30.8
         version: 0.30.8
       radix-vue:
-        specifier: ^1.6.2
-        version: 1.6.2(vue@3.4.21)
+        specifier: ^1.7.0
+        version: 1.7.0(vue@3.4.21)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
@@ -146,10 +149,10 @@ importers:
         version: 20.11.30
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.4(vite@5.2.2)(vue@3.4.21)
+        version: 5.0.4(vite@5.2.7)(vue@3.4.21)
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
-        version: 3.1.0(vite@5.2.2)(vue@3.4.21)
+        version: 3.1.0(vite@5.2.7)(vue@3.4.21)
       '@vue/compiler-core':
         specifier: ^3.4.21
         version: 3.4.21
@@ -161,7 +164,7 @@ importers:
         version: 0.5.1
       autoprefixer:
         specifier: ^10.4.18
-        version: 10.4.18(postcss@8.4.37)
+        version: 10.4.18(postcss@8.4.38)
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
@@ -193,11 +196,11 @@ importers:
         specifier: ^0.18.5
         version: 0.18.5(@vue/compiler-sfc@3.4.21)
       vite:
-        specifier: ^5.2.2
-        version: 5.2.2(@types/node@20.11.30)
+        specifier: ^5.2.7
+        version: 5.2.7(@types/node@20.11.30)
       vitepress:
-        specifier: ^1.0.0-rc.45
-        version: 1.0.0-rc.45(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.37)(search-insights@2.13.0)(typescript@5.4.2)
+        specifier: ^1.0.1
+        version: 1.0.1(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.38)(search-insights@2.13.0)(typescript@5.4.2)
       vue-tsc:
         specifier: ^2.0.7
         version: 2.0.7(typescript@5.4.2)
@@ -313,7 +316,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: latest
-        version: 1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2)
+        version: 1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7)
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.57.0)
@@ -325,13 +328,13 @@ importers:
         version: 3.11.1(rollup@3.29.4)
       '@nuxt/test-utils':
         specifier: ^3.12.0
-        version: 3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.2)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
+        version: 3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.7)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
       '@types/node':
         specifier: ^20.11.30
         version: 20.11.30
       nuxt:
         specifier: ^3.11.1
-        version: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2)
+        version: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7)
       vitest:
         specifier: ^0.33.0
         version: 0.33.0
@@ -1332,14 +1335,14 @@ packages:
       chalk: 5.3.0
     dev: true
 
-  /@docsearch/css@3.5.2:
-    resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
+  /@docsearch/css@3.6.0:
+    resolution: {integrity: sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0):
-    resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
+  /@docsearch/js@3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0):
+    resolution: {integrity: sha512-QujhqINEElrkIfKwyyyTfbsfMAYCkylInLYMRqHy7PHc8xTBQCow73tlo/Kc7oIwBrCLf0P3YhjlOeV4v8hevQ==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0)
+      '@docsearch/react': 3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0)
       preact: 10.19.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1349,8 +1352,8 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0):
-    resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
+  /@docsearch/react@3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0):
+    resolution: {integrity: sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
       react: '>= 16.8.0 < 19.0.0'
@@ -1368,7 +1371,7 @@ packages:
     dependencies:
       '@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
+      '@docsearch/css': 3.6.0
       algoliasearch: 4.22.1
       search-insights: 2.13.0
     transitivePeerDependencies:
@@ -1463,15 +1466,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/aix-ppc64@0.20.1:
-    resolution: {integrity: sha512-m55cpeupQ2DbuRGQMMZDzbv9J9PgVelPjlcmM5kxHnrBdBx6REaEd7LamYV7Dm8N7rCyR/XwU6rVP8ploKtIkA==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/aix-ppc64@0.20.2:
     resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
     engines: {node: '>=12'}
@@ -1499,15 +1493,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.20.1:
-    resolution: {integrity: sha512-hCnXNF0HM6AjowP+Zou0ZJMWWa1VkD77BXe959zERgGJBBxB+sV+J9f/rcjeg2c5bsukD/n17RKWXGFCO5dD5A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm64@0.20.2:
     resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
     engines: {node: '>=12'}
@@ -1535,15 +1520,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.20.1:
-    resolution: {integrity: sha512-4j0+G27/2ZXGWR5okcJi7pQYhmkVgb4D7UKwxcqrjhvp5TKWx3cUjgB1CGj1mfdmJBQ9VnUGgUhign+FPF2Zgw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm@0.20.2:
     resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
     engines: {node: '>=12'}
@@ -1571,15 +1547,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.20.1:
-    resolution: {integrity: sha512-MSfZMBoAsnhpS+2yMFYIQUPs8Z19ajwfuaSZx+tSl09xrHZCjbeXXMsUF/0oq7ojxYEpsSo4c0SfjxOYXRbpaA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-x64@0.20.2:
     resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
     engines: {node: '>=12'}
@@ -1607,15 +1574,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.20.1:
-    resolution: {integrity: sha512-Ylk6rzgMD8klUklGPzS414UQLa5NPXZD5tf8JmQU8GQrj6BrFA/Ic9tb2zRe1kOZyCbGl+e8VMbDRazCEBqPvA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/darwin-arm64@0.20.2:
     resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
     engines: {node: '>=12'}
@@ -1643,15 +1601,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.20.1:
-    resolution: {integrity: sha512-pFIfj7U2w5sMp52wTY1XVOdoxw+GDwy9FsK3OFz4BpMAjvZVs0dT1VXs8aQm22nhwoIWUmIRaE+4xow8xfIDZA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/darwin-x64@0.20.2:
     resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
     engines: {node: '>=12'}
@@ -1679,15 +1628,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.20.1:
-    resolution: {integrity: sha512-UyW1WZvHDuM4xDz0jWun4qtQFauNdXjXOtIy7SYdf7pbxSWWVlqhnR/T2TpX6LX5NI62spt0a3ldIIEkPM6RHw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/freebsd-arm64@0.20.2:
     resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
     engines: {node: '>=12'}
@@ -1715,15 +1655,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.20.1:
-    resolution: {integrity: sha512-itPwCw5C+Jh/c624vcDd9kRCCZVpzpQn8dtwoYIt2TJF3S9xJLiRohnnNrKwREvcZYx0n8sCSbvGH349XkcQeg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/freebsd-x64@0.20.2:
     resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
     engines: {node: '>=12'}
@@ -1751,15 +1682,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.20.1:
-    resolution: {integrity: sha512-cX8WdlF6Cnvw/DO9/X7XLH2J6CkBnz7Twjpk56cshk9sjYVcuh4sXQBy5bmTwzBjNVZze2yaV1vtcJS04LbN8w==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-arm64@0.20.2:
     resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
     engines: {node: '>=12'}
@@ -1787,15 +1709,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.20.1:
-    resolution: {integrity: sha512-LojC28v3+IhIbfQ+Vu4Ut5n3wKcgTu6POKIHN9Wpt0HnfgUGlBuyDDQR4jWZUZFyYLiz4RBBBmfU6sNfn6RhLw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-arm@0.20.2:
     resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
     engines: {node: '>=12'}
@@ -1823,15 +1736,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.20.1:
-    resolution: {integrity: sha512-4H/sQCy1mnnGkUt/xszaLlYJVTz3W9ep52xEefGtd6yXDQbz/5fZE5dFLUgsPdbUOQANcVUa5iO6g3nyy5BJiw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-ia32@0.20.2:
     resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
     engines: {node: '>=12'}
@@ -1859,15 +1763,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.20.1:
-    resolution: {integrity: sha512-c0jgtB+sRHCciVXlyjDcWb2FUuzlGVRwGXgI+3WqKOIuoo8AmZAddzeOHeYLtD+dmtHw3B4Xo9wAUdjlfW5yYA==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-loong64@0.20.2:
     resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
     engines: {node: '>=12'}
@@ -1895,15 +1790,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.20.1:
-    resolution: {integrity: sha512-TgFyCfIxSujyuqdZKDZ3yTwWiGv+KnlOeXXitCQ+trDODJ+ZtGOzLkSWngynP0HZnTsDyBbPy7GWVXWaEl6lhA==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-mips64el@0.20.2:
     resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
     engines: {node: '>=12'}
@@ -1931,15 +1817,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.20.1:
-    resolution: {integrity: sha512-b+yuD1IUeL+Y93PmFZDZFIElwbmFfIKLKlYI8M6tRyzE6u7oEP7onGk0vZRh8wfVGC2dZoy0EqX1V8qok4qHaw==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-ppc64@0.20.2:
     resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
     engines: {node: '>=12'}
@@ -1967,15 +1844,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.20.1:
-    resolution: {integrity: sha512-wpDlpE0oRKZwX+GfomcALcouqjjV8MIX8DyTrxfyCfXxoKQSDm45CZr9fanJ4F6ckD4yDEPT98SrjvLwIqUCgg==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-riscv64@0.20.2:
     resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
     engines: {node: '>=12'}
@@ -2003,15 +1871,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.20.1:
-    resolution: {integrity: sha512-5BepC2Au80EohQ2dBpyTquqGCES7++p7G+7lXe1bAIvMdXm4YYcEfZtQrP4gaoZ96Wv1Ute61CEHFU7h4FMueQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-s390x@0.20.2:
     resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
     engines: {node: '>=12'}
@@ -2039,15 +1898,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.20.1:
-    resolution: {integrity: sha512-5gRPk7pKuaIB+tmH+yKd2aQTRpqlf1E4f/mC+tawIm/CGJemZcHZpp2ic8oD83nKgUPMEd0fNanrnFljiruuyA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-x64@0.20.2:
     resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
     engines: {node: '>=12'}
@@ -2075,15 +1925,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.20.1:
-    resolution: {integrity: sha512-4fL68JdrLV2nVW2AaWZBv3XEm3Ae3NZn/7qy2KGAt3dexAgSVT+Hc97JKSZnqezgMlv9x6KV0ZkZY7UO5cNLCg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/netbsd-x64@0.20.2:
     resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
     engines: {node: '>=12'}
@@ -2111,15 +1952,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.20.1:
-    resolution: {integrity: sha512-GhRuXlvRE+twf2ES+8REbeCb/zeikNqwD3+6S5y5/x+DYbAQUNl0HNBs4RQJqrechS4v4MruEr8ZtAin/hK5iw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/openbsd-x64@0.20.2:
     resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
     engines: {node: '>=12'}
@@ -2147,15 +1979,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.20.1:
-    resolution: {integrity: sha512-ZnWEyCM0G1Ex6JtsygvC3KUUrlDXqOihw8RicRuQAzw+c4f1D66YlPNNV3rkjVW90zXVsHwZYWbJh3v+oQFM9Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/sunos-x64@0.20.2:
     resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
     engines: {node: '>=12'}
@@ -2183,15 +2006,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.20.1:
-    resolution: {integrity: sha512-QZ6gXue0vVQY2Oon9WyLFCdSuYbXSoxaZrPuJ4c20j6ICedfsDilNPYfHLlMH7vGfU5DQR0czHLmJvH4Nzis/A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-arm64@0.20.2:
     resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
     engines: {node: '>=12'}
@@ -2219,15 +2033,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.20.1:
-    resolution: {integrity: sha512-HzcJa1NcSWTAU0MJIxOho8JftNp9YALui3o+Ny7hCh0v5f90nprly1U3Sj1Ldj/CvKKdvvFsCRvDkpsEMp4DNw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-ia32@0.20.2:
     resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
     engines: {node: '>=12'}
@@ -2255,15 +2060,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.20.1:
-    resolution: {integrity: sha512-0MBh53o6XtI6ctDnRMeQ+xoCN8kD2qI1rY1KgF/xdWQwoFeKou7puvDfV8/Wv4Ctx2rRpET/gGdz3YlNtNACSA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-x64@0.20.2:
     resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
     engines: {node: '>=12'}
@@ -2754,7 +2550,7 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2):
+  /@nuxt/devtools-kit@1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-j7bNZmoAXQ1a8qv6j6zk4c/aekrxYqYVQM21o/Hy4XHCUq4fajSgpoc8mjyWJSTfpkOmuLyEzMexpDWiIVSr6A==}
     peerDependencies:
       nuxt: ^3.9.0
@@ -2763,14 +2559,14 @@ packages:
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
       '@nuxt/schema': 3.11.1(rollup@3.29.4)
       execa: 7.2.0
-      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2)
-      vite: 5.2.2(@types/node@20.11.30)
+      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@nuxt/devtools-kit@1.1.0(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2):
+  /@nuxt/devtools-kit@1.1.0(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-Mf198/nwoM6VaAuAA9TPB6gt0Ic9DiDjBGCuVDiUBVFEr253y30474bKU8+P3JQa0LYYkzzBLJVKDSd8wb4fZg==}
     peerDependencies:
       nuxt: ^3.9.0
@@ -2779,8 +2575,8 @@ packages:
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
       '@nuxt/schema': 3.11.1(rollup@3.29.4)
       execa: 7.2.0
-      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2)
-      vite: 5.2.2(@types/node@20.11.30)
+      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2818,7 +2614,7 @@ packages:
       semver: 7.6.0
     dev: true
 
-  /@nuxt/devtools@1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2):
+  /@nuxt/devtools@1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-o6aBFEBxc8OgVHV4OPe2g0q9tFIe9HiTxRiJnlTJ+jHvOQsBLS651ArdVtwLChf9UdMouFlpLLJ1HteZqTbtsQ==}
     hasBin: true
     peerDependencies:
@@ -2826,7 +2622,7 @@ packages:
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.7
-      '@nuxt/devtools-kit': 1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2)
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7)
       '@nuxt/devtools-wizard': 1.0.8
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
       birpc: 0.2.15
@@ -2843,7 +2639,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.3
-      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2)
+      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7)
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 17.0.6
@@ -2856,9 +2652,9 @@ packages:
       simple-git: 3.22.0
       sirv: 2.0.4
       unimport: 3.7.1(rollup@3.29.4)
-      vite: 5.2.2(@types/node@20.11.30)
-      vite-plugin-inspect: 0.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.2)
-      vite-plugin-vue-inspector: 4.0.2(vite@5.2.2)
+      vite: 5.2.7(@types/node@20.11.30)
+      vite-plugin-inspect: 0.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.7)
+      vite-plugin-vue-inspector: 4.0.2(vite@5.2.7)
       which: 3.0.1
       ws: 8.16.0
     transitivePeerDependencies:
@@ -2869,7 +2665,7 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@nuxt/devtools@1.1.0(@unocss/reset@0.58.6)(floating-vue@5.2.2)(nuxt@3.11.1)(rollup@3.29.4)(unocss@0.58.6)(vite@5.2.2)(vue@3.4.21):
+  /@nuxt/devtools@1.1.0(@unocss/reset@0.58.6)(floating-vue@5.2.2)(nuxt@3.11.1)(rollup@3.29.4)(unocss@0.58.6)(vite@5.2.7)(vue@3.4.21):
     resolution: {integrity: sha512-55oopcCMA8TLcVXUEEPX5gWwtQeOV3ux0XdYL0ougXtsgeBf4Jr5cO/VxI5pC7kPYojJmxy/cxbVVgTDVd4TfA==}
     hasBin: true
     peerDependencies:
@@ -2877,11 +2673,11 @@ packages:
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.7
-      '@nuxt/devtools-kit': 1.1.0(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.2)
+      '@nuxt/devtools-kit': 1.1.0(nuxt@3.11.1)(rollup@3.29.4)(vite@5.2.7)
       '@nuxt/devtools-wizard': 1.1.0
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
-      '@vue/devtools-applet': 7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vite@5.2.2)(vue@3.4.21)
-      '@vue/devtools-core': 7.0.20(vite@5.2.2)(vue@3.4.21)
+      '@vue/devtools-applet': 7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vite@5.2.7)(vue@3.4.21)
+      '@vue/devtools-core': 7.0.20(vite@5.2.7)(vue@3.4.21)
       '@vue/devtools-kit': 7.0.20(vue@3.4.21)
       birpc: 0.2.17
       consola: 3.2.3
@@ -2898,7 +2694,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.3
-      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2)
+      nuxt: 3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7)
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 17.0.6
@@ -2911,9 +2707,9 @@ packages:
       simple-git: 3.23.0
       sirv: 2.0.4
       unimport: 3.7.1(rollup@3.29.4)
-      vite: 5.2.2(@types/node@20.11.30)
-      vite-plugin-inspect: 0.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.2)
-      vite-plugin-vue-inspector: 4.0.2(vite@5.2.2)
+      vite: 5.2.7(@types/node@20.11.30)
+      vite-plugin-inspect: 0.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.7)
+      vite-plugin-vue-inspector: 4.0.2(vite@5.2.7)
       which: 3.0.1
       ws: 8.16.0
     transitivePeerDependencies:
@@ -3046,7 +2842,7 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/test-utils@3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.2)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21):
+  /@nuxt/test-utils@3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.7)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21):
     resolution: {integrity: sha512-Q3HP53TDIYeqHT65r31HZhK/gRwVBmchSdVj1tfiYECyqstckvsQ4Cyt/GX/XmD7cLdD3d5aHow8LaMfP+BSqQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -3109,9 +2905,9 @@ packages:
       ufo: 1.5.3
       unenv: 1.9.0
       unplugin: 1.10.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vitest: 0.33.0
-      vitest-environment-nuxt: 1.0.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.2)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
+      vitest-environment-nuxt: 1.0.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.7)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.2)
       vue-router: 4.3.0(vue@3.4.21)
     transitivePeerDependencies:
@@ -3130,8 +2926,8 @@ packages:
     dependencies:
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
       '@rollup/plugin-replace': 5.0.5(rollup@3.29.4)
-      '@vitejs/plugin-vue': 5.0.4(vite@5.2.2)(vue@3.4.21)
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.2.2)(vue@3.4.21)
+      '@vitejs/plugin-vue': 5.0.4(vite@5.2.7)(vue@3.4.21)
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.2.7)(vue@3.4.21)
       autoprefixer: 10.4.18(postcss@8.4.37)
       clear: 0.1.0
       consola: 3.2.3
@@ -3158,9 +2954,9 @@ packages:
       ufo: 1.5.3
       unenv: 1.9.0
       unplugin: 1.10.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vite-node: 1.4.0(@types/node@20.11.30)
-      vite-plugin-checker: 0.6.4(eslint@8.57.0)(typescript@5.4.2)(vite@5.2.2)
+      vite-plugin-checker: 0.6.4(eslint@8.57.0)(typescript@5.4.2)(vite@5.2.7)
       vue: 3.4.21(typescript@5.4.2)
       vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
@@ -3835,10 +3631,6 @@ packages:
     resolution: {integrity: sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==}
     dev: true
 
-  /@shikijs/core@1.1.7:
-    resolution: {integrity: sha512-gTYLUIuD1UbZp/11qozD3fWpUTuMqPSf3svDMMrL0UmlGU7D9dPw/V1FonwAorCUJBltaaESxq90jrSjQyGixg==}
-    dev: true
-
   /@shikijs/core@1.2.0:
     resolution: {integrity: sha512-OlFvx+nyr5C8zpcMBnSGir0YPD6K11uYhouqhNmm1qLiis4GA7SsGtu07r9gKS9omks8RtQqHrJL4S+lqWK01A==}
     dev: true
@@ -3992,6 +3784,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /@tanstack/virtual-core@3.2.0:
+    resolution: {integrity: sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==}
+    dev: false
+
   /@tanstack/vue-table@8.14.0(vue@3.4.21):
     resolution: {integrity: sha512-mQWgUe+cw2YybTC68x54XkMCeALW+NwO8FYWUripqfJUiWm9haR4tWlTWUU81d/3GPb7chAKaqwQ/9j2u6dXYw==}
     engines: {node: '>=12'}
@@ -4002,6 +3798,15 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /@tanstack/vue-virtual@3.2.0(vue@3.4.21):
+    resolution: {integrity: sha512-KbmQVvw1k5Js2Fk4DJw9aDxFT5+e8a2Ba4UBJAFCRnWBCnzd3NlmEHI9JCeLv1tYDZ/iHwwv+Z9Le0BENIEP8A==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.2.0
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -4841,7 +4646,7 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: true
 
-  /@unocss/astro@0.58.6(rollup@3.29.4)(vite@5.2.2):
+  /@unocss/astro@0.58.6(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-0BvbhEp5Ln6wFNnhISusB2hcfycWkdgnjlFMcLT69efvj4G39MzB6JYT/1qiidLfpj35HcqkpBz7TfZ4bUmOAw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
@@ -4851,8 +4656,8 @@ packages:
     dependencies:
       '@unocss/core': 0.58.6
       '@unocss/reset': 0.58.6
-      '@unocss/vite': 0.58.6(rollup@3.29.4)(vite@5.2.2)
-      vite: 5.2.2(@types/node@20.11.30)
+      '@unocss/vite': 0.58.6(rollup@3.29.4)(vite@5.2.7)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5035,7 +4840,7 @@ packages:
       '@unocss/core': 0.58.6
     dev: true
 
-  /@unocss/vite@0.58.6(rollup@3.29.4)(vite@5.2.2):
+  /@unocss/vite@0.58.6(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-DPXCoYU/Ozqc/Jeptd41XvtW8MSgVxmtTyhpMAsm/hJuBfwIV7Fy3TZquf4V9BpaTb4ao1LVXzgXmVUmj2HXpA==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
@@ -5050,7 +4855,7 @@ packages:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.8
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5147,7 +4952,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.2)(vue@3.4.21):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.7)(vue@3.4.21):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -5157,20 +4962,20 @@ packages:
       '@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.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@5.2.2)(vue@3.4.21):
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.7)(vue@3.4.21):
     resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vue: 3.4.21(typescript@5.4.2)
     dev: true
 
@@ -5461,18 +5266,20 @@ 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==}
+  /@vue/devtools-api@7.0.25(vue@3.4.21):
+    resolution: {integrity: sha512-fL6DlRp4MSXCLYcqYvKU7QhQZWE3Hfu7X8pC25BS74coJi7uJeSWs4tmrITcwFihNmC9S5GPiffkMdckkeWjzg==}
     dependencies:
-      '@vue/devtools-kit': 7.0.14
+      '@vue/devtools-kit': 7.0.25(vue@3.4.21)
+    transitivePeerDependencies:
+      - vue
     dev: true
 
-  /@vue/devtools-applet@7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vite@5.2.2)(vue@3.4.21):
+  /@vue/devtools-applet@7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vite@5.2.7)(vue@3.4.21):
     resolution: {integrity: sha512-q48RtnhFmC0kd4N+3Edfctv6oL2neN6crUapBydSr6szjR87dQJygTEYKlpyx0SHmVLVwq4mcgFuf1ftAKjd/w==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@vue/devtools-core': 7.0.20(vite@5.2.2)(vue@3.4.21)
+      '@vue/devtools-core': 7.0.20(vite@5.2.7)(vue@3.4.21)
       '@vue/devtools-kit': 7.0.20(vue@3.4.21)
       '@vue/devtools-shared': 7.0.20
       '@vue/devtools-ui': 7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vue@3.4.21)
@@ -5499,7 +5306,7 @@ packages:
       - vite
     dev: true
 
-  /@vue/devtools-core@7.0.20(vite@5.2.2)(vue@3.4.21):
+  /@vue/devtools-core@7.0.20(vite@5.2.7)(vue@3.4.21):
     resolution: {integrity: sha512-JefAn0ljTUPtoEJ47PjEfcLQb9BVt3OH1R6aD8qZ7bNYwZH+xystXpVJ3pW+1iDnOXjfpLgc3bsHUZoxlfobpw==}
     dependencies:
       '@vue/devtools-kit': 7.0.20(vue@3.4.21)
@@ -5507,23 +5314,12 @@ packages:
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@5.2.2)
+      vite-hot-client: 0.2.3(vite@5.2.7)
     transitivePeerDependencies:
       - vite
       - vue
     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-kit@7.0.20(vue@3.4.21):
     resolution: {integrity: sha512-FgFuPuqrhQ51rR/sVi52FnGgrxJ3X1bvNra/SkBzPhxJVhfyL5w2YUJZI1FgCvtLAyPSomJNdvlG415ZbJsr6w==}
     peerDependencies:
@@ -5537,14 +5333,17 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     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==}
+  /@vue/devtools-kit@7.0.25(vue@3.4.21):
+    resolution: {integrity: sha512-wbLkSnOTsKHPb1mB9koFHUoSAF8Dp6Ii/ocR2+DeXFY4oKqIjCeJb/4Lihk4rgqEhCy1WwxLfTgNDo83VvDYkQ==}
+    peerDependencies:
+      vue: ^3.0.0
     dependencies:
-      rfdc: 1.3.1
+      '@vue/devtools-shared': 7.0.25
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      vue: 3.4.21(typescript@5.4.2)
     dev: true
 
   /@vue/devtools-shared@7.0.20:
@@ -5553,6 +5352,12 @@ packages:
       rfdc: 1.3.1
     dev: true
 
+  /@vue/devtools-shared@7.0.25:
+    resolution: {integrity: sha512-5+XYhcHSXuJSguYnNwL6/e6VTmXwCfryWQOkffh9ZU2zMByybqqqBrMWqvBkqTmMFCjPdzulo66xXbVbwLaElQ==}
+    dependencies:
+      rfdc: 1.3.1
+    dev: true
+
   /@vue/devtools-ui@7.0.20(@unocss/reset@0.58.6)(floating-vue@5.2.2)(unocss@0.58.6)(vue@3.4.21):
     resolution: {integrity: sha512-0Jy+9l8gQKnEPitOBthib6bZPdf2FipPIpMZPZ90xH4z1nWGN2aHBqOHH3dMpNgnymlkgAR5QDvodj5RcxiUGw==}
     peerDependencies:
@@ -5568,7 +5373,7 @@ packages:
       colord: 2.9.3
       floating-vue: 5.2.2(@nuxt/kit@3.11.1)(vue@3.4.21)
       focus-trap: 7.5.4
-      unocss: 0.58.6(postcss@8.4.37)(rollup@3.29.4)(vite@5.2.2)
+      unocss: 0.58.6(postcss@8.4.37)(rollup@3.29.4)(vite@5.2.7)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -5657,18 +5462,6 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/core@10.7.2(vue@3.4.21):
-    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.21)
-      vue-demi: 0.14.7(vue@3.4.21)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
-
   /@vueuse/core@10.9.0(vue@3.4.21):
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
     dependencies:
@@ -5680,56 +5473,6 @@ packages:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/integrations@10.7.2(focus-trap@7.5.4)(vue@3.4.21):
-    resolution: {integrity: sha512-+u3RLPFedjASs5EKPc69Ge49WNgqeMfSxFn+qrQTzblPXZg6+EFzhjarS5edj2qAf6xQ93f95TUxRwKStXj/sQ==}
-    peerDependencies:
-      async-validator: '*'
-      axios: '*'
-      change-case: '*'
-      drauu: '*'
-      focus-trap: '*'
-      fuse.js: '*'
-      idb-keyval: '*'
-      jwt-decode: '*'
-      nprogress: '*'
-      qrcode: '*'
-      sortablejs: '*'
-      universal-cookie: '*'
-    peerDependenciesMeta:
-      async-validator:
-        optional: true
-      axios:
-        optional: true
-      change-case:
-        optional: true
-      drauu:
-        optional: true
-      focus-trap:
-        optional: true
-      fuse.js:
-        optional: true
-      idb-keyval:
-        optional: true
-      jwt-decode:
-        optional: true
-      nprogress:
-        optional: true
-      qrcode:
-        optional: true
-      sortablejs:
-        optional: true
-      universal-cookie:
-        optional: true
-    dependencies:
-      '@vueuse/core': 10.7.2(vue@3.4.21)
-      '@vueuse/shared': 10.7.2(vue@3.4.21)
-      focus-trap: 7.5.4
-      vue-demi: 0.14.7(vue@3.4.21)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
-
   /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.21):
     resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
     peerDependencies:
@@ -5780,22 +5523,9 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/metadata@10.7.2:
-    resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==}
-    dev: true
-
   /@vueuse/metadata@10.9.0:
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
-  /@vueuse/shared@10.7.2(vue@3.4.21):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
-    dependencies:
-      vue-demi: 0.14.7(vue@3.4.21)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
-
   /@vueuse/shared@10.9.0(vue@3.4.21):
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
@@ -6155,6 +5885,22 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /autoprefixer@10.4.18(postcss@8.4.38):
+    resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001593
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /axios@0.18.1:
     resolution: {integrity: sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==}
     deprecated: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
@@ -7979,37 +7725,6 @@ packages:
       '@esbuild/win32-x64': 0.19.12
     dev: true
 
-  /esbuild@0.20.1:
-    resolution: {integrity: sha512-OJwEgrpWm/PCMsLVWXKqvcjme3bHNpOgN7Tb6cQnR5n0TPbQx1/Xrn7rqM+wn17bYeT6MGB5sn1Bh5YiGi70nA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.20.1
-      '@esbuild/android-arm': 0.20.1
-      '@esbuild/android-arm64': 0.20.1
-      '@esbuild/android-x64': 0.20.1
-      '@esbuild/darwin-arm64': 0.20.1
-      '@esbuild/darwin-x64': 0.20.1
-      '@esbuild/freebsd-arm64': 0.20.1
-      '@esbuild/freebsd-x64': 0.20.1
-      '@esbuild/linux-arm': 0.20.1
-      '@esbuild/linux-arm64': 0.20.1
-      '@esbuild/linux-ia32': 0.20.1
-      '@esbuild/linux-loong64': 0.20.1
-      '@esbuild/linux-mips64el': 0.20.1
-      '@esbuild/linux-ppc64': 0.20.1
-      '@esbuild/linux-riscv64': 0.20.1
-      '@esbuild/linux-s390x': 0.20.1
-      '@esbuild/linux-x64': 0.20.1
-      '@esbuild/netbsd-x64': 0.20.1
-      '@esbuild/openbsd-x64': 0.20.1
-      '@esbuild/sunos-x64': 0.20.1
-      '@esbuild/win32-arm64': 0.20.1
-      '@esbuild/win32-ia32': 0.20.1
-      '@esbuild/win32-x64': 0.20.1
-    dev: true
-
   /esbuild@0.20.2:
     resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
     engines: {node: '>=12'}
@@ -11075,7 +10790,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /nuxt@3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.2):
+  /nuxt@3.11.1(@types/node@20.11.30)(@unocss/reset@0.58.6)(eslint@8.57.0)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.2)(unocss@0.58.6)(vite@5.2.7):
     resolution: {integrity: sha512-CsncE1dxP0cmOYT+PBdjMD0bOK8eZizG5tgNWUOJAAAtU45sO38maoBumYYL2kUpT/SC/dMP+831DAcVPvi9pQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -11089,7 +10804,7 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.1.0(@unocss/reset@0.58.6)(floating-vue@5.2.2)(nuxt@3.11.1)(rollup@3.29.4)(unocss@0.58.6)(vite@5.2.2)(vue@3.4.21)
+      '@nuxt/devtools': 1.1.0(@unocss/reset@0.58.6)(floating-vue@5.2.2)(nuxt@3.11.1)(rollup@3.29.4)(unocss@0.58.6)(vite@5.2.7)(vue@3.4.21)
       '@nuxt/kit': 3.11.1(rollup@3.29.4)
       '@nuxt/schema': 3.11.1(rollup@3.29.4)
       '@nuxt/telemetry': 2.5.3(rollup@3.29.4)
@@ -12355,6 +12070,15 @@ packages:
       source-map-js: 1.2.0
     dev: true
 
+  /postcss@8.4.38:
+    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.2.0
+    dev: true
+
   /potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
     dev: false
@@ -12520,6 +12244,26 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /radix-vue@1.7.0(vue@3.4.21):
+    resolution: {integrity: sha512-lyAllebKbEGECEIKdC74gjOxgCtHjGKbINH/RUOP6p0Qk2HOsV06WGONStDl+c3FZKzoiH0rhPSI85Y6gKhMnw==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.1
+      '@floating-ui/vue': 1.0.6(vue@3.4.21)
+      '@internationalized/date': 3.5.2
+      '@tanstack/vue-virtual': 3.2.0(vue@3.4.21)
+      '@vueuse/core': 10.9.0(vue@3.4.21)
+      '@vueuse/shared': 10.9.0(vue@3.4.21)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.6
+      vue: 3.4.21(typescript@5.4.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /radix3@1.1.1:
     resolution: {integrity: sha512-yUUd5VTiFtcMEx0qFUxGAv5gbMc1un4RvEO1JZdP7ZUl/RHygZK6PknIKntmQRZxnMY3ZXD2ISaw1ij8GYW1yg==}
     dev: true
@@ -14207,7 +13951,7 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  /unocss@0.58.6(postcss@8.4.37)(rollup@3.29.4)(vite@5.2.2):
+  /unocss@0.58.6(postcss@8.4.37)(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-HBstDtC6KKD5yCYh5hHpPdHGZai0B/iLlDwkOIK+xfQYrvl8tNBvKfRz3xgiaI5MJ+fLmEOxbfXQIjleU1A0iA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -14219,7 +13963,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.58.6(rollup@3.29.4)(vite@5.2.2)
+      '@unocss/astro': 0.58.6(rollup@3.29.4)(vite@5.2.7)
       '@unocss/cli': 0.58.6(rollup@3.29.4)
       '@unocss/core': 0.58.6
       '@unocss/extractor-arbitrary-variants': 0.58.6
@@ -14238,8 +13982,8 @@ packages:
       '@unocss/transformer-compile-class': 0.58.6
       '@unocss/transformer-directives': 0.58.6
       '@unocss/transformer-variant-group': 0.58.6
-      '@unocss/vite': 0.58.6(rollup@3.29.4)(vite@5.2.2)
-      vite: 5.2.2(@types/node@20.11.30)
+      '@unocss/vite': 0.58.6(rollup@3.29.4)(vite@5.2.7)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -14518,7 +14262,7 @@ packages:
     resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
     dependencies:
       '@vueuse/core': 10.9.0(vue@3.4.21)
-      radix-vue: 1.6.2(vue@3.4.21)
+      radix-vue: 1.7.0(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -14545,12 +14289,12 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
-  /vite-hot-client@0.2.3(vite@5.2.2):
+  /vite-hot-client@0.2.3(vite@5.2.7):
     resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     dev: true
 
   /vite-node@0.33.0(@types/node@20.11.30):
@@ -14585,7 +14329,7 @@ packages:
       mlly: 1.6.1
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14606,7 +14350,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14618,7 +14362,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker@0.6.4(eslint@8.57.0)(typescript@5.4.2)(vite@5.2.2):
+  /vite-plugin-checker@0.6.4(eslint@8.57.0)(typescript@5.4.2)(vite@5.2.7):
     resolution: {integrity: sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -14662,14 +14406,14 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.4.2
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       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.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.2):
+  /vite-plugin-inspect@0.8.3(@nuxt/kit@3.11.1)(rollup@3.29.4)(vite@5.2.7):
     resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -14689,13 +14433,13 @@ packages:
       perfect-debounce: 1.0.0
       picocolors: 1.0.0
       sirv: 2.0.4
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-vue-inspector@4.0.2(vite@5.2.2):
+  /vite-plugin-vue-inspector@4.0.2(vite@5.2.7):
     resolution: {integrity: sha512-KPvLEuafPG13T7JJuQbSm5PwSxKFnVS965+MP1we2xGw9BPkkc/+LPix5MMWenpKWqtjr0ws8THrR+KuoDC8hg==}
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
@@ -14709,7 +14453,7 @@ packages:
       '@vue/compiler-dom': 3.4.21
       kolorist: 1.8.0
       magic-string: 0.30.8
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -14766,8 +14510,8 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.2.2(@types/node@20.11.30):
-    resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==}
+  /vite@5.2.7(@types/node@20.11.30):
+    resolution: {integrity: sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -14795,40 +14539,40 @@ packages:
         optional: true
     dependencies:
       '@types/node': 20.11.30
-      esbuild: 0.20.1
-      postcss: 8.4.37
+      esbuild: 0.20.2
+      postcss: 8.4.38
       rollup: 4.13.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.45(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.37)(search-insights@2.13.0)(typescript@5.4.2):
-    resolution: {integrity: sha512-/OiYsu5UKpQKA2c0BAZkfyywjfauDjvXyv6Mo4Ra57m5n4Bxg1HgUGoth1CLH2vwUbR/BHvDA9zOM0RDvgeSVQ==}
+  /vitepress@1.0.1(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.38)(search-insights@2.13.0)(typescript@5.4.2):
+    resolution: {integrity: sha512-eNr5pOBppYUUjEhv8S0S2t9Tv95LQ6mMeHj6ivaGwfHxpov70Vduuwl/QQMDRznKDSaP0WKV7a82Pb4JVOaqEw==}
     hasBin: true
     peerDependencies:
-      markdown-it-mathjax3: ^4.3.2
-      postcss: ^8.4.35
+      markdown-it-mathjax3: ^4
+      postcss: ^8
     peerDependenciesMeta:
       markdown-it-mathjax3:
         optional: true
       postcss:
         optional: true
     dependencies:
-      '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0)
-      '@shikijs/core': 1.1.7
+      '@docsearch/css': 3.6.0
+      '@docsearch/js': 3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0)
+      '@shikijs/core': 1.2.0
       '@shikijs/transformers': 1.2.0
       '@types/markdown-it': 13.0.7
-      '@vitejs/plugin-vue': 5.0.4(vite@5.2.2)(vue@3.4.21)
-      '@vue/devtools-api': 7.0.14
+      '@vitejs/plugin-vue': 5.0.4(vite@5.2.7)(vue@3.4.21)
+      '@vue/devtools-api': 7.0.25(vue@3.4.21)
       '@vueuse/core': 10.9.0(vue@3.4.21)
-      '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.21)
+      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.21)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
-      postcss: 8.4.37
+      postcss: 8.4.38
       shiki: 1.2.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14858,10 +14602,10 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest-environment-nuxt@1.0.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.2)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21):
+  /vitest-environment-nuxt@1.0.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.7)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21):
     resolution: {integrity: sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==}
     dependencies:
-      '@nuxt/test-utils': 3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.2)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
+      '@nuxt/test-utils': 3.12.0(h3@1.11.1)(rollup@3.29.4)(vite@5.2.7)(vitest@0.33.0)(vue-router@4.3.0)(vue@3.4.21)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14999,7 +14743,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.6.0
       tinypool: 0.7.0
-      vite: 5.2.2(@types/node@20.11.30)
+      vite: 5.2.7(@types/node@20.11.30)
       vite-node: 0.34.6(@types/node@20.11.30)
       why-is-node-running: 2.2.2
     transitivePeerDependencies: