@youcan/celeste 0.7.3 → 0.8.0

package/dist/es/chunks/useLocale.js

@@ -0,0 +1,14 @@
+import { t as injectConfigProviderContext } from "./ConfigProvider.js";
+import { computed, ref } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useLocale.js
+/**
+* The `useLocale` function provides a way to access the current locale in your application.
+* @param {Ref<string | undefined>} [locale] - An optional ref containing the locale.
+* @returns A computed ref holding the resolved locale.
+*/
+function useLocale(locale) {
+	const context = injectConfigProviderContext({ locale: ref("en") });
+	return computed(() => locale?.value || context.locale?.value || "en");
+}
+//#endregion
+export { useLocale as t };

package/dist/es/date-picker.js

@@ -0,0 +1,2 @@
+import { t as date_picker_default } from "./chunks/date-picker.js";
+export { date_picker_default as default };

package/dist/es/index.js

@@ -5,13 +5,13 @@ import { t as badge_default } from "./chunks/badge.js";
 import { t as status_badge_default } from "./chunks/status-badge.js";
 import { n as sidebar_separator_default, t as components_exports } from "./chunks/components.js";
 import { t as tooltip_content_default } from "./chunks/tooltip-content.js";
-import { t as counter_input_default } from "./chunks/counter-input.js";
 import { t as collapsible_content_default } from "./chunks/collapsible-content.js";
 import { t as collapsible_trigger_default } from "./chunks/collapsible-trigger.js";
 import { t as combobox_anchor_default } from "./chunks/combobox-anchor.js";
 import { t as combobox_empty_default } from "./chunks/combobox-empty.js";
 import { t as combobox_list_default } from "./chunks/combobox-list.js";
 import { t as combobox_trigger_default } from "./chunks/combobox-trigger.js";
+import { t as calendar_default } from "./chunks/calendar.js";
 import { t as checkbox_default } from "./chunks/checkbox.js";
 import { t as slider_default } from "./chunks/slider.js";
 import { t as dropdown_menu_item_default } from "./chunks/dropdown-menu-item.js";
@@ -22,9 +22,11 @@ import { t as dropdown_menu_sub_content_default } from "./chunks/dropdown-menu-s
 import { t as dropdown_menu_sub_trigger_default } from "./chunks/dropdown-menu-sub-trigger.js";
 import { t as popover_content_default } from "./chunks/popover-content.js";
 import { t as popover_trigger_default } from "./chunks/popover-trigger.js";
+import { t as range_calendar_default } from "./chunks/range-calendar.js";
 import { t as dropdown_menu_group_default } from "./chunks/dropdown-menu-group.js";
 import { t as dropdown_menu_sub_default } from "./chunks/dropdown-menu-sub.js";
 import { t as dropdown_menu_trigger_default } from "./chunks/dropdown-menu-trigger.js";
+import { t as counter_input_default } from "./chunks/counter-input.js";
 import { t as pagination_ellipsis_default } from "./chunks/pagination-ellipsis.js";
 import { t as pagination_first_default } from "./chunks/pagination-first.js";
 import { t as pagination_last_default } from "./chunks/pagination-last.js";
@@ -77,6 +79,7 @@ import { t as combobox_item_default } from "./chunks/combobox-item.js";
 import { t as combobox_root_default } from "./chunks/combobox-root.js";
 import { t as combobox_separator_default } from "./chunks/combobox-separator.js";
 import { t as combobox_default } from "./chunks/combobox.js";
+import { t as date_picker_default } from "./chunks/date-picker.js";
 import { t as digit_input_group_default } from "./chunks/digit-input-group.js";
 import { t as digit_input_default } from "./chunks/digit-input.js";
 import { t as dropdown_menu_default } from "./chunks/dropdown-menu.js";
@@ -99,6 +102,7 @@ import { t as progress_circle_default } from "./chunks/progress-circle.js";
 import { t as radio_group_card_default } from "./chunks/radio-group-card.js";
 import { t as radio_group_label_default } from "./chunks/radio-group-label.js";
 import { t as radio_group_default } from "./chunks/radio-group.js";
+import { t as range_picker_default } from "./chunks/range-picker.js";
 import { t as rich_editor_default } from "./chunks/rich-editor.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, provideSidebarContext, useSidebar } from "./use-sidebar.js";
 import { t as segmented_control_default } from "./chunks/segmented-control.js";
@@ -209,4 +213,4 @@ var Celeste = { install(vue) {
 	});
 } };
 //#endregion
-export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, button_default as Button, COLOR_NUMBER_VALIDATION_PATTERN, Celeste, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, clamp, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useDelegatedProps, useSidebar };
+export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, button_default as Button, COLOR_NUMBER_VALIDATION_PATTERN, calendar_default as Calendar, Celeste, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, date_picker_default as DatePicker, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, range_calendar_default as RangeCalendar, range_picker_default as RangePicker, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, clamp, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useDelegatedProps, useSidebar };

package/dist/es/range-calendar.js

@@ -0,0 +1,2 @@
+import { t as range_calendar_default } from "./chunks/range-calendar.js";
+export { range_calendar_default as default };

package/dist/es/range-picker.js

@@ -0,0 +1,2 @@
+import { t as range_picker_default } from "./chunks/range-picker.js";
+export { range_picker_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -33,6 +33,7 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
+    "@internationalized/date": "^3.6.0",
     "@tiptap/core": "^3.11.0",
     "@tiptap/extension-bubble-menu": "^3.11.0",
     "@tiptap/extension-color": "^3.11.0",
@@ -48,8 +49,8 @@
     "reka-ui": "^2.10.1",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-tokens": "0.7.3",
-    "@youcan/celeste-icons": "0.7.3"
+    "@youcan/celeste-icons": "0.8.0",
+    "@youcan/celeste-tokens": "0.8.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/src/components/calendar/calendar.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { isEqualDay } from '@internationalized/date';
+import clsx from 'clsx';
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+
+export interface CalendarProps extends CalendarRootProps {
+  class?: HTMLAttributes['class'];
+  markedDates?: DateValue[];
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  weekStartsOn: 1,
+  weekdayFormat: 'short',
+  fixedWeeks: true,
+});
+
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, ['class', 'markedDates']);
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+function isMarked(date: DateValue): boolean {
+  return props.markedDates?.some(marked => isEqualDay(marked, date)) ?? false;
+}
+
+function weekdayLabel(day: string): string {
+  return /^[a-z]/i.test(day.trim()) ? day.slice(0, 2) : day;
+}
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ weekDays, grid }"
+    v-bind="forwarded"
+    :class="clsx('celeste-calendar', props.class)"
+  >
+    <div class="celeste-calendar-header">
+      <CalendarPrev as-child>
+        <button type="button" class="celeste-calendar-nav">
+          <i class="i-celeste-arrow-left-s-line" />
+        </button>
+      </CalendarPrev>
+      <CalendarHeading class="celeste-calendar-heading" />
+      <CalendarNext as-child>
+        <button type="button" class="celeste-calendar-nav">
+          <i class="i-celeste-arrow-right-s-line" />
+        </button>
+      </CalendarNext>
+    </div>
+
+    <div class="celeste-calendar-months">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="celeste-calendar-grid"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow class="celeste-calendar-week">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="celeste-calendar-weekday"
+            >
+              {{ weekdayLabel(day) }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody class="celeste-calendar-body">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`week-${index}`"
+            class="celeste-calendar-week"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              class="celeste-calendar-cell"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                class="celeste-calendar-day"
+                :data-marked="isMarked(weekDate) ? '' : undefined"
+              >
+                <span class="celeste-calendar-day-number">{{ weekDate.day }}</span>
+              </CalendarCellTrigger>
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
+
+<style scoped lang="scss">
+.celeste-calendar {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  color: var(--color-text-sub-600);
+  gap: var(--spacing-8);
+}
+
+.celeste-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-6);
+  gap: var(--spacing-6);
+  border-radius: var(--radius-8);
+  background-color: var(--color-bg-weak-50);
+}
+
+.celeste-calendar-heading {
+  flex: 1;
+  color: var(--color-text-sub-600);
+  font: var(--label-sm);
+  text-align: center;
+}
+
+.celeste-calendar-nav {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: none;
+  border-radius: var(--radius-6);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  color: var(--color-icon-sub-600);
+  cursor: pointer;
+
+  i {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:dir(rtl) i {
+    transform: scaleX(-1);
+  }
+
+  &:hover {
+    color: var(--color-icon-strong-950);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-buttons-important-focus);
+  }
+
+  &[data-disabled] {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--color-icon-disabled-300);
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.celeste-calendar-months {
+  display: flex;
+  gap: var(--spacing-16);
+}
+
+.celeste-calendar-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.celeste-calendar-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.celeste-calendar-week {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-calendar-weekday {
+  flex: 1;
+  padding-block: var(--spacing-10);
+  color: var(--color-text-soft-400);
+  font: var(--label-sm);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.celeste-calendar-cell {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.celeste-calendar-day {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-block: var(--spacing-10);
+  transition-property: background-color, color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border-radius: var(--radius-8);
+  background-color: var(--color-bg-white-0);
+  color: var(--color-text-sub-600);
+  font: var(--label-sm);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-text-strong-950);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-buttons-important-focus);
+  }
+
+  &[data-outside-view],
+  &[data-outside-visible-view] {
+    color: var(--color-text-disabled-300);
+
+    &:hover {
+      background-color: var(--color-bg-white-0);
+      color: var(--color-text-disabled-300);
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--color-text-disabled-300);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &[data-unavailable] {
+    color: var(--color-text-disabled-300);
+    text-decoration: line-through;
+    pointer-events: none;
+  }
+
+  &[data-selected] {
+    background-color: var(--color-primary-base);
+    color: var(--color-text-white-0);
+
+    &:hover {
+      background-color: var(--color-primary-base);
+      color: var(--color-text-white-0);
+    }
+  }
+}
+
+.celeste-calendar-day-number {
+  position: relative;
+}
+
+.celeste-calendar-day[data-today]::after,
+.celeste-calendar-day[data-marked]::after {
+  content: '';
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  transform: translateX(-50%);
+  border-radius: var(--radius-full);
+  background-color: var(--color-primary-base);
+}
+
+.celeste-calendar-day[data-selected][data-today]::after,
+.celeste-calendar-day[data-selected][data-marked]::after {
+  background-color: var(--color-text-white-0);
+}
+</style>

package/src/components/calendar/index.ts

@@ -0,0 +1,2 @@
+export * from './calendar.vue';
+export { default as Calendar } from './calendar.vue';

package/src/components/calendar/stories/calendar.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { CalendarDate } from '@internationalized/date';
+import { ref } from 'vue';
+import Calendar from '../calendar.vue';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    weekStartsOn: {
+      control: { type: 'select' },
+      options: [0, 1, 2, 3, 4, 5, 6],
+      description: 'First day of the week (0 = Sunday, 1 = Monday).',
+    },
+    weekdayFormat: {
+      control: { type: 'select' },
+      options: ['narrow', 'short', 'long'],
+      description: 'Formatting used to derive the weekday labels.',
+    },
+    fixedWeeks: {
+      control: { type: 'boolean' },
+      description: 'Always render 6 weeks so the calendar height stays stable.',
+    },
+    locale: {
+      control: { type: 'text' },
+      description: 'BCP-47 locale used for the heading and weekday labels.',
+    },
+  },
+  args: {
+    weekStartsOn: 1,
+    weekdayFormat: 'short',
+    fixedWeeks: true,
+    locale: 'en-US',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { Calendar },
+    setup() {
+      const value = ref(new CalendarDate(2024, 1, 11));
+      const markedDates = [new CalendarDate(2024, 1, 16)];
+      return { args, value, markedDates };
+    },
+    template: `
+      <div style="width: 328px;">
+        <Calendar v-model="value" v-bind="args" :marked-dates="markedDates" />
+      </div>
+    `,
+  }),
+};
+
+export const Arabic: Story = {
+  args: {
+    locale: 'ar',
+    dir: 'rtl',
+    weekStartsOn: 2,
+  },
+  render: args => ({
+    components: { Calendar },
+    setup() {
+      const value = ref(new CalendarDate(2024, 1, 11));
+      const markedDates = [new CalendarDate(2024, 1, 16)];
+      return { args, value, markedDates };
+    },
+    template: `
+      <div dir="rtl" style="width: 328px;">
+        <Calendar v-model="value" v-bind="args" :marked-dates="markedDates" />
+      </div>
+    `,
+  }),
+};

package/src/components/date-picker/date-picker.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { DateValue } from 'reka-ui';
+import type { CalendarProps } from '@/components/calendar/calendar.vue';
+import clsx from 'clsx';
+import { computed } from 'vue';
+import Button from '@/components/button/button.vue';
+import Calendar from '@/components/calendar/calendar.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+
+export interface DatePickerProps extends Omit<CalendarProps, 'modelValue'> {
+  footer?: boolean;
+  cancelLabel?: string;
+  applyLabel?: string;
+}
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  footer: true,
+  cancelLabel: 'Cancel',
+  applyLabel: 'Apply',
+});
+
+const emits = defineEmits<{
+  apply: [value: DateValue | undefined];
+  cancel: [];
+}>();
+
+const modelValue = defineModel<DateValue>();
+
+const calendarProps = useDelegatedProps(props, ['class', 'footer', 'cancelLabel', 'applyLabel']);
+
+const cardClass = computed(() => clsx('celeste-date-picker', props.class));
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="celeste-date-picker-body">
+      <Calendar v-model="modelValue" v-bind="calendarProps" />
+    </div>
+
+    <div v-if="footer" class="celeste-date-picker-footer">
+      <Button
+        class="celeste-date-picker-action"
+        variant="stroke"
+        intent="neutral"
+        @click="emits('cancel')"
+      >
+        {{ cancelLabel }}
+      </Button>
+      <Button
+        class="celeste-date-picker-action"
+        variant="fill"
+        intent="primary"
+        @click="emits('apply', modelValue)"
+      >
+        {{ applyLabel }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-date-picker {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: 368px;
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-20);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+}
+
+.celeste-date-picker-body {
+  padding: 20px;
+  border-block-end: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-date-picker-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-16);
+  gap: var(--spacing-16);
+}
+
+.celeste-date-picker-action {
+  flex: 1;
+}
+</style>

package/src/components/date-picker/index.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.vue';
+export { default as DatePicker } from './date-picker.vue';