feat(Calendar): implement component (#2618)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/content/ComponentCode.vue

@@ -93,6 +93,8 @@ const options = computed(() => {
           chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
         }))
 
+    // TODO: process "undefined | Date | DateRange", https://github.com/nuxt/ui/issues/2651
+
     return {
       name: key,
       label: key,

docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium'
+})
+
+const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
+</script>
+
+<template>
+  <UPopover>
+    <UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
+      {{ df.format(modelValue.toDate(getLocalTimeZone())) }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" class="p-2" />
+    </template>
+  </UPopover>
+</template>

docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium'
+})
+
+const modelValue = shallowRef({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 2, 10)
+})
+</script>
+
+<template>
+  <UPopover>
+    <UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
+      <template v-if="modelValue.start">
+        <template v-if="modelValue.end">
+          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ df.format(modelValue.end.toDate(getLocalTimeZone())) }}
+        </template>
+
+        <template v-else>
+          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }}
+        </template>
+      </template>
+      <template v-else>
+        Pick a date
+      </template>
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" class="p-2" :number-of-months="2" range />
+    </template>
+  </UPopover>
+</template>

docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+import type { Matcher } from 'radix-vue/date'
+
+const modelValue = shallowRef({
+  start: new CalendarDate(2022, 1, 1),
+  end: new CalendarDate(2022, 1, 9)
+})
+
+const isDateDisabled: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
+</template>

docs/app/components/content/examples/calendar/CalendarEventsExample.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
+
+function getColorByDate(date: Date) {
+  const isWeekend = date.getDay() % 6 == 0
+  const isDayMeeting = date.getDay() % 3 == 0
+
+  if (isWeekend) {
+    return undefined
+  }
+
+  if (isDayMeeting) {
+    return 'error'
+  }
+
+  return 'success'
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue">
+    <template #day="{ day }">
+      <UChip :show="!!getColorByDate(day.toDate('UTC'))" :color="getColorByDate(day.toDate('UTC'))" size="2xs">
+        {{ day.day }}
+      </UChip>
+    </template>
+  </UCalendar>
+</template>

docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef(new CalendarDate(2023, 9, 10))
+const minDate = new CalendarDate(2023, 9, 1)
+const maxDate = new CalendarDate(2023, 9, 30)
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
+</template>

docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+import type { Matcher } from 'radix-vue/date'
+
+const modelValue = shallowRef({
+  start: new CalendarDate(2022, 1, 1),
+  end: new CalendarDate(2022, 1, 9)
+})
+
+const isDateUnavailable: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
+</template>

docs/content/3.components/calendar.md

@@ -0,0 +1,210 @@
+---
+title: Calendar
+description: A calendar component for selecting single dates, multiple dates or date ranges.
+links:
+  - label: Calendar
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/calendar.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue
+navigation.badge: New
+---
+
+::note
+This component relies on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
+::
+
+## Usage
+
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+---
+::
+
+<!-- TODO: Add example with default value -->
+
+### Multiple
+
+Use the `multiple` prop to allow multiple selections.
+
+::component-code
+---
+ignore:
+  - multiple
+props:
+  multiple: true
+---
+::
+
+### Range
+
+Use the `range` prop to select a range of dates.
+
+::component-code
+---
+ignore:
+  - range
+props:
+  range: true
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the calendar.
+
+::component-code
+---
+props:
+  color: neutral
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the calendar.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the calendar.
+
+::component-code
+---
+props:
+  disabled: true
+---
+::
+
+### Number Of Months
+
+Use the `numberOfMonths` prop to change the number of months in the calendar.
+
+::component-code
+---
+props:
+  numberOfMonths: 3
+---
+::
+
+### Month Controls
+
+Use the `month-controls` prop to show the month controls. Defaults to `true`.
+
+::component-code
+---
+props:
+  monthControls: false
+---
+::
+
+### Year Controls
+
+Use the `year-controls` prop to show the year controls. Defaults to `true`.
+
+::component-code
+---
+props:
+  yearControls: false
+---
+::
+
+### Fixed Weeks
+
+Use the `fixed-weeks` prop to display the calendar with fixed weeks.
+
+::component-code
+---
+props:
+  fixedWeeks: false
+---
+::
+
+## Examples
+
+### With chip events
+
+Use the [Chip](/components/chip) component to add events to specific days.
+
+::component-example
+---
+name: 'calendar-events-example'
+---
+::
+
+### With disabled dates
+
+Use the `is-date-disabled` prop with a function to mark specific dates as disabled.
+
+::component-example
+---
+name: 'calendar-disabled-dates-example'
+---
+::
+
+### With unavailable dates
+
+Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.
+
+::component-example
+---
+name: 'calendar-unavailable-dates-example'
+---
+::
+
+### With min/max dates
+
+Use the `min-value` and `max-value` props to limit the dates.
+
+::component-example
+---
+name: 'calendar-min-max-dates-example'
+---
+::
+
+### As a DatePicker
+
+Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date picker.
+
+::component-example
+---
+name: 'calendar-date-picker-example'
+---
+::
+
+### As a DateRangePicker
+
+Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date range picker.
+
+::component-example
+---
+name: 'calendar-date-range-picker-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

docs/content/3.components/input-menu.md

@@ -771,7 +771,7 @@ name: 'input-menu-filter-fields-example'
 ---
 ::
 
-### As a country picker
+### As a CountryPicker
 
 This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
 

docs/content/3.components/input-number.md

@@ -11,6 +11,10 @@ links:
 navigation.badge: New
 ---
 
+::note
+This component relies on the [@internationalized/number](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
+::
+
 ## Usage
 
 Use the `v-model` directive to control the value of the InputNumber.

docs/content/3.components/select-menu.md

@@ -806,7 +806,7 @@ name: 'select-menu-filter-fields-example'
 ---
 ::
 
-### As a country picker
+### As a CountryPicker
 
 This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
 

package.json

@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@internationalized/date": "^3.6.0",
     "@internationalized/number": "^3.6.0",
     "@nuxt/devtools-kit": "^1.6.1",
     "@nuxt/fonts": "^0.10.2",

playground/app/app.vue

@@ -24,6 +24,7 @@ const components = [
   'button',
   'button-group',
   'card',
+  'calendar',
   'carousel',
   'checkbox',
   'chip',

playground/app/pages/components/calendar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+
+const singleValue = shallowRef(new CalendarDate(2022, 1, 10))
+const multipleValue = shallowRef({
+  start: new CalendarDate(2022, 1, 10),
+  end: new CalendarDate(2022, 1, 20)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="singleValue" />
+    </div>
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="multipleValue" range />
+    </div>
+  </div>
+</template>

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.2
         version: 4.1.2(vue@3.5.13(typescript@5.6.3))
+      '@internationalized/date':
+        specifier: ^3.6.0
+        version: 3.6.0
       '@internationalized/number':
         specifier: ^3.6.0
         version: 3.6.0
@@ -1281,8 +1284,8 @@ packages:
     resolution: {integrity: sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==}
     engines: {node: '>=18'}
 
-  '@internationalized/date@3.5.6':
-    resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
+  '@internationalized/date@3.6.0':
+    resolution: {integrity: sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==}
 
   '@internationalized/number@3.6.0':
     resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
@@ -7887,7 +7890,7 @@ snapshots:
 
   '@inquirer/figures@1.0.8': {}
 
-  '@internationalized/date@3.5.6':
+  '@internationalized/date@3.6.0':
     dependencies:
       '@swc/helpers': 0.5.15
 
@@ -13914,7 +13917,7 @@ snapshots:
     dependencies:
       '@floating-ui/dom': 1.6.12
       '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.6.3))
-      '@internationalized/date': 3.5.6
+      '@internationalized/date': 3.6.0
       '@internationalized/number': 3.6.0
       '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.6.3))
       '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3))

src/runtime/components/Calendar.vue

@@ -0,0 +1,165 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'radix-vue'
+import type { DateValue } from '@internationalized/date'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/calendar'
+
+const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
+
+const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true
+    ? DateValue[]
+    : DateValue
+
+export interface CalendarProps<R extends boolean, M extends boolean> extends Omit<CalendarRootProps, 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: CalendarVariants['color']
+  size?: CalendarVariants['size']
+  /** Whether or not a range of dates can be selected */
+  range?: R & boolean
+  /** Whether or not multiple dates can be selected */
+  multiple?: M & boolean
+  /** Show month controls */
+  monthControls?: boolean
+  /** Show year controls */
+  yearControls?: boolean
+  defaultValue?: CalendarModelValue<R, M>
+  modelValue?: CalendarModelValue<R, M>
+  class?: any
+  ui?: Partial<typeof calendar.slots>
+}
+
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+  'update:modelValue': [date: CalendarModelValue<R, M>]
+}
+
+export interface CalendarSlots {
+  'heading': (props: { value: string }) => any
+  'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day': (props: { day: string }) => any
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+import { computed } from 'vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
+import { reactiveOmit } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  fixedWeeks: true,
+  monthControls: true,
+  yearControls: true
+})
+const emits = defineEmits<CalendarEmits<R, M>>()
+defineSlots<CalendarSlots>()
+
+const { code: locale, dir, t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
+
+const ui = computed(() => calendar({
+  color: props.color,
+  size: props.size
+}))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 })
+  }
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="(modelValue as CalendarModelValue<true & false>)"
+    :default-value="(defaultValue as CalendarModelValue<true & false>)"
+    :locale="locale"
+    :dir="dir"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

src/runtime/components/InputMenu.vue

@@ -107,7 +107,7 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   /** The controlled value of the Combobox. Can be binded-with with `v-model`. */
   modelValue?: SelectModelValue<T, V, M>
   /** Whether multiple options can be selected or not. */
-  multiple?: M
+  multiple?: M & boolean
 }
 
 export type InputMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & {
@@ -167,11 +167,9 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const appConfig = useAppConfig()
 const { t } = useLocale()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
-// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
-const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple)
 
 const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
@@ -189,7 +187,7 @@ const ui = computed(() => inputMenu({
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  multiple: multiple.value,
+  multiple: props.multiple,
   buttonGroup: orientation.value
 }))
 
@@ -336,7 +334,6 @@ defineExpose({
     v-model:search-term="searchTerm"
     :name="name"
     :disabled="disabled"
-    :multiple="multiple"
     :display-value="displayValue"
     :filter-function="() => rootItems"
     :class="ui.root({ class: [props.class, props.ui?.root] })"

src/runtime/components/SelectMenu.vue

@@ -99,7 +99,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /** The controlled value of the Combobox. Can be binded-with with `v-model`. */
   modelValue?: SelectModelValue<T, V, M>
   /** Whether multiple options can be selected or not. */
-  multiple?: M
+  multiple?: M & boolean
 }
 
 export type SelectMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & {
@@ -160,12 +160,10 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 
 const { t } = useLocale()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: 'Search...', variant: 'none' }) as InputProps)
-// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
-const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple)
 
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
 
@@ -187,7 +185,7 @@ const ui = computed(() => selectMenu({
 }))
 
 function displayValue(value: T | T[]): string {
-  if (multiple.value && Array.isArray(value)) {
+  if (props.multiple && Array.isArray(value)) {
     return value.map(v => displayValue(v)).filter(Boolean).join(', ')
   }
 
@@ -307,7 +305,6 @@ function onUpdateOpen(value: boolean) {
     as-child
     :name="name"
     :disabled="disabled"
-    :multiple="multiple"
     :display-value="() => searchTerm"
     :filter-function="() => rootItems"
     @update:model-value="onUpdate"

src/runtime/locale/ar.ts

@@ -10,6 +10,12 @@ export default defineLocale({
       noData: 'لا توجد بيانات',
       create: 'إنشاء "{label}"'
     },
+    calendar: {
+      prevYear: 'السنة السابقة',
+      nextYear: 'السنة المقبلة',
+      prevMonth: 'الشهر السابق',
+      nextMonth: 'الشهر المقبل'
+    },
     inputNumber: {
       increment: 'زيادة',
       decrement: 'تقليل'

src/runtime/locale/cs.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Žádná data',
       create: 'Vytvořit "{label}"'
     },
+    calendar: {
+      prevYear: 'Předchozí rok',
+      nextYear: 'Další rok',
+      prevMonth: 'Předchozí měsíc',
+      nextMonth: 'Další měsíc'
+    },
     inputNumber: {
       increment: 'Zvýšit',
       decrement: 'Snížit'

src/runtime/locale/de.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Keine Daten',
       create: '"{label}" erstellen'
     },
+    calendar: {
+      prevYear: 'Vorheriges Jahr',
+      nextYear: 'Nächstes Jahr',
+      prevMonth: 'Vorheriger Monat',
+      nextMonth: 'Nächster Monat'
+    },
     inputNumber: {
       increment: 'Erhöhen',
       decrement: 'Verringern'

src/runtime/locale/en.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'No data',
       create: 'Create "{label}"'
     },
+    calendar: {
+      prevYear: 'Previous year',
+      nextYear: 'Next year',
+      prevMonth: 'Previous month',
+      nextMonth: 'Next month'
+    },
     inputNumber: {
       increment: 'Increment',
       decrement: 'Decrement'

src/runtime/locale/es.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Sin datos',
       create: 'Crear "{label}"'
     },
+    calendar: {
+      prevYear: 'A o anterior',
+      nextYear: 'A o siguiente',
+      prevMonth: 'Mes anterior',
+      nextMonth: 'Mes siguiente'
+    },
     inputNumber: {
       increment: 'Incremento',
       decrement: 'Decremento'

src/runtime/locale/fa_ir.ts

@@ -10,6 +10,12 @@ export default defineLocale({
       noData: 'داده‌ای موجود نیست',
       create: 'ایجاد "{label}"'
     },
+    calendar: {
+      prevYear: 'سال گذشته',
+      nextYear: 'سال آینده',
+      prevMonth: 'ماه گذشته',
+      nextMonth: 'ماه آینده'
+    },
     inputNumber: {
       increment: 'افزایش',
       decrement: 'کاهش'

src/runtime/locale/fr.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Aucune donnée',
       create: 'Créer "{label}"'
     },
+    calendar: {
+      prevYear: 'Année précédente',
+      nextYear: 'Année suivante',
+      prevMonth: 'Mois précédent',
+      nextMonth: 'Mois suivant'
+    },
     inputNumber: {
       increment: 'Augmenter',
       decrement: 'Diminuer'

src/runtime/locale/it.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Nessun dato',
       create: 'Crea "{label}"'
     },
+    calendar: {
+      prevYear: 'Anno precedente',
+      nextYear: 'Anno successivo',
+      prevMonth: 'Mese precedente',
+      nextMonth: 'Mese successivo'
+    },
     inputNumber: {
       increment: 'Aumenta',
       decrement: 'Diminuisci'

src/runtime/locale/ko.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '데이터가 없습니다.',
       create: '"{label}" 생성'
     },
+    calendar: {
+      prevYear: '이전 해',
+      nextYear: '다음 해',
+      prevMonth: '이전 달',
+      nextMonth: '다음 달'
+    },
     inputNumber: {
       increment: '증가',
       decrement: '감소'

src/runtime/locale/nl.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Geen gegevens',
       create: '"{label}" creëren'
     },
+    calendar: {
+      prevYear: 'Vorig jaar',
+      nextYear: 'Volgend jaar',
+      prevMonth: 'Vorige maand',
+      nextMonth: 'Volgende maand'
+    },
     inputNumber: {
       increment: 'Verhogen',
       decrement: 'Verlagen'

src/runtime/locale/pl.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Brak danych',
       create: 'Utwórz "{label}"'
     },
+    calendar: {
+      prevYear: 'Poprzedni rok',
+      nextYear: 'Przyszły rok',
+      prevMonth: 'Poprzedni miesiąc',
+      nextMonth: 'Przyszły miesiąc'
+    },
     inputNumber: {
       increment: 'Zwiększ',
       decrement: 'Zmniejsz'

src/runtime/locale/ru.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Нет данных',
       create: 'Создать "{label}"'
     },
+    calendar: {
+      prevYear: 'Предыдущий год',
+      nextYear: 'Следующий год',
+      prevMonth: 'Предыдущий месяц',
+      nextMonth: 'Следующий месяц'
+    },
     inputNumber: {
       increment: 'Увеличить',
       decrement: 'Уменьшить'

src/runtime/locale/tr.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Veri yok',
       create: '"{label}" oluştur'
     },
+    calendar: {
+      prevYear: 'Önceki yıl',
+      nextYear: 'Sonraki yıl',
+      prevMonth: 'Önceki ay',
+      nextMonth: 'Sonraki ay'
+    },
     inputNumber: {
       increment: 'Arttır',
       decrement: 'Azalt'

src/runtime/locale/zh_hans.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '没有数据',
       create: '创建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     inputNumber: {
       increment: '增加',
       decrement: '减少'

src/runtime/locale/zh_hant.ts

@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '沒有資料',
       create: '創建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     inputNumber: {
       increment: '增加',
       decrement: '减少'

src/runtime/types/index.ts

@@ -6,6 +6,7 @@ export * from '../components/AvatarGroup.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
 export * from '../components/Button.vue'
+export * from '../components/Calendar.vue'
 export * from '../components/Card.vue'
 export * from '../components/Carousel.vue'
 export * from '../components/Checkbox.vue'

src/runtime/types/locale.ts

@@ -4,6 +4,12 @@ export type Messages = {
     noData: string
     create: string
   }
+  calendar: {
+    prevYear: string
+    nextYear: string
+    prevMonth: string
+    nextMonth: string
+  }
   inputNumber: {
     increment: string
     decrement: string

src/theme/calendar.ts

@@ -0,0 +1,64 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: '',
+    header: 'flex items-center justify-between',
+    body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
+    heading: 'text-center font-medium truncate mx-auto',
+    grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
+    gridRow: 'grid grid-cols-7',
+    gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
+    gridBody: 'grid',
+    headCell: 'rounded-[calc(var(--ui-radius)*1.5)]',
+    cell: 'relative text-center',
+    cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold', options.theme.transitions && 'transition']
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+        headCell: `text-[var(--ui-${color})]`,
+        cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:bg-[var(--ui-${color})] data-today:not-data-[selected]:text-[var(--ui-${color})] data-[highlighted]:bg-[var(--ui-${color})]/20 hover:not-data-[selected]:bg-[var(--ui-${color})]/20`
+      }])),
+      neutral: {
+        headCell: 'text-[var(--ui-bg-inverted)]',
+        cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10'
+      }
+    },
+    size: {
+      xs: {
+        heading: 'text-xs',
+        cell: 'text-xs',
+        headCell: 'text-[10px]',
+        cellTrigger: 'size-7',
+        body: 'space-y-2 pt-2'
+      },
+      sm: {
+        heading: 'text-xs',
+        headCell: 'text-xs',
+        cell: 'text-xs',
+        cellTrigger: 'size-7'
+      },
+      md: {
+        heading: 'text-sm',
+        headCell: 'text-xs',
+        cell: 'text-sm',
+        cellTrigger: 'size-8'
+      },
+      lg: {
+        heading: 'text-md',
+        headCell: 'text-md',
+        cellTrigger: 'size-9 text-md'
+      },
+      xl: {
+        heading: 'text-lg',
+        headCell: 'text-lg',
+        cellTrigger: 'size-10 text-lg'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'primary'
+  }
+})

src/theme/index.ts

@@ -6,6 +6,7 @@ export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
 export { default as buttonGroup } from './button-group'
+export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'

test/components/Calendar.spec.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, afterAll, test } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import Calendar, { type CalendarProps, type CalendarSlots } from '../../src/runtime/components/Calendar.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/calendar'
+import { CalendarDate } from '@internationalized/date'
+
+describe('Calendar', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const date = new Date('2025-01-01')
+
+  vi.setSystemTime(date)
+
+  afterAll(() => {
+    vi.useRealTimers()
+  })
+
+  it.each([
+    // Props
+    ['with modelValue', { props: { modelValue: new CalendarDate(2025, 1, 1) } }],
+    ['with default value', { props: { defaultValue: new CalendarDate(2025, 1, 1) } }],
+    ['with range', { props: { range: true } }],
+    ['with multiple', { props: { multiple: true } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with readonly', { props: { readonly: true } }],
+    ['with isDateDisabled', { props: { isDateDisabled: () => true } }],
+    ['with isDateUnavailable', { props: { isDateUnavailable: () => true } }],
+    ['with weekStartsOn', { props: { weekStartsOn: 1 } }],
+    ['with weekdayFormat', { props: { weekdayFormat: 'short' } }],
+    ['with numberOfMonths', { props: { numberOfMonths: 2 } }],
+    ['without fixedWeeks', { props: { fixedWeeks: false } }],
+    ['without monthControls', { props: { monthControls: false } }],
+    ['without yearControls', { props: { yearControls: false } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ['with color neutral', { props: { color: 'neutral' } }],
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: 'max-w-sm' } }],
+    ['with ui', { props: { ui: { header: 'gap-4' } } }],
+    // Slots
+    ['with heading slot', { slots: { heading: () => 'Heading' } }],
+    ['with day slot', { slots: { day: ({ day }: Parameters<CalendarSlots['day']>[0]) => day.day } }],
+    ['with week-day slot', { slots: { 'week-day': ({ day }: Parameters<CalendarSlots['week-day']>[0]) => day } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps<false, false>, slots?: Partial<CalendarSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Calendar)
+    expect(html).toMatchSnapshot()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event single', async () => {
+      const wrapper = await mountSuspended(Calendar)
+      const date = new CalendarDate(2025, 1, 1)
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+
+    test('update:modelValue event range', async () => {
+      const wrapper = await mountSuspended(Calendar, { props: { range: true } })
+      const date = [new CalendarDate(2025, 1, 1), new CalendarDate(2025, 1, 2)]
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+  })
+})