@nuxt/ui 4.8.1 → 4.9.0

package/dist/module.d.mts

@@ -40,6 +40,13 @@ interface ModuleOptions {
          * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
+        /**
+         * Remove all default theme classes from components, keeping only their
+         * structure and the classes you supply via `class`, `ui` or `app.config.ui`.
+         * @defaultValue `false`
+         * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#themeunstyled
+         */
+        unstyled?: boolean;
         /**
          * The default variants to use for components
          * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#themedefaultvariants

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.BzjkAvk7.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.BfHSFiIO.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.8.1";
+const version = "4.9.0";
 
 const module$1 = defineNuxtModule({
   meta: {

package/dist/runtime/components/Avatar.vue

@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {}
 }));
 const rootClass = computed(() => ui.value.root({ class: [props.ui?.root, props.class] }));
 const sizePx = computed(() => {
-  const sizeClass = rootClass.value.split(" ").find((c) => /^size-\d+$/.test(c));
+  const sizeClass = (rootClass.value || "").split(" ").find((c) => /^size-\d+$/.test(c));
   if (sizeClass) {
     const num = Number.parseFloat(sizeClass.split("-")[1] ?? "");
     if (!Number.isNaN(num)) return num * 4;

package/dist/runtime/components/Banner.vue

@@ -100,7 +100,6 @@ function onClose() {
       :aria-label="props.title"
       v-bind="{ to: props.to, target: props.target, ...$attrs }"
       :class="prefix('focus:outline-none')"
-      tabindex="-1"
       raw
     >
       <span :class="prefix('absolute inset-0')" aria-hidden="true" />

package/dist/runtime/components/BlogPost.vue

@@ -74,6 +74,14 @@ const ariaLabel = computed(() => {
 
 <template>
   <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <ULink
+      v-if="props.to"
+      :aria-label="ariaLabel"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      :class="prefix('focus:outline-none absolute inset-0')"
+      raw
+    />
+
     <div v-if="props.image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :ui="ui">
         <component
@@ -86,16 +94,6 @@ const ariaLabel = computed(() => {
     </div>
 
     <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
-      <ULink
-        v-if="props.to"
-        :aria-label="ariaLabel"
-        v-bind="{ to: props.to, target: props.target, ...$attrs }"
-        :class="prefix('focus:outline-none peer')"
-        raw
-      >
-        <span :class="prefix('absolute inset-0')" aria-hidden="true" />
-      </ULink>
-
       <slot name="body">
         <div v-if="date || !!slots.date || (props.badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
           <slot name="badge">

package/dist/runtime/components/Calendar.d.vue.ts

@@ -1,4 +1,4 @@
-import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, MonthPickerRootProps, YearPickerRootProps, DateRange, CalendarCellTriggerProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
@@ -6,16 +6,28 @@ import theme from '#build/ui/calendar';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
+export type CalendarType = 'date' | 'month' | 'year';
+export type CalendarView = 'day' | 'month' | 'year';
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
 type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
-type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _MonthPickerRootProps = Pick<MonthPickerRootProps, 'isMonthDisabled' | 'isMonthUnavailable'>;
+type _YearPickerRootProps = Pick<YearPickerRootProps, 'isYearDisabled' | 'isYearUnavailable'>;
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps, _MonthPickerRootProps, _YearPickerRootProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * The type of picker.
+     * - `date` renders a day calendar whose heading can switch to a month then year view.
+     * - `month` renders a standalone month picker.
+     * - `year` renders a standalone year picker.
+     * @defaultValue 'date'
+     */
+    type?: CalendarType;
     /**
      * The icon to use for the next year control.
      * @defaultValue appConfig.ui.icons.chevronDoubleRight
@@ -60,6 +72,13 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
     prevMonth?: Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Whether to make the heading a button that switches between the day, month and year views.
+     * Has no effect when `type` is `year`. Can be an object to override the button props.
+     * `{ color: 'neutral', variant: 'ghost', block: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    viewControl?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * @defaultValue 'primary'
      */
@@ -88,22 +107,39 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
 }
 export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
     'update:modelValue': [value: CalendarModelValue<R, M>];
+    'update:placeholder': [date: DateValue];
+    'update:startValue': [date: DateValue | undefined];
+    'update:validModelValue': [date: DateRange];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
         value: string;
+        view: CalendarView;
+        date: DateValue;
+        setView: (view: CalendarView) => void;
+        setPlaceholder: (date: DateValue) => void;
     }) => VNode[];
     'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[];
     'week-day'?: (props: {
         day: string;
     }) => VNode[];
+    'month-cell'?: (props: {
+        month: DateValue;
+        selected: boolean;
+        disabled: boolean;
+    }) => VNode[];
+    'year-cell'?: (props: {
+        year: DateValue;
+        selected: boolean;
+        disabled: boolean;
+    }) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarProps<R, M> & {
         "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
-        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -112,7 +148,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", date: DateValue) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Calendar.vue

@@ -1,13 +1,13 @@
 <script>
 import { getWeekNumber } from "reka-ui/date";
+import { getLocalTimeZone, today } from "@internationalized/date";
 import theme from "#build/ui/calendar";
 </script>
 
 <script setup>
-import { computed } from "vue";
-import {} from "reka-ui";
+import { computed, ref, shallowRef, watch } from "vue";
 import { useForwardProps } from "../composables/useForwardProps";
-import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
+import { Calendar as SingleCalendar, RangeCalendar, MonthPicker, MonthRangePicker, YearPicker, YearRangePicker } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
@@ -16,6 +16,7 @@ import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const _props = defineProps({
   as: { type: null, required: false },
+  type: { type: String, required: false, default: "date" },
   nextYearIcon: { type: null, required: false },
   nextYear: { type: Object, required: false },
   nextMonthIcon: { type: null, required: false },
@@ -24,6 +25,7 @@ const _props = defineProps({
   prevYear: { type: Object, required: false },
   prevMonthIcon: { type: null, required: false },
   prevMonth: { type: Object, required: false },
+  viewControl: { type: [Boolean, Object], required: false, default: true },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
@@ -47,6 +49,7 @@ const _props = defineProps({
   fixedWeeks: { type: Boolean, required: false, default: true },
   maxValue: { type: Object, required: false },
   minValue: { type: Object, required: false },
+  locale: { type: String, required: false },
   numberOfMonths: { type: Number, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
@@ -57,71 +60,181 @@ const _props = defineProps({
   nextPage: { type: Function, required: false },
   prevPage: { type: Function, required: false },
   disableDaysOutsideCurrentView: { type: Boolean, required: false },
-  fixedDate: { type: String, required: false }
+  fixedDate: { type: String, required: false },
+  isMonthDisabled: { type: Function, required: false },
+  isMonthUnavailable: { type: Function, required: false },
+  isYearDisabled: { type: Function, required: false },
+  isYearUnavailable: { type: Function, required: false }
 });
-const emits = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
+const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue", "update:validModelValue"]);
 defineSlots();
 const props = useComponentProps("calendar", _props);
 const { dir, t, locale } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "variant", "size", "monthControls", "yearControls", "class", "ui"), emits);
+const VIEWS = ["day", "month", "year"];
+const minView = computed(() => props.type === "year" ? "year" : props.type === "month" ? "month" : "day");
+const maxView = "year";
+const view = ref(minView.value);
+watch(() => props.type, () => {
+  view.value = minView.value;
+});
+const switchable = computed(() => minView.value !== maxView);
+const isMinView = computed(() => view.value === minView.value);
+function clampView(value) {
+  const min = VIEWS.indexOf(minView.value);
+  const max = VIEWS.indexOf(maxView);
+  return VIEWS[Math.min(Math.max(VIEWS.indexOf(value), min), max)];
+}
+function setView(value) {
+  view.value = clampView(value);
+}
+function cycleView() {
+  const max = VIEWS.indexOf(maxView);
+  const next = VIEWS.indexOf(view.value) >= max ? minView.value : VIEWS[VIEWS.indexOf(view.value) + 1];
+  view.value = next;
+}
+function resolveDateValue(value) {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  if (!value) {
+    return void 0;
+  }
+  if ("start" in value || "end" in value) {
+    const range = value;
+    return range.start ?? range.end ?? void 0;
+  }
+  return value;
+}
+const placeholder = shallowRef(
+  props.placeholder ?? resolveDateValue(props.modelValue) ?? resolveDateValue(props.defaultValue) ?? today(getLocalTimeZone())
+);
+watch(() => props.placeholder, (value) => {
+  if (value) {
+    placeholder.value = value;
+  }
+});
+function setPlaceholder(date) {
+  placeholder.value = date;
+  emits("update:placeholder", date);
+}
+function onSelect(value) {
+  if (isMinView.value) {
+    emits("update:modelValue", value);
+    return;
+  }
+  const resolved = resolveDateValue(value);
+  if (resolved) {
+    setPlaceholder(resolved);
+  }
+  setView(VIEWS[VIEWS.indexOf(view.value) - 1]);
+}
+function paginateYear(date, sign) {
+  return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 });
+}
+const Picker = computed(() => {
+  const range = props.range && isMinView.value;
+  if (view.value === "year") {
+    return range ? YearRangePicker : YearPicker;
+  }
+  if (view.value === "month") {
+    return range ? MonthRangePicker : MonthPicker;
+  }
+  return props.range ? RangeCalendar : SingleCalendar;
+});
+const omittedProps = ["type", "placeholder", "range", "modelValue", "defaultValue", "color", "variant", "size", "monthControls", "yearControls", "viewControl", "class", "ui"];
+const dayOnlyProps = ["pagedNavigation", "weekStartsOn", "weekdayFormat", "fixedWeeks", "numberOfMonths", "isDateDisabled", "isDateUnavailable", "isDateHighlightable", "disableDaysOutsideCurrentView", "maximumDays"];
+const monthOnlyProps = ["isMonthDisabled", "isMonthUnavailable"];
+const yearOnlyProps = ["isYearDisabled", "isYearUnavailable"];
+const rangeOnlyProps = ["allowNonContiguousRanges", "fixedDate"];
+const rootProps = useForwardProps(reactiveOmit(
+  props,
+  (_, key) => omittedProps.includes(key) || view.value !== "day" && dayOnlyProps.includes(key) || view.value !== "month" && monthOnlyProps.includes(key) || view.value !== "year" && yearOnlyProps.includes(key) || !isMinView.value && rangeOnlyProps.includes(key)
+));
+function cellProps(cellDate, monthValue) {
+  if (view.value === "month") {
+    return { month: cellDate };
+  }
+  if (view.value === "year") {
+    return { year: cellDate };
+  }
+  return { day: cellDate, month: monthValue };
+}
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
 const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
 const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
+const prevLabel = computed(() => view.value === "day" ? t("calendar.prevMonth") : t("calendar.prevYear"));
+const nextLabel = computed(() => view.value === "day" ? t("calendar.nextMonth") : t("calendar.nextYear"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.calendar || {} })({
   color: props.color,
   size: props.size,
   variant: props.variant,
-  weekNumbers: props.weekNumbers
+  weekNumbers: props.weekNumbers,
+  view: view.value
 }));
-function paginateYear(date, sign) {
-  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 }"
+  <Picker.Root
+    v-slot="{ weekDays, grid, date }"
     v-bind="rootProps"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
+    :model-value="isMinView ? props.modelValue : void 0"
+    :default-value="isMinView ? props.defaultValue : void 0"
+    :placeholder="placeholder"
     data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:placeholder="setPlaceholder"
+    @update:model-value="onSelect"
+    @update:start-value="(value) => emits('update:startValue', value)"
+    @update:valid-model-value="(value) => emits('update:validModelValue', value)"
   >
-    <Calendar.Header data-slot="header" :class="ui.header({ class: props.ui?.header })">
-      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+    <Picker.Header data-slot="header" :class="ui.header({ class: props.ui?.header })">
+      <Picker.Prev v-if="view === 'day' && props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
-      </Calendar.Prev>
-      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+      </Picker.Prev>
+      <Picker.Prev v-if="view !== 'day' || props.monthControls" :aria-label="prevLabel" as-child>
         <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
-      </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: props.ui?.heading })">
-        <slot name="heading" :value="headingValue">
-          {{ headingValue }}
+      </Picker.Prev>
+      <Picker.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: props.ui?.heading })">
+        <slot
+          name="heading"
+          :value="headingValue"
+          :view="view"
+          :date="date"
+          :set-view="setView"
+          :set-placeholder="setPlaceholder"
+        >
+          <UButton
+            v-if="switchable && props.viewControl"
+            :label="headingValue"
+            :size="props.size"
+            color="neutral"
+            variant="ghost"
+            block
+            v-bind="typeof props.viewControl === 'object' ? props.viewControl : {}"
+            @click="cycleView"
+          />
+          <span v-else data-slot="headingLabel" :class="ui.headingLabel({ class: props.ui?.headingLabel })">{{ headingValue }}</span>
         </slot>
-      </Calendar.Heading>
-      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+      </Picker.Heading>
+      <Picker.Next v-if="view !== 'day' || props.monthControls" :aria-label="nextLabel" as-child>
         <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
-      </Calendar.Next>
-      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+      </Picker.Next>
+      <Picker.Next v-if="view === 'day' && props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
         <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
-      </Calendar.Next>
-    </Calendar.Header>
+      </Picker.Next>
+    </Picker.Header>
     <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
-      <Calendar.Grid
-        v-for="month in grid"
+      <Picker.Grid
+        v-for="month in Array.isArray(grid) ? grid : [grid]"
         :key="month.value.toString()"
         data-slot="grid"
         :class="ui.grid({ class: props.ui?.grid })"
       >
-        <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
-            <Calendar.HeadCell
+        <Picker.GridHead v-if="'GridHead' in Picker">
+          <Picker.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Picker.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
@@ -130,45 +243,51 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
-            </Calendar.HeadCell>
-          </Calendar.GridRow>
-        </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
-          <Calendar.GridRow
-            v-for="(weekDates, index) in month.rows"
-            :key="`weekDate-${index}`"
+            </Picker.HeadCell>
+          </Picker.GridRow>
+        </Picker.GridHead>
+        <Picker.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Picker.GridRow
+            v-for="(row, index) in month.rows"
+            :key="`row-${index}`"
             data-slot="gridRow"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
             <td
-              v-if="props.weekNumbers && weekDates[0]"
+              v-if="view === 'day' && props.weekNumbers && row[0]"
               role="gridcell"
               data-slot="cellWeek"
               :class="ui.cellWeek({ class: props.ui?.cellWeek })"
             >
-              {{ getWeekNumber(weekDates[0], locale.code) }}
+              {{ getWeekNumber(row[0], props.locale ?? locale.code) }}
             </td>
-            <Calendar.Cell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
+            <Picker.Cell
+              v-for="cellDate in row"
+              :key="cellDate.toString()"
+              :date="cellDate"
               data-slot="cell"
               :class="ui.cell({ class: props.ui?.cell })"
             >
-              <Calendar.CellTrigger
-                :day="weekDate"
-                :month="month.value"
+              <Picker.CellTrigger
+                v-slot="cell"
+                v-bind="cellProps(cellDate, month.value)"
                 data-slot="cellTrigger"
                 :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
               >
-                <slot name="day" :day="weekDate">
-                  {{ weekDate.day }}
+                <slot v-if="view === 'day'" name="day" :day="cellDate">
+                  {{ cellDate.day }}
+                </slot>
+                <slot v-else-if="view === 'month'" name="month-cell" :month="cellDate" :selected="cell.selected" :disabled="cell.disabled">
+                  {{ cell.monthValue }}
+                </slot>
+                <slot v-else name="year-cell" :year="cellDate" :selected="cell.selected" :disabled="cell.disabled">
+                  {{ cell.yearValue }}
                 </slot>
-              </Calendar.CellTrigger>
-            </Calendar.Cell>
-          </Calendar.GridRow>
-        </Calendar.GridBody>
-      </Calendar.Grid>
+              </Picker.CellTrigger>
+            </Picker.Cell>
+          </Picker.GridRow>
+        </Picker.GridBody>
+      </Picker.Grid>
     </div>
-  </Calendar.Root>
+  </Picker.Root>
 </template>

package/dist/runtime/components/Calendar.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, MonthPickerRootProps, YearPickerRootProps, DateRange, CalendarCellTriggerProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
@@ -6,16 +6,28 @@ import theme from '#build/ui/calendar';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
+export type CalendarType = 'date' | 'month' | 'year';
+export type CalendarView = 'day' | 'month' | 'year';
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
 type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
-type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _MonthPickerRootProps = Pick<MonthPickerRootProps, 'isMonthDisabled' | 'isMonthUnavailable'>;
+type _YearPickerRootProps = Pick<YearPickerRootProps, 'isYearDisabled' | 'isYearUnavailable'>;
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps, _MonthPickerRootProps, _YearPickerRootProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * The type of picker.
+     * - `date` renders a day calendar whose heading can switch to a month then year view.
+     * - `month` renders a standalone month picker.
+     * - `year` renders a standalone year picker.
+     * @defaultValue 'date'
+     */
+    type?: CalendarType;
     /**
      * The icon to use for the next year control.
      * @defaultValue appConfig.ui.icons.chevronDoubleRight
@@ -60,6 +72,13 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
     prevMonth?: Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Whether to make the heading a button that switches between the day, month and year views.
+     * Has no effect when `type` is `year`. Can be an object to override the button props.
+     * `{ color: 'neutral', variant: 'ghost', block: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    viewControl?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * @defaultValue 'primary'
      */
@@ -88,22 +107,39 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
 }
 export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
     'update:modelValue': [value: CalendarModelValue<R, M>];
+    'update:placeholder': [date: DateValue];
+    'update:startValue': [date: DateValue | undefined];
+    'update:validModelValue': [date: DateRange];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
         value: string;
+        view: CalendarView;
+        date: DateValue;
+        setView: (view: CalendarView) => void;
+        setPlaceholder: (date: DateValue) => void;
     }) => VNode[];
     'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[];
     'week-day'?: (props: {
         day: string;
     }) => VNode[];
+    'month-cell'?: (props: {
+        month: DateValue;
+        selected: boolean;
+        disabled: boolean;
+    }) => VNode[];
+    'year-cell'?: (props: {
+        year: DateValue;
+        selected: boolean;
+        disabled: boolean;
+    }) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarProps<R, M> & {
         "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
-        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -112,7 +148,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", date: DateValue) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };