@nuxt/ui 4.8.2 → 4.10.0

package/dist/runtime/components/Breadcrumb.vue

@@ -29,7 +29,7 @@ const props = useComponentProps("breadcrumb", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.breadcrumb || {} })({
   color: props.color
 }));
 </script>

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
-import type { AvatarProps, IconProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkProps } from './Link.vue';
 import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
@@ -83,7 +85,7 @@ declare const __VLS_export: <T extends BreadcrumbItem>(__VLS_props: NonNullable<
     slots: BreadcrumbSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
@@ -27,7 +27,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     block?: boolean;
     /** Set loading state automatically based on the `@click` promise state */
     loadingAuto?: boolean;
-    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((event: MouseEvent) => void) | Array<((event: MouseEvent) => void)>;
     class?: any;
     ui?: Button['slots'];
 }

package/dist/runtime/components/Button.vue

@@ -88,7 +88,7 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
   computed(() => ({ ...props, loading: isLoading.value }))
 );
 const ui = computed(() => tv({
-  extend: tv(theme),
+  extend: theme,
   ...defu({
     variants: {
       active: {
@@ -123,8 +123,8 @@ const ui = computed(() => tv({
     custom
   >
     <ULinkBase
-      v-bind="slotProps"
       data-slot="base"
+      v-bind="slotProps"
       :class="ui.base({
   class: [props.ui?.base, props.class],
   active,

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
@@ -27,7 +27,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     block?: boolean;
     /** Set loading state automatically based on the `@click` promise state */
     loadingAuto?: boolean;
-    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((event: MouseEvent) => void) | Array<((event: MouseEvent) => void)>;
     class?: any;
     ui?: Button['slots'];
 }

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

@@ -1,21 +1,35 @@
-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';
 import theme from '#build/ui/calendar';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 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' | 'calendarLabel' | 'multiple'>;
 type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
-export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
+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 +74,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 +109,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,9 +150,9 @@ 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>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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 },
@@ -58,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 ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.calendar || {} })({
+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: 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"
@@ -131,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], props.locale ?? 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,21 +1,35 @@
-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';
 import theme from '#build/ui/calendar';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 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' | 'calendarLabel' | 'multiple'>;
 type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
-export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
+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 +74,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 +109,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,9 +150,9 @@ 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>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Card.vue

@@ -19,7 +19,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("card", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.card || {} })({
   variant: props.variant
 }));
 </script>