@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/DatePicker.vue

@@ -24,7 +24,7 @@ import {
   TimeFieldInput,
   TimeFieldRoot
 } from "reka-ui";
-import { computed, ref, shallowRef, useId, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, 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";
@@ -34,7 +34,8 @@ 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 { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 import Modal from "./Modal.vue";
@@ -42,7 +43,11 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
   name: { type: String, required: false },
+  form: { type: String, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
   modelValue: { type: Object, required: false },
+  defaultValue: { type: Object, required: false },
   range: { type: Boolean, required: false },
   timeOnly: { type: Boolean, required: false },
   minValue: { type: Object, required: false },
@@ -77,11 +82,46 @@ const props = defineProps({
   activeColor: { type: null, required: false, default: "primary" },
   size: { type: null, required: false },
   arrow: { type: Boolean, required: false, default: false },
-  mobileModal: { type: Boolean, required: false },
+  adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "update:view"]);
+const emit = defineEmits(["update:open", "update:modelValue", "update:view"]);
+const themeBindings = useThemeBindings();
 const field = useFormField();
+const instance = getCurrentInstance();
+const initialValue = props.defaultValue;
+const localValue = shallowRef(initialValue);
+const isModelControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+const modelValue = computed(() => isModelControlled() ? props.modelValue : localValue.value);
+function updateModelValue(value) {
+  if (!isModelControlled())
+    localValue.value = value;
+  emit("update:modelValue", value);
+}
+const formName = computed(() => props.name ?? field?.name);
+const nativeFormValue = computed(() => {
+  const value = modelValue.value;
+  if (!value)
+    return "";
+  if ("start" in value)
+    return `${value.start?.toString() ?? ""} - ${value.end?.toString() ?? ""}`;
+  return value.toString();
+});
+const formAnchor = ref();
+let ownerForm = null;
+function resetDatePicker(event) {
+  queueMicrotask(() => {
+    if (event.defaultPrevented || isModelControlled())
+      return;
+    updateModelValue(initialValue);
+    onUpdateOpen(false);
+  });
+}
+onMounted(() => {
+  ownerForm = formAnchor.value?.form ?? null;
+  ownerForm?.addEventListener("reset", resetDatePicker);
+});
+onUnmounted(() => ownerForm?.removeEventListener("reset", resetDatePicker));
 const datePickerId = computed(() => props.id ?? field?.id);
 const hourInputId = useId();
 const minuteInputId = useId();
@@ -90,11 +130,11 @@ 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);
+const singleModelValue = computed(() => props.range ? void 0 : modelValue.value);
+const rangeModelValue = computed(() => props.range ? modelValue.value : void 0);
+const hasValue = computed(() => props.range ? !!modelValue.value?.start : !!modelValue.value);
 function clear() {
-  emit("update:modelValue", props.range ? { start: void 0, end: void 0 } : void 0);
+  updateModelValue(props.range ? { start: void 0, end: void 0 } : void 0);
 }
 const defaultView = computed(() => {
   if (props.granularity === "month" || props.granularity === "year")
@@ -137,15 +177,20 @@ const placeholder = shallowRef((() => {
   const seed = singleModelValue.value ?? today(getLocalTimeZone());
   return isTimeGranularity.value ? ensureTimeCapable(seed) : seed;
 })());
-const isOpen = ref(false);
-watch(isOpen, (open) => {
-  if (!open)
+const localOpen = ref(props.defaultOpen ?? false);
+const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
+const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
+function onUpdateOpen(value) {
+  if (!isOpenControlled())
+    localOpen.value = value;
+  emit("update:open", value);
+}
+watch(open, (open2) => {
+  if (!open2)
     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 adaptiveUi = { content: "rounded-[var(--selaras-resolved-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) => {
@@ -186,9 +231,9 @@ function isYearDisabled(year) {
 function selectMonth(date) {
   placeholder.value = date;
   if (props.granularity === "month") {
-    emit("update:modelValue", normalizeForGranularity(date));
+    updateModelValue(normalizeForGranularity(date));
     if (props.closeOnSelect)
-      isOpen.value = false;
+      onUpdateOpen(false);
     return;
   }
   setView("date");
@@ -197,9 +242,9 @@ function selectYear(year) {
   const value = placeholder.value.set({ year });
   placeholder.value = value;
   if (props.granularity === "year") {
-    emit("update:modelValue", normalizeForGranularity(value));
+    updateModelValue(normalizeForGranularity(value));
     if (props.closeOnSelect)
-      isOpen.value = false;
+      onUpdateOpen(false);
     return;
   }
   setView("month");
@@ -221,32 +266,40 @@ const placeholderMinute = computed(() => "minute" in placeholder.value ? placeho
 function setHour(hour24) {
   const value = ensureTimeCapable(placeholder.value).set({ hour: hour24 });
   placeholder.value = value;
-  emit("update:modelValue", normalizeForGranularity(value));
+  updateModelValue(normalizeForGranularity(value));
 }
 function setMinute(minute) {
   const value = ensureTimeCapable(placeholder.value).set({ minute });
   placeholder.value = value;
-  emit("update:modelValue", normalizeForGranularity(value));
+  updateModelValue(normalizeForGranularity(value));
 }
 const timeOnlyGranularity = computed(() => props.granularity === "hour" ? "hour" : "minute");
-const timeOnlyValue = computed(() => props.timeOnly ? props.modelValue : void 0);
+const timeOnlyValue = computed(() => props.timeOnly ? modelValue.value : void 0);
 const timePlaceholder = shallowRef(timeOnlyValue.value ?? (() => {
   const now = /* @__PURE__ */ new Date();
   return new Time(now.getHours(), now.getMinutes());
 })());
-const timeIsOpen = ref(false);
+const mobilePresentation = ref(false);
+watch(open, (value) => {
+  mobilePresentation.value = value && !!props.adaptive && isMobile.value;
+});
+onMounted(() => {
+  if (open.value)
+    mobilePresentation.value = !!props.adaptive && isMobile.value;
+});
+const showMobileModal = computed(() => mobilePresentation.value);
 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));
+  updateModelValue(normalizeTimeOnly(value));
 }
 function setTimeOnlyMinute(minute) {
   const value = timePlaceholder.value.set({ minute });
   timePlaceholder.value = value;
-  emit("update:modelValue", normalizeTimeOnly(value));
+  updateModelValue(normalizeTimeOnly(value));
 }
 const timeOnlyFormatter = computed(() => new DateFormatter(effectiveLocale.value, props.format ?? (timeOnlyGranularity.value === "hour" ? { hour: "numeric" } : { timeStyle: "short" })));
 const formattedTimeValue = computed(() => {
@@ -255,6 +308,9 @@ const formattedTimeValue = computed(() => {
   const asDateTime = toCalendarDateTime(today(getLocalTimeZone()), timeOnlyValue.value);
   return timeOnlyFormatter.value.format(asDateTime.toDate(getLocalTimeZone()));
 });
+function segmentText(segment) {
+  return segment.part === "literal" ? segment.value.replace(/[\u00A0\u202F]/g, " ") : segment.value;
+}
 function visibleSegments(segments) {
   if (props.granularity === "day" || isTimeGranularity.value)
     return segments;
@@ -286,19 +342,20 @@ const defaultFormat = computed(() => {
 const dateFormatter = computed(() => new DateFormatter(effectiveLocale.value, props.format ?? defaultFormat.value));
 const formattedValue = computed(() => {
   if (props.range) {
-    const range = props.modelValue;
+    const range = modelValue.value;
     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;
+  const value = modelValue.value;
   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 fieldColor = computed(() => datePickerInvalid.value ? "danger" : resolveRegisteredColorRole(props.activeColor, "primary"));
 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));
@@ -356,7 +413,7 @@ const calendarBodyProps = computed(() => ({
   setMinute,
   closeOnSelect: props.closeOnSelect,
   close: () => {
-    isOpen.value = false;
+    onUpdateOpen(false);
   },
   headerProps: headerProps.value,
   headingProps: headingProps.value,
@@ -382,14 +439,14 @@ const timeBodyProps = computed(() => ({
   closeOnSelect: props.closeOnSelect,
   activeColor: props.activeColor,
   close: () => {
-    timeIsOpen.value = false;
+    onUpdateOpen(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,
+    "w-full justify-start rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)]",
+    datePickerInvalid.value ? "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)]" : 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
@@ -407,8 +464,10 @@ const buttonTriggerUi = computed(() => ({
   <DateRangePickerRoot
     v-if="range"
     :id="datePickerId"
-    v-model:open="isRangeOpen"
-    :name="name ?? field?.name"
+    :default-open="defaultOpen"
+    :open="open"
+    v-bind="rootProps"
+    :name="undefined"
     :model-value="rangeModelValue"
     :min-value="minValue"
     :max-value="maxValue"
@@ -428,21 +487,22 @@ const buttonTriggerUi = computed(() => ({
     :disabled="disabled"
     :readonly="readonly"
     :prevent-deselect="preventDeselect"
-    v-bind="rootProps"
-    @update:model-value="(value) => emit('update:modelValue', value)"
+    :data-selaras-color="fieldColor"
+    @update:open="onUpdateOpen"
+    @update:model-value="(value) => updateModelValue(value)"
   >
     <DateRangePickerAnchor as-child>
-      <div v-if="triggerMode === 'field'" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps">
-        <DateRangePickerField v-slot="{ segments }">
+      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
+        <DateRangePickerField v-slot="{ segments }" :aria-labelledby="field?.labelId" :aria-describedby="describedBy" :aria-invalid="datePickerInvalid || void 0">
           <template v-for="segment in segments.start" :key="`start-${segment.part}`">
             <DateRangePickerInput as="span" type="start" :part="segment.part" v-bind="segmentProps">
-              {{ segment.value }}
+              {{ segmentText(segment) }}
             </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 }}
+              {{ segmentText(segment) }}
             </DateRangePickerInput>
           </template>
         </DateRangePickerField>
@@ -481,6 +541,7 @@ const buttonTriggerUi = computed(() => ({
             :size="effectiveSize"
             :aria-invalid="datePickerInvalid || void 0"
             :aria-describedby="describedBy"
+            :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
             {{ hasValue ? formattedValue : messages.pickDate }}
@@ -509,7 +570,7 @@ const buttonTriggerUi = computed(() => ({
       </div>
     </DateRangePickerAnchor>
 
-    <DateRangePickerContent v-if="!showMobileModal" :side-offset="6" align="start" v-bind="contentProps">
+    <DateRangePickerContent v-if="!showMobileModal" :side-offset="6" align="start" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
       <DatePickerRangeCalendarBody v-bind="rangeBodyProps">
         <template #day="scope">
           <slot name="day" v-bind="scope" />
@@ -524,13 +585,13 @@ const buttonTriggerUi = computed(() => ({
       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
+      ComboboxSelectBase.vue's own adaptive 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"
+      v-else :open="open" :title="messages.dateRangePicker" :description="messages.dateRangePickerDescription"
+      :ui="adaptiveUi" @update:open="onUpdateOpen"
     >
       <template #content>
         <div v-bind="mobileContentProps">
@@ -547,25 +608,28 @@ const buttonTriggerUi = computed(() => ({
     </Modal>
   </DateRangePickerRoot>
 
-  <PopoverRoot v-else-if="timeOnly" v-model:open="timeIsOpen">
+  <PopoverRoot v-else-if="timeOnly" :open="open" :data-selaras-color="fieldColor" @update:open="onUpdateOpen">
     <PopoverAnchor as-child>
-      <div v-if="triggerMode === 'field'" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps">
+      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
         <TimeFieldRoot
           :id="datePickerId"
           v-slot="{ segments }"
           v-model:placeholder="timePlaceholder"
+          :aria-labelledby="field?.labelId"
+          :aria-describedby="describedBy"
+          :aria-invalid="datePickerInvalid || void 0"
           :model-value="timeOnlyValue"
-          :name="name ?? field?.name"
+          :name="undefined"
           :locale="effectiveLocale"
           :hour-cycle="hourCycle"
           :granularity="timeOnlyGranularity"
           :disabled="disabled"
           :readonly="readonly"
-          @update:model-value="(value) => emit('update:modelValue', value ? normalizeTimeOnly(value) : void 0)"
+          @update:model-value="(value) => updateModelValue(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 }}
+              {{ segmentText(segment) }}
             </TimeFieldInput>
           </template>
         </TimeFieldRoot>
@@ -604,6 +668,7 @@ const buttonTriggerUi = computed(() => ({
             :size="effectiveSize"
             :aria-invalid="datePickerInvalid || void 0"
             :aria-describedby="describedBy"
+            :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
             {{ hasValue ? formattedTimeValue : messages.pickTime }}
@@ -633,7 +698,7 @@ const buttonTriggerUi = computed(() => ({
     </PopoverAnchor>
 
     <PopoverPortal v-if="!showMobileModal">
-      <PopoverContent :side-offset="6" align="start" v-bind="contentProps">
+      <PopoverContent :side-offset="6" align="start" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <DatePickerTimeBody v-bind="timeBodyProps">
           <template #footer>
             <slot name="footer" />
@@ -644,8 +709,8 @@ const buttonTriggerUi = computed(() => ({
     </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"
+      v-else :open="open" :title="messages.timePicker" :description="messages.timePickerDescription"
+      :ui="adaptiveUi" @update:open="onUpdateOpen"
     >
       <template #content>
         <div v-bind="mobileContentProps">
@@ -663,8 +728,10 @@ const buttonTriggerUi = computed(() => ({
     v-else
     :id="datePickerId"
     v-model:placeholder="placeholder"
-    v-model:open="isOpen"
-    :name="name ?? field?.name"
+    :default-open="defaultOpen"
+    :open="open"
+    v-bind="rootProps"
+    :name="undefined"
     :model-value="singleModelValue"
     :min-value="minValue"
     :max-value="maxValue"
@@ -681,15 +748,16 @@ const buttonTriggerUi = computed(() => ({
     :disabled="disabled"
     :readonly="readonly"
     :prevent-deselect="preventDeselect"
-    v-bind="rootProps"
-    @update:model-value="(value) => emit('update:modelValue', normalizeForGranularity(value))"
+    :data-selaras-color="fieldColor"
+    @update:open="onUpdateOpen"
+    @update:model-value="(value) => updateModelValue(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 }">
+      <div v-if="triggerMode === 'field'" :data-selaras-color="fieldColor" :aria-invalid="datePickerInvalid || void 0" :aria-describedby="describedBy" v-bind="fieldProps" :aria-labelledby="field?.labelId">
+        <DatePickerField v-slot="{ segments }" :aria-labelledby="field?.labelId" :aria-describedby="describedBy" :aria-invalid="datePickerInvalid || void 0">
           <template v-for="(segment, index) in visibleSegments(segments)" :key="`${segment.part}-${index}`">
             <DatePickerInput as="span" :part="segment.part" v-bind="segmentProps">
-              {{ segment.value }}
+              {{ segmentText(segment) }}
             </DatePickerInput>
           </template>
         </DatePickerField>
@@ -728,6 +796,7 @@ const buttonTriggerUi = computed(() => ({
             :size="effectiveSize"
             :aria-invalid="datePickerInvalid || void 0"
             :aria-describedby="describedBy"
+            :aria-labelledby="field?.labelId"
             :ui="buttonTriggerUi"
           >
             {{ hasValue ? formattedValue : messages.pickDate }}
@@ -763,7 +832,7 @@ const buttonTriggerUi = computed(() => ({
     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">
+    <DatePickerContent v-if="!showMobileModal" :side-offset="6" :align="arrow ? 'center' : 'start'" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
       <DatePickerCalendarBody v-bind="calendarBodyProps">
         <template #day="scope">
           <slot name="day" v-bind="scope" />
@@ -776,8 +845,8 @@ const buttonTriggerUi = computed(() => ({
     </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"
+      v-else :open="open" :title="messages.datePicker" :description="messages.datePickerDescription"
+      :ui="adaptiveUi" @update:open="onUpdateOpen"
     >
       <template #content>
         <div v-bind="mobileContentProps">
@@ -793,4 +862,5 @@ const buttonTriggerUi = computed(() => ({
       </template>
     </Modal>
   </DatePickerRoot>
+  <input ref="formAnchor" type="hidden" :name="formName" :form="form" :value="nativeFormValue">
 </template>

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

@@ -1,18 +1,24 @@
 import type { DateValue } from '@internationalized/date';
 import type { DateRange } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { DatePickerThemeSlots } from '../theme/date-picker.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { Time } from '@internationalized/date';
 import { datePickerTheme } from '../theme/date-picker.js';
 type DatePickerVariants = VariantProps<typeof datePickerTheme>;
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface DatePickerProps {
     id?: string;
     name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
     /** A single DateValue, Reka's own `{ start?, end? }` DateRange shape when `range` is set, or a bare date-less Time when `timeOnly` is set - Vue props can't express a type that depends on a sibling prop's value, so this stays a plain union documented here rather than enforced by the type checker. */
     modelValue?: DateValue | DateRange | Time;
+    /** Initial uncontrolled value and native form-reset target. */
+    defaultValue?: DateValue | DateRange | Time;
     /** Switches to picking a start+end pair instead of one date - a real fork in which Reka primitive family renders (RangeCalendar/DateRangePicker vs Calendar/DatePicker), not just a different modelValue shape. */
     range?: boolean;
     /** Drops the date entirely - just a time-of-day picker. modelValue becomes a bare `Time` (no date component at all, not a DateValue). A third top-level mode alongside `range`; every date-grid-specific prop below (minValue/maxValue/isDateUnavailable/isDateDisabled/numberOfMonths/pagedNavigation/weekStartsOn/weekdayFormat/fixedWeeks/view) is simply inert here. `granularity` still applies ('hour'/'minute' only - defaults to 'minute' for a dedicated time picker). */
@@ -62,17 +68,18 @@ export interface DatePickerProps {
     invalid?: boolean;
     clearable?: boolean;
     /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     size?: DatePickerVariants['size'];
     /** Shows a small pointer triangle connecting the panel to its trigger. */
     arrow?: boolean;
-    /** Below 768px viewport width, presents the calendar as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
-    mobileModal?: boolean;
+    /** Opts into the calendar's accessible small-screen modal presentation. It is selected when the calendar opens and held until close. */
+    adaptive?: boolean;
     ui?: UiProp<DatePickerThemeSlots>;
 }
 export interface DatePickerEmits {
+    'update:open': [value: boolean];
     'update:modelValue': [value: DateValue | DateRange | Time | undefined];
     'update:view': [view: 'date' | 'month' | 'year'];
 }
@@ -92,17 +99,17 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_148: {}, __VLS_186: {}, __VLS_206: {}, __VLS_226: {}, __VLS_242: {}, __VLS_268: {}, __VLS_291: {}, __VLS_329: {}, __VLS_349: {}, __VLS_369: {}, __VLS_385: {}, __VLS_405: {
+}, __VLS_148: {}, __VLS_187: {}, __VLS_207: {}, __VLS_227: {}, __VLS_243: {}, __VLS_269: {}, __VLS_292: {}, __VLS_330: {}, __VLS_350: {}, __VLS_370: {}, __VLS_386: {}, __VLS_406: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_408: {}, __VLS_431: {
+}, __VLS_409: {}, __VLS_432: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_434: {};
+}, __VLS_435: {};
 type __VLS_Slots = {} & {
     'clear-icon'?: (props: typeof __VLS_43) => any;
 } & {
@@ -120,39 +127,41 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_148) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_186) => any;
+    'clear-icon'?: (props: typeof __VLS_187) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_206) => any;
+    'trigger-icon'?: (props: typeof __VLS_207) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_226) => any;
+    'trigger-icon'?: (props: typeof __VLS_227) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_242) => any;
+    'clear-icon'?: (props: typeof __VLS_243) => any;
 } & {
-    footer?: (props: typeof __VLS_268) => any;
+    footer?: (props: typeof __VLS_269) => any;
 } & {
-    footer?: (props: typeof __VLS_291) => any;
+    footer?: (props: typeof __VLS_292) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_329) => any;
+    'clear-icon'?: (props: typeof __VLS_330) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_349) => any;
+    'trigger-icon'?: (props: typeof __VLS_350) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_369) => any;
+    'trigger-icon'?: (props: typeof __VLS_370) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_385) => any;
+    'clear-icon'?: (props: typeof __VLS_386) => any;
 } & {
-    day?: (props: typeof __VLS_405) => any;
+    day?: (props: typeof __VLS_406) => any;
 } & {
-    footer?: (props: typeof __VLS_408) => any;
+    footer?: (props: typeof __VLS_409) => any;
 } & {
-    day?: (props: typeof __VLS_431) => any;
+    day?: (props: typeof __VLS_432) => any;
 } & {
-    footer?: (props: typeof __VLS_434) => any;
+    footer?: (props: typeof __VLS_435) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;
+    "update:open": (value: boolean) => any;
     "update:view": (view: "month" | "year" | "date") => any;
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: DateValue | DateRange | Time | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:view"?: ((view: "month" | "year" | "date") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -2,6 +2,8 @@ import type { DrawerThemeSlots } from '../theme/drawer.js';
 import type { UiProp } from '../utils/ui.js';
 export interface DrawerProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled drawer. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Which edge the panel slides in from - also the direction it's swiped toward to dismiss it. */