diff --git a/apps/www/package.json b/apps/www/package.json
index 429bbd61..2c8d1d78 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -33,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",
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 687e2f10..3ffb582e 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -57,6 +57,7 @@ const value = ref({
           :number-of-months="2"
           initial-focus
           :placeholder="value.start"
+          @update:start-value="(startDate) => value.start = startDate"
         />
       </PopoverContent>
     </Popover>
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/src/lib/registry/default/example/CalendarForm.vue
index 151dc42d..5b6b762e 100644
--- a/apps/www/src/lib/registry/default/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, h, ref } from 'vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue'
+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'
@@ -69,7 +69,7 @@ const onSubmit = handleSubmit((values) => {
               <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
+          <PopoverContent class="w-auto p-0">
             <Calendar
               v-model:placeholder="placeholder"
               v-model="value"
diff --git a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
index 34ad9f80..5152e416 100644
--- a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, toDate, useForwardPropsEmits } from 'radix-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'
@@ -34,11 +35,13 @@ const placeholder = useVModel(props, 'modelValue', emits, {
 }) as Ref<DateValue>
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const formatter = useDateFormatter('en')
 </script>
 
 <template>
   <CalendarRoot
-    v-slot="{ getMonths, getYears, formatter, grid, weekDays }"
+    v-slot="{ date, grid, weekDays }"
     v-model:placeholder="placeholder"
     v-bind="forwarded"
     :class="cn('rounded-md border p-3', props.class)"
@@ -60,7 +63,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </SelectTrigger>
           <SelectContent class="max-h-[200px]">
             <SelectItem
-              v-for="month in getMonths"
+              v-for="month in createYear({ dateObj: date })"
               :key="month.toString()" :value="month.month.toString()"
             >
               {{ formatter.custom(toDate(month), { month: 'long' }) }}
@@ -83,7 +86,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </SelectTrigger>
           <SelectContent class="max-h-[200px]">
             <SelectItem
-              v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
+              v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
               :key="yearValue.toString()" :value="yearValue.year.toString()"
             >
               {{ yearValue.year }}
@@ -96,7 +99,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <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 class="mb-1 grid w-full grid-cols-7">
+          <CalendarGridRow>
             <CalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -105,7 +108,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody class="grid">
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+          <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()"
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
index 64812a51..3fa542fb 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, h, ref } from 'vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue'
+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'
@@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
               <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
+          <PopoverContent class="w-auto p-0">
             <Calendar
               v-model:placeholder="placeholder"
               v-model="value"
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index aca54025..e3a2a9ec 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -46,7 +46,7 @@ const value = ref({
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" />
+      <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/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index 6e89d6fe..0486e496 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <CalendarNextButton />
     </CalendarHeader>
 
-    <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+    <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 class="mb-1 grid w-full grid-cols-7">
+          <CalendarGridRow>
             <CalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
             </CalendarHeadCell>
           </CalendarGridRow>
         </CalendarGridHead>
-        <CalendarGridBody class="grid">
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+        <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()"
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
index d3b6380a..f1ebfbab 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
@@ -15,7 +15,7 @@ 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">
+  <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/range-calendar/RangeCalendar.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
index 0ad318fc..3033f05b 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
@@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <RangeCalendarNextButton />
     </RangeCalendarHeader>
 
-    <div class="mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <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 class="mb-1 grid w-full grid-cols-7">
+          <RangeCalendarGridRow>
             <RangeCalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
             </RangeCalendarHeadCell>
           </RangeCalendarGridRow>
         </RangeCalendarGridHead>
-        <RangeCalendarGridBody class="grid">
-          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+        <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()"
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
index 0b6464bf..90c599f1 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, h, ref } from 'vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue'
+import { toDate } from 'radix-vue/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -69,7 +69,7 @@ const onSubmit = handleSubmit((values) => {
               <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
+          <PopoverContent class="w-auto p-0">
             <Calendar
               v-model:placeholder="placeholder"
               v-model="value"
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
index 483bb36d..820d0d9a 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, toDate, useForwardPropsEmits } from 'radix-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'
@@ -34,11 +35,13 @@ const placeholder = useVModel(props, 'modelValue', emits, {
 }) as Ref<DateValue>
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const formatter = useDateFormatter('en')
 </script>
 
 <template>
   <CalendarRoot
-    v-slot="{ getMonths, getYears, formatter, grid, weekDays }"
+    v-slot="{ date, grid, weekDays }"
     v-model:placeholder="placeholder"
     v-bind="forwarded"
     :class="cn('rounded-md border p-3', props.class)"
@@ -60,7 +63,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </SelectTrigger>
           <SelectContent class="max-h-[200px]">
             <SelectItem
-              v-for="month in getMonths"
+              v-for="month in createYear({ dateObj: date })"
               :key="month.toString()" :value="month.month.toString()"
             >
               {{ formatter.custom(toDate(month), { month: 'long' }) }}
@@ -83,7 +86,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </SelectTrigger>
           <SelectContent class="max-h-[200px]">
             <SelectItem
-              v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
+              v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
               :key="yearValue.toString()" :value="yearValue.year.toString()"
             >
               {{ yearValue.year }}
@@ -96,7 +99,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <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 class="mb-1 grid w-full grid-cols-7">
+          <CalendarGridRow>
             <CalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -105,7 +108,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody class="grid">
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+          <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()"
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 fc66b26f..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,7 +1,7 @@
 <script setup lang="ts">
 import { computed, h, ref } from 'vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue'
+import { toDate } from 'radix-vue/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
               <input hidden>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent class="p-0">
+          <PopoverContent class="w-auto p-0">
             <Calendar
               v-model:placeholder="placeholder"
               v-model="value"
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 69556553..57848277 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -46,7 +46,7 @@ const value = ref({
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" />
+      <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/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 6e89d6fe..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
@@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <CalendarNextButton />
     </CalendarHeader>
 
-    <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+    <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 class="mb-1 grid w-full grid-cols-7">
+          <CalendarGridRow>
             <CalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
             </CalendarHeadCell>
           </CalendarGridRow>
         </CalendarGridHead>
-        <CalendarGridBody class="grid">
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+        <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()"
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
index 14843ce2..45d2f5c4 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <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)"
+    :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 />
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
index 0ad318fc..3033f05b 100644
--- 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
@@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <RangeCalendarNextButton />
     </RangeCalendarHeader>
 
-    <div class="mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <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 class="mb-1 grid w-full grid-cols-7">
+          <RangeCalendarGridRow>
             <RangeCalendarHeadCell
               v-for="day in weekDays" :key="day"
             >
@@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
             </RangeCalendarHeadCell>
           </RangeCalendarGridRow>
         </RangeCalendarGridHead>
-        <RangeCalendarGridBody class="grid">
-          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
+        <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()"
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
index bc8e4152..b606f375 100644
--- 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
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <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)"
+    :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 />
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 99a622a8..24d4935e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,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)
@@ -3784,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'}
@@ -3794,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'}
@@ -12231,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
@@ -14229,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'