@sewadah/selaras 0.1.1

package/dist/runtime/components/DatePicker.vue

@@ -0,0 +1,796 @@
+<script setup>
+import { DateFormatter, endOfMonth, endOfYear, getLocalTimeZone, startOfMonth, startOfYear, Time, toCalendarDateTime, today } from "@internationalized/date";
+import {
+  DatePickerAnchor,
+  DatePickerArrow,
+  DatePickerContent,
+  DatePickerField,
+  DatePickerInput,
+  DatePickerRoot,
+  DatePickerTrigger,
+  DateRangePickerAnchor,
+  DateRangePickerArrow,
+  DateRangePickerContent,
+  DateRangePickerField,
+  DateRangePickerInput,
+  DateRangePickerRoot,
+  DateRangePickerTrigger,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+  TimeFieldInput,
+  TimeFieldRoot
+} from "reka-ui";
+import { computed, ref, shallowRef, useId, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useLocale } from "../composables/use-locale";
+import { useIsMobile } from "../composables/use-media-query";
+import { useMessages } from "../composables/use-messages";
+import DatePickerCalendarBody from "../internal/DatePickerCalendarBody.vue";
+import DatePickerRangeCalendarBody from "../internal/DatePickerRangeCalendarBody.vue";
+import DatePickerTimeBody from "../internal/DatePickerTimeBody.vue";
+import { datePickerTheme } from "../theme/date-picker";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+import Modal from "./Modal.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: Object, required: false },
+  range: { type: Boolean, required: false },
+  timeOnly: { type: Boolean, required: false },
+  minValue: { type: Object, required: false },
+  maxValue: { type: Object, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  closeOnSelect: { type: Boolean, required: false, default: true },
+  triggerMode: { type: String, required: false, default: "field" },
+  view: { type: String, required: false },
+  granularity: { type: String, required: false, default: "day" },
+  minuteStep: { type: Number, required: false, default: 1 },
+  hourCycle: { type: Number, required: false },
+  format: { type: null, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false },
+  maximumDays: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  isMonthDisabled: { type: Function, required: false },
+  isYearDisabled: { type: Function, required: false },
+  invalid: { type: Boolean, required: false },
+  clearable: { type: Boolean, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  activeColor: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false },
+  arrow: { type: Boolean, required: false, default: false },
+  mobileModal: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:view"]);
+const field = useFormField();
+const datePickerId = computed(() => props.id ?? field?.id);
+const hourInputId = useId();
+const minuteInputId = useId();
+const datePickerInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const describedBy = computed(() => field?.describedBy.value);
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const iconButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const effectiveNumberOfMonths = computed(() => props.numberOfMonths ?? (props.range ? 2 : 1));
+const singleModelValue = computed(() => props.range ? void 0 : props.modelValue);
+const rangeModelValue = computed(() => props.range ? props.modelValue : void 0);
+const hasValue = computed(() => props.range ? !!props.modelValue?.start : !!props.modelValue);
+function clear() {
+  emit("update:modelValue", props.range ? { start: void 0, end: void 0 } : void 0);
+}
+const defaultView = computed(() => {
+  if (props.granularity === "month" || props.granularity === "year")
+    return props.granularity;
+  return "date";
+});
+const internalView = ref(props.view ?? defaultView.value);
+watch(() => props.view, (value) => {
+  if (value !== void 0)
+    internalView.value = value;
+});
+function setView(value) {
+  internalView.value = value;
+  emit("update:view", value);
+}
+function drillUp() {
+  if (internalView.value === "date")
+    setView("month");
+  else if (internalView.value === "month")
+    setView("year");
+}
+const isTimeGranularity = computed(() => props.granularity === "hour" || props.granularity === "minute");
+function ensureTimeCapable(value) {
+  return "hour" in value ? value : toCalendarDateTime(value);
+}
+function normalizeForGranularity(value) {
+  if (!value)
+    return value;
+  if (props.granularity === "year")
+    return value.set({ month: 1, day: 1 });
+  if (props.granularity === "month")
+    return value.set({ day: 1 });
+  if (isTimeGranularity.value) {
+    const timeCapable = ensureTimeCapable(value);
+    return timeCapable.set(props.granularity === "hour" ? { minute: 0, second: 0, millisecond: 0 } : { second: 0, millisecond: 0 });
+  }
+  return value;
+}
+const placeholder = shallowRef((() => {
+  const seed = singleModelValue.value ?? today(getLocalTimeZone());
+  return isTimeGranularity.value ? ensureTimeCapable(seed) : seed;
+})());
+const isOpen = ref(false);
+watch(isOpen, (open) => {
+  if (!open)
+    setView(defaultView.value);
+});
+const isRangeOpen = ref(false);
+const isMobile = useIsMobile();
+const showMobileModal = computed(() => props.mobileModal && isMobile.value);
+const mobileModalUi = { content: "rounded-[var(--ui-radius-md)]" };
+const effectiveLocale = computed(() => props.locale ?? useLocale().value);
+const monthFormatter = computed(() => new DateFormatter(effectiveLocale.value, { month: "short" }));
+const monthGridItems = computed(() => Array.from({ length: 12 }, (_, i) => {
+  const value = placeholder.value.set({ month: i + 1, day: 1 });
+  return { value, label: monthFormatter.value.format(value.toDate(getLocalTimeZone())) };
+}));
+const yearWindowStart = computed(() => Math.floor(placeholder.value.year / 12) * 12);
+const yearGridItems = computed(() => Array.from({ length: 12 }, (_, i) => ({
+  value: yearWindowStart.value + i,
+  label: String(yearWindowStart.value + i)
+})));
+const decadeHeadingText = computed(() => `${yearWindowStart.value} \u2013 ${yearWindowStart.value + 11}`);
+function isMonthDisabledByRange(date) {
+  if (!props.minValue && !props.maxValue)
+    return false;
+  if (props.maxValue && startOfMonth(date).compare(props.maxValue) > 0)
+    return true;
+  if (props.minValue && endOfMonth(date).compare(props.minValue) < 0)
+    return true;
+  return false;
+}
+function isYearDisabledByRange(year) {
+  if (!props.minValue && !props.maxValue)
+    return false;
+  const value = placeholder.value.set({ year });
+  if (props.maxValue && startOfYear(value).compare(props.maxValue) > 0)
+    return true;
+  if (props.minValue && endOfYear(value).compare(props.minValue) < 0)
+    return true;
+  return false;
+}
+function isMonthDisabled(date) {
+  return isMonthDisabledByRange(date) || (props.isMonthDisabled?.(date) ?? false);
+}
+function isYearDisabled(year) {
+  return isYearDisabledByRange(year) || (props.isYearDisabled?.(year) ?? false);
+}
+function selectMonth(date) {
+  placeholder.value = date;
+  if (props.granularity === "month") {
+    emit("update:modelValue", normalizeForGranularity(date));
+    if (props.closeOnSelect)
+      isOpen.value = false;
+    return;
+  }
+  setView("date");
+}
+function selectYear(year) {
+  const value = placeholder.value.set({ year });
+  placeholder.value = value;
+  if (props.granularity === "year") {
+    emit("update:modelValue", normalizeForGranularity(value));
+    if (props.closeOnSelect)
+      isOpen.value = false;
+    return;
+  }
+  setView("month");
+}
+function goToPreviousYear() {
+  placeholder.value = placeholder.value.subtract({ years: 1 });
+}
+function goToNextYear() {
+  placeholder.value = placeholder.value.add({ years: 1 });
+}
+function goToPreviousDecade() {
+  placeholder.value = placeholder.value.subtract({ years: 12 });
+}
+function goToNextDecade() {
+  placeholder.value = placeholder.value.add({ years: 12 });
+}
+const placeholderHour = computed(() => "hour" in placeholder.value ? placeholder.value.hour : 0);
+const placeholderMinute = computed(() => "minute" in placeholder.value ? placeholder.value.minute : 0);
+function setHour(hour24) {
+  const value = ensureTimeCapable(placeholder.value).set({ hour: hour24 });
+  placeholder.value = value;
+  emit("update:modelValue", normalizeForGranularity(value));
+}
+function setMinute(minute) {
+  const value = ensureTimeCapable(placeholder.value).set({ minute });
+  placeholder.value = value;
+  emit("update:modelValue", normalizeForGranularity(value));
+}
+const timeOnlyGranularity = computed(() => props.granularity === "hour" ? "hour" : "minute");
+const timeOnlyValue = computed(() => props.timeOnly ? props.modelValue : void 0);
+const timePlaceholder = shallowRef(timeOnlyValue.value ?? (() => {
+  const now = /* @__PURE__ */ new Date();
+  return new Time(now.getHours(), now.getMinutes());
+})());
+const timeIsOpen = ref(false);
+function normalizeTimeOnly(value) {
+  return timeOnlyGranularity.value === "hour" ? value.set({ minute: 0, second: 0, millisecond: 0 }) : value.set({ second: 0, millisecond: 0 });
+}
+function setTimeOnlyHour(hour24) {
+  const value = timePlaceholder.value.set({ hour: hour24 });
+  timePlaceholder.value = value;
+  emit("update:modelValue", normalizeTimeOnly(value));
+}
+function setTimeOnlyMinute(minute) {
+  const value = timePlaceholder.value.set({ minute });
+  timePlaceholder.value = value;
+  emit("update:modelValue", normalizeTimeOnly(value));
+}
+const timeOnlyFormatter = computed(() => new DateFormatter(effectiveLocale.value, props.format ?? (timeOnlyGranularity.value === "hour" ? { hour: "numeric" } : { timeStyle: "short" })));
+const formattedTimeValue = computed(() => {
+  if (!timeOnlyValue.value)
+    return "";
+  const asDateTime = toCalendarDateTime(today(getLocalTimeZone()), timeOnlyValue.value);
+  return timeOnlyFormatter.value.format(asDateTime.toDate(getLocalTimeZone()));
+});
+function visibleSegments(segments) {
+  if (props.granularity === "day" || isTimeGranularity.value)
+    return segments;
+  const keptParts = props.granularity === "year" ? ["year"] : ["month", "year"];
+  const result = [];
+  for (const segment of segments) {
+    if (segment.part === "literal") {
+      if (result.length && result[result.length - 1].part !== "literal")
+        result.push(segment);
+    } else if (keptParts.includes(segment.part)) {
+      result.push(segment);
+    }
+  }
+  while (result.length && result[result.length - 1].part === "literal")
+    result.pop();
+  return result;
+}
+const defaultFormat = computed(() => {
+  if (props.granularity === "year")
+    return { year: "numeric" };
+  if (props.granularity === "month")
+    return { month: "long", year: "numeric" };
+  if (props.granularity === "hour")
+    return { dateStyle: "medium", hour: "numeric" };
+  if (props.granularity === "minute")
+    return { dateStyle: "medium", timeStyle: "short" };
+  return { dateStyle: "medium" };
+});
+const dateFormatter = computed(() => new DateFormatter(effectiveLocale.value, props.format ?? defaultFormat.value));
+const formattedValue = computed(() => {
+  if (props.range) {
+    const range = props.modelValue;
+    if (!range?.start)
+      return "";
+    const startDate = range.start.toDate(getLocalTimeZone());
+    return range.end ? dateFormatter.value.formatRange(startDate, range.end.toDate(getLocalTimeZone())) : dateFormatter.value.format(startDate);
+  }
+  const value = props.modelValue;
+  return value ? dateFormatter.value.format(value.toDate(getLocalTimeZone())) : "";
+});
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("datePicker", datePickerTheme);
+const ui = computed(() => theme.value({ size: effectiveSize.value, invalid: datePickerInvalid.value, range: props.range }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const fieldProps = computed(() => resolveSlot(ui.value.field, props.ui?.field));
+const segmentProps = computed(() => resolveSlot(ui.value.segment, props.ui?.segment));
+const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const headingProps = computed(() => resolveSlot(ui.value.heading, props.ui?.heading));
+const gridsProps = computed(() => resolveSlot(ui.value.grids, props.ui?.grids));
+const gridProps = computed(() => resolveSlot(ui.value.grid, props.ui?.grid));
+const gridHeadProps = computed(() => resolveSlot(ui.value.gridHead, props.ui?.gridHead));
+const headCellProps = computed(() => resolveSlot(ui.value.headCell, props.ui?.headCell));
+const cellProps = computed(() => resolveSlot(ui.value.cell, props.ui?.cell));
+const viewGridProps = computed(() => resolveSlot(ui.value.viewGrid, props.ui?.viewGrid));
+const timeSectionProps = computed(() => resolveSlot(ui.value.timeSection, props.ui?.timeSection));
+const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
+const rangeBodyProps = computed(() => ({
+  color: props.color,
+  activeColor: props.activeColor,
+  headerProps: headerProps.value,
+  headingProps: headingProps.value,
+  gridsProps: gridsProps.value,
+  gridProps: gridProps.value,
+  gridHeadProps: gridHeadProps.value,
+  headCellProps: headCellProps.value,
+  cellProps: cellProps.value
+}));
+const calendarBodyProps = computed(() => ({
+  internalView: internalView.value,
+  color: props.color,
+  activeColor: props.activeColor,
+  placeholder: placeholder.value,
+  monthGridItems: monthGridItems.value,
+  yearGridItems: yearGridItems.value,
+  decadeHeadingText: decadeHeadingText.value,
+  isMonthDisabled,
+  isYearDisabled,
+  selectMonth,
+  selectYear,
+  drillUp,
+  goToPreviousYear,
+  goToNextYear,
+  goToPreviousDecade,
+  goToNextDecade,
+  isTimeGranularity: isTimeGranularity.value,
+  granularity: props.granularity,
+  placeholderHour: placeholderHour.value,
+  placeholderMinute: placeholderMinute.value,
+  hourCycle: props.hourCycle,
+  minuteStep: props.minuteStep,
+  locale: effectiveLocale.value,
+  hourInputId,
+  minuteInputId,
+  setHour,
+  setMinute,
+  closeOnSelect: props.closeOnSelect,
+  close: () => {
+    isOpen.value = false;
+  },
+  headerProps: headerProps.value,
+  headingProps: headingProps.value,
+  gridsProps: gridsProps.value,
+  gridProps: gridProps.value,
+  gridHeadProps: gridHeadProps.value,
+  headCellProps: headCellProps.value,
+  cellProps: cellProps.value,
+  viewGridProps: viewGridProps.value,
+  timeSectionProps: timeSectionProps.value
+}));
+const timeBodyProps = computed(() => ({
+  hour: timePlaceholder.value.hour,
+  minute: timePlaceholder.value.minute,
+  granularity: timeOnlyGranularity.value,
+  hourCycle: props.hourCycle,
+  minuteStep: props.minuteStep,
+  locale: effectiveLocale.value,
+  hourInputId,
+  minuteInputId,
+  setHour: setTimeOnlyHour,
+  setMinute: setTimeOnlyMinute,
+  closeOnSelect: props.closeOnSelect,
+  activeColor: props.activeColor,
+  close: () => {
+    timeIsOpen.value = false;
+  },
+  timeSectionProps: timeSectionProps.value
+}));
+const buttonTriggerUi = computed(() => ({
+  base: [
+    "w-full justify-start rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)]",
+    datePickerInvalid.value ? "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)]" : void 0,
+    // Room for the clear button, which sits absolutely positioned on top of
+    // this same end edge - without it, a long formatted date can run under it.
+    props.clearable && hasValue.value ? "pe-8" : void 0
+  ].filter(Boolean).join(" "),
+  // base is justify-start (text left-aligned, not centered) so the button
+  // reads naturally for a short date string - without its own auto margin,
+  // the trailing icon would just sit right after that short text instead of
+  // pinned to the button's own far edge, the same "select control" look the
+  // field-mode trigger group also needs (see the ms-auto wrapper above).
+  trailingIcon: "ms-auto"
+}));
+</script>
+
+<template>
+  <DateRangePickerRoot
+    v-if="range"
+    :id="datePickerId"
+    v-model:open="isRangeOpen"
+    :name="name ?? field?.name"
+    :model-value="rangeModelValue"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-unavailable="isDateUnavailable"
+    :is-date-disabled="isDateDisabled"
+    :is-date-highlightable="isDateHighlightable"
+    :locale="effectiveLocale"
+    :number-of-months="effectiveNumberOfMonths"
+    :paged-navigation="pagedNavigation"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="weekdayFormat"
+    :fixed-weeks="fixedWeeks"
+    :close-on-select="closeOnSelect"
+    :allow-non-contiguous-ranges="allowNonContiguousRanges"
+    :fixed-date="fixedDate"
+    :maximum-days="maximumDays"
+    :disabled="disabled"
+    :readonly="readonly"
+    :prevent-deselect="preventDeselect"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <DateRangePickerAnchor as-child>
+      <div v-if="triggerMode === 'field'" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps">
+        <DateRangePickerField v-slot="{ segments }">
+          <template v-for="segment in segments.start" :key="`start-${segment.part}`">
+            <DateRangePickerInput as="span" type="start" :part="segment.part" v-bind="segmentProps">
+              {{ segment.value }}
+            </DateRangePickerInput>
+          </template>
+          <span v-bind="separatorProps">&ndash;</span>
+          <template v-for="segment in segments.end" :key="`end-${segment.part}`">
+            <DateRangePickerInput as="span" type="end" :part="segment.part" v-bind="segmentProps">
+              {{ segment.value }}
+            </DateRangePickerInput>
+          </template>
+        </DateRangePickerField>
+        <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
+          <Button
+            v-if="clearable && hasValue"
+            variant="text"
+            :color="color"
+            :size="iconButtonSize"
+            :aria-label="messages.clear"
+            @click="clear"
+          >
+            <template #icon="{ class: iconClass }">
+              <slot name="clear-icon">
+                <Icon :name="icons.close" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+          <DateRangePickerTrigger as-child>
+            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.dateRangePicker">
+              <template #icon="{ class: iconClass }">
+                <slot name="trigger-icon">
+                  <Icon :name="icons.calendar" :class="iconClass" />
+                </slot>
+              </template>
+            </Button>
+          </DateRangePickerTrigger>
+        </div>
+      </div>
+
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+        <DateRangePickerTrigger as-child>
+          <Button
+            variant="text"
+            :color="color"
+            :size="effectiveSize"
+            :aria-invalid="datePickerInvalid || void 0"
+            :aria-describedby="describedBy"
+            :ui="buttonTriggerUi"
+          >
+            {{ hasValue ? formattedValue : messages.pickDate }}
+            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+              <slot name="trigger-icon">
+                <Icon :name="icons.calendar" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+        </DateRangePickerTrigger>
+        <Button
+          v-if="clearable && hasValue"
+          variant="text"
+          :color="color"
+          :size="iconButtonSize"
+          :aria-label="messages.clear"
+          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
+          @click.stop="clear"
+        >
+          <template #icon="{ class: iconClass }">
+            <slot name="clear-icon">
+              <Icon :name="icons.close" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+      </div>
+    </DateRangePickerAnchor>
+
+    <DateRangePickerContent v-if="!showMobileModal" :side-offset="6" align="start" v-bind="contentProps">
+      <DatePickerRangeCalendarBody v-bind="rangeBodyProps">
+        <template #day="scope">
+          <slot name="day" v-bind="scope" />
+        </template>
+        <template #footer>
+          <slot name="footer" />
+        </template>
+      </DatePickerRangeCalendarBody>
+      <DateRangePickerArrow v-if="arrow" v-bind="arrowProps" />
+    </DateRangePickerContent>
+    <!--
+      Below 768px, the exact same DatePickerRangeCalendarBody - the same
+      Root-injected grid/selection state, unchanged - inside a centered
+      Modal instead of the small anchored popover above. See
+      ComboboxSelectBase.vue's own mobileModal branch for why there's no
+      extra portal here and why `title`/`description` are passed
+      explicitly.
+    -->
+    <Modal
+      v-else :open="isRangeOpen" :title="messages.dateRangePicker" :description="messages.dateRangePickerDescription"
+      :ui="mobileModalUi" @update:open="isRangeOpen = $event"
+    >
+      <template #content>
+        <div v-bind="mobileContentProps">
+          <DatePickerRangeCalendarBody v-bind="rangeBodyProps">
+            <template #day="scope">
+              <slot name="day" v-bind="scope" />
+            </template>
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </DatePickerRangeCalendarBody>
+        </div>
+      </template>
+    </Modal>
+  </DateRangePickerRoot>
+
+  <PopoverRoot v-else-if="timeOnly" v-model:open="timeIsOpen">
+    <PopoverAnchor as-child>
+      <div v-if="triggerMode === 'field'" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps">
+        <TimeFieldRoot
+          :id="datePickerId"
+          v-slot="{ segments }"
+          v-model:placeholder="timePlaceholder"
+          :model-value="timeOnlyValue"
+          :name="name ?? field?.name"
+          :locale="effectiveLocale"
+          :hour-cycle="hourCycle"
+          :granularity="timeOnlyGranularity"
+          :disabled="disabled"
+          :readonly="readonly"
+          @update:model-value="(value) => emit('update:modelValue', value ? normalizeTimeOnly(value) : void 0)"
+        >
+          <template v-for="segment in segments" :key="segment.part">
+            <TimeFieldInput as="span" :part="segment.part" v-bind="segmentProps">
+              {{ segment.value }}
+            </TimeFieldInput>
+          </template>
+        </TimeFieldRoot>
+        <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
+          <Button
+            v-if="clearable && hasValue"
+            variant="text"
+            :color="color"
+            :size="iconButtonSize"
+            :aria-label="messages.clear"
+            @click="clear"
+          >
+            <template #icon="{ class: iconClass }">
+              <slot name="clear-icon">
+                <Icon :name="icons.close" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+          <PopoverTrigger as-child>
+            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.timePicker">
+              <template #icon="{ class: iconClass }">
+                <slot name="trigger-icon">
+                  <Icon :name="icons.clock" :class="iconClass" />
+                </slot>
+              </template>
+            </Button>
+          </PopoverTrigger>
+        </div>
+      </div>
+
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+        <PopoverTrigger as-child>
+          <Button
+            variant="text"
+            :color="color"
+            :size="effectiveSize"
+            :aria-invalid="datePickerInvalid || void 0"
+            :aria-describedby="describedBy"
+            :ui="buttonTriggerUi"
+          >
+            {{ hasValue ? formattedTimeValue : messages.pickTime }}
+            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+              <slot name="trigger-icon">
+                <Icon :name="icons.clock" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+        </PopoverTrigger>
+        <Button
+          v-if="clearable && hasValue"
+          variant="text"
+          :color="color"
+          :size="iconButtonSize"
+          :aria-label="messages.clear"
+          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
+          @click.stop="clear"
+        >
+          <template #icon="{ class: iconClass }">
+            <slot name="clear-icon">
+              <Icon :name="icons.close" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+      </div>
+    </PopoverAnchor>
+
+    <PopoverPortal v-if="!showMobileModal">
+      <PopoverContent :side-offset="6" align="start" v-bind="contentProps">
+        <DatePickerTimeBody v-bind="timeBodyProps">
+          <template #footer>
+            <slot name="footer" />
+          </template>
+        </DatePickerTimeBody>
+        <PopoverArrow v-if="arrow" v-bind="arrowProps" />
+      </PopoverContent>
+    </PopoverPortal>
+    <!-- Below 768px - see the range branch's own identical note above. -->
+    <Modal
+      v-else :open="timeIsOpen" :title="messages.timePicker" :description="messages.timePickerDescription"
+      :ui="mobileModalUi" @update:open="timeIsOpen = $event"
+    >
+      <template #content>
+        <div v-bind="mobileContentProps">
+          <DatePickerTimeBody v-bind="timeBodyProps">
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </DatePickerTimeBody>
+        </div>
+      </template>
+    </Modal>
+  </PopoverRoot>
+
+  <DatePickerRoot
+    v-else
+    :id="datePickerId"
+    v-model:placeholder="placeholder"
+    v-model:open="isOpen"
+    :name="name ?? field?.name"
+    :model-value="singleModelValue"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-unavailable="isDateUnavailable"
+    :is-date-disabled="isDateDisabled"
+    :locale="effectiveLocale"
+    :hour-cycle="hourCycle"
+    :number-of-months="effectiveNumberOfMonths"
+    :paged-navigation="pagedNavigation"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="weekdayFormat"
+    :fixed-weeks="fixedWeeks"
+    :close-on-select="isTimeGranularity ? false : closeOnSelect"
+    :disabled="disabled"
+    :readonly="readonly"
+    :prevent-deselect="preventDeselect"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', normalizeForGranularity(value))"
+  >
+    <DatePickerAnchor as-child>
+      <div v-if="triggerMode === 'field'" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps">
+        <DatePickerField v-slot="{ segments }">
+          <template v-for="(segment, index) in visibleSegments(segments)" :key="`${segment.part}-${index}`">
+            <DatePickerInput as="span" :part="segment.part" v-bind="segmentProps">
+              {{ segment.value }}
+            </DatePickerInput>
+          </template>
+        </DatePickerField>
+        <div :class="applyClassPrefix('ms-auto flex shrink-0 items-center gap-1')">
+          <Button
+            v-if="clearable && hasValue"
+            variant="text"
+            :color="color"
+            :size="iconButtonSize"
+            :aria-label="messages.clear"
+            @click="clear"
+          >
+            <template #icon="{ class: iconClass }">
+              <slot name="clear-icon">
+                <Icon :name="icons.close" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+          <DatePickerTrigger as-child>
+            <Button variant="text" :color="color" :size="iconButtonSize" :aria-label="messages.datePicker">
+              <template #icon="{ class: iconClass }">
+                <slot name="trigger-icon">
+                  <Icon :name="icons.calendar" :class="iconClass" />
+                </slot>
+              </template>
+            </Button>
+          </DatePickerTrigger>
+        </div>
+      </div>
+
+      <div v-else :class="applyClassPrefix('relative inline-block w-full')">
+        <DatePickerTrigger as-child>
+          <Button
+            variant="text"
+            :color="color"
+            :size="effectiveSize"
+            :aria-invalid="datePickerInvalid || void 0"
+            :aria-describedby="describedBy"
+            :ui="buttonTriggerUi"
+          >
+            {{ hasValue ? formattedValue : messages.pickDate }}
+            <template v-if="!(clearable && hasValue)" #trailing-icon="{ class: iconClass }">
+              <slot name="trigger-icon">
+                <Icon :name="icons.calendar" :class="iconClass" />
+              </slot>
+            </template>
+          </Button>
+        </DatePickerTrigger>
+        <Button
+          v-if="clearable && hasValue"
+          variant="text"
+          :color="color"
+          :size="iconButtonSize"
+          :aria-label="messages.clear"
+          :class="applyClassPrefix('absolute end-1 top-1/2 -translate-y-1/2')"
+          @click.stop="clear"
+        >
+          <template #icon="{ class: iconClass }">
+            <slot name="clear-icon">
+              <Icon :name="icons.close" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+      </div>
+    </DatePickerAnchor>
+
+    <!-- align="start" (the default everywhere else) puts the trigger's own
+    center outside the calendar grid's bounds here, since the grid is
+    noticeably wider than the compact field/button trigger - Reka's own
+    Floating UI arrow middleware refuses to render an arrow it can't
+    center without clipping, so it silently hides instead. Centering the
+    panel on the trigger only when `arrow` is on sidesteps that without
+    changing the default (start-aligned) layout everyone already sees. -->
+    <DatePickerContent v-if="!showMobileModal" :side-offset="6" :align="arrow ? 'center' : 'start'" v-bind="contentProps">
+      <DatePickerCalendarBody v-bind="calendarBodyProps">
+        <template #day="scope">
+          <slot name="day" v-bind="scope" />
+        </template>
+        <template #footer>
+          <slot name="footer" />
+        </template>
+      </DatePickerCalendarBody>
+      <DatePickerArrow v-if="arrow" v-bind="arrowProps" />
+    </DatePickerContent>
+    <!-- Below 768px - see the range branch's own identical note above. -->
+    <Modal
+      v-else :open="isOpen" :title="messages.datePicker" :description="messages.datePickerDescription"
+      :ui="mobileModalUi" @update:open="isOpen = $event"
+    >
+      <template #content>
+        <div v-bind="mobileContentProps">
+          <DatePickerCalendarBody v-bind="calendarBodyProps">
+            <template #day="scope">
+              <slot name="day" v-bind="scope" />
+            </template>
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </DatePickerCalendarBody>
+        </div>
+      </template>
+    </Modal>
+  </DatePickerRoot>
+</template>