feat: new calendar components (#468)

radix-vue · Apr 11, 2024 · cfccb8e · cfccb8e
1 parent 11d77fb
commit cfccb8e
Show file tree

Hide file tree

Showing 205 changed files with 4,380 additions and 1,681 deletions.
diff --git 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
@@ -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: [],
         },
         {