@auronui/vue 1.0.22 → 1.0.23

package/dist/components/date-time-picker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    stepHeader: ClassValue\n    navButton: ClassValue\n    stepTitle: ClassValue\n    doneLabel: ClassValue\n    panelWrap: ClassValue\n  }>\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  /** Initial placeholder date for the calendar. */\n  defaultPlaceholder?: DateValue\n  /** Controlled placeholder date. */\n  placeholder?: DateValue\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root element. */\n  id?: string\n  /** Whether the calendar popover is modal (traps focus). */\n  modal?: boolean\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation in the calendar. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder=\"placeholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :modal=\"modal\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <!-- Step header -->\n      <div\n        :class=\"composeClassName(slotFns.stepHeader(), props.classNames?.stepHeader)\"\n        data-slot=\"step-header\"\n      >\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </button>\n\n        <span :class=\"composeClassName(slotFns.stepTitle(), props.classNames?.stepTitle)\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span\n            v-if=\"activeStep === 'time'\"\n            :class=\"composeClassName(slotFns.doneLabel(), props.classNames?.doneLabel)\"\n          >Done</span>\n          <svg\n            v-else\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div\n        :class=\"composeClassName(slotFns.panelWrap(), props.classNames?.panelWrap)\"\n        style=\"overflow: hidden;\"\n      >\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\nimport Button from '../button/Button.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    panel: ClassValue\n    divider: ClassValue\n  }>\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  /** Label for the footer button that closes the picker. */\n  doneLabel?: string\n  locale?: string\n  defaultValue?: CalendarDateTime\n  /** Initial placeholder date for the calendar. */\n  defaultPlaceholder?: DateValue\n  /** Controlled placeholder date. */\n  placeholder?: DateValue\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root element. */\n  id?: string\n  /** Whether the calendar popover is modal (traps focus). */\n  modal?: boolean\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation in the calendar. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n  doneLabel: 'Done',\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder=\"placeholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :modal=\"modal\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <div\n        :class=\"composeClassName(slotFns.panel(), props.classNames?.panel)\"\n        data-slot=\"panel\"\n      >\n        <!-- Wrapper keeps Calendar's multiple view roots (date grid, month\n             picker, year picker) as ONE flex child. Without it, the panel's\n             flex layout spreads those sibling roots into separate columns and\n             the inactive (empty) root shows as a blank box. -->\n        <div\n          :class=\"slotFns.calendarPane()\"\n          data-slot=\"calendar-pane\"\n        >\n          <Calendar\n            v-model=\"calendarValue\"\n            :default-value=\"defaultValue\"\n            :min-value=\"minValue\"\n            :max-value=\"maxValue\"\n            :is-date-disabled=\"isDateDisabled\"\n            :is-date-unavailable=\"isDateUnavailable\"\n            :locale=\"locale\"\n            :readonly=\"isReadOnly\"\n            :disabled=\"isDisabled\"\n          />\n        </div>\n\n        <div\n          :class=\"composeClassName(slotFns.divider(), props.classNames?.divider)\"\n          data-slot=\"divider\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- Time column: wheels on top, Done button pinned to the bottom so it\n             lines up with the calendar's bottom edge. Selection is already live,\n             so Done just closes the popover for users who miss click-outside. -->\n        <div\n          :class=\"slotFns.timePane()\"\n          data-slot=\"time-pane\"\n        >\n          <DateTimePickerTimeScroller\n            :model-value=\"internalValue\"\n            :granularity=\"granularity\"\n            :hour-cycle=\"hourCycle\"\n            @update:model-value=\"onTimeUpdate\"\n          />\n\n          <div\n            :class=\"slotFns.timeDone()\"\n            data-slot=\"time-done\"\n          >\n            <slot name=\"footer\" :close=\"() => { openModel = false }\">\n              <Button\n                size=\"sm\"\n                color=\"primary\"\n                data-slot=\"done-button\"\n                @click=\"openModel = false\"\n              >\n                {{ doneLabel }}\n              </Button>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,15 @@
 import { composeClassName } from "../../utils/composeClassName.js";
-import { motion } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/motion/index.js";
-import { AnimatePresence_default } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/animate-presence/AnimatePresence.js";
+import Button_default from "../button/Button.js";
 import { $ad063034c8620db8$export$aa8b41735afcabd2, $ad063034c8620db8$export$d0bdf45af03a6ea3 } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/queries.js";
 import { $d07e34cce18680fd$export$93522d1a439f3617 } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/conversion.js";
 import { $2aaf608024c21ca1$export$ca871e8dbb80966f } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/CalendarDate.js";
 import Calendar_default from "../calendar/Calendar.js";
 import DateInput_default from "../date-input/DateInput.js";
 import DateTimePickerTimeScroller_default from "./DateTimePickerTimeScroller.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
 import { dateTimePickerVariants } from "@auronui/styles";
 import { DatePickerContent, DatePickerRoot, DatePickerTrigger } from "reka-ui";
 //#region src/components/date-time-picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-hidden"];
-var _hoisted_2 = ["aria-label"];
-var _hoisted_3 = {
-	key: 1,
-	width: "14",
-	height: "14",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	"stroke-width": "2.5",
-	"stroke-linecap": "round",
-	"stroke-linejoin": "round",
-	"aria-hidden": "true"
-};
 var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "DateTimePicker",
@@ -79,6 +64,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: true
 		},
+		doneLabel: { default: "Done" },
 		locale: {},
 		defaultValue: {},
 		defaultPlaceholder: {},
@@ -146,11 +132,6 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const emit = __emit;
 		const modelValue = useModel(__props, "modelValue");
 		const openModel = useModel(__props, "open");
-		const STEP_TITLES = {
-			date: "Pick a date",
-			time: "Pick a time"
-		};
-		const STEP_ORDER = ["date", "time"];
 		if (props.defaultOpen && openModel.value === void 0) openModel.value = true;
 		if (modelValue.value == null && props.defaultValue != null) modelValue.value = props.defaultValue;
 		const _today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
@@ -163,37 +144,6 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			internalValue.value = v;
 			modelValue.value = v;
 		}
-		const activeStep = ref("date");
-		const direction = ref(1);
-		watch(openModel, (open) => {
-			if (open) activeStep.value = "date";
-		});
-		function goTo(step) {
-			const from = STEP_ORDER.indexOf(activeStep.value);
-			direction.value = STEP_ORDER.indexOf(step) > from ? 1 : -1;
-			activeStep.value = step;
-		}
-		function goBack() {
-			const idx = STEP_ORDER.indexOf(activeStep.value);
-			if (idx > 0) goTo(STEP_ORDER[idx - 1]);
-		}
-		function goForward() {
-			const idx = STEP_ORDER.indexOf(activeStep.value);
-			if (idx < STEP_ORDER.length - 1) goTo(STEP_ORDER[idx + 1]);
-			else if (props.closeOnSelect) openModel.value = false;
-		}
-		const panelInitial = computed(() => ({
-			x: direction.value > 0 ? "100%" : "-100%",
-			opacity: 0
-		}));
-		const panelAnimate = {
-			x: "0%",
-			opacity: 1
-		};
-		const panelExit = computed(() => ({
-			x: direction.value > 0 ? "-100%" : "100%",
-			opacity: 0
-		}));
 		const calendarValue = computed({
 			get: () => $d07e34cce18680fd$export$93522d1a439f3617(internalValue.value),
 			set: (val) => {
@@ -204,7 +154,6 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					day: val.day
 				});
 				modelValue.value = internalValue.value;
-				goTo("time");
 			}
 		});
 		function onTimeUpdate(val) {
@@ -219,9 +168,9 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DatePickerRoot), {
 				modelValue: modelValue.value,
-				"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => modelValue.value = $event),
+				"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => modelValue.value = $event),
 				open: openModel.value,
-				"onUpdate:open": _cache[9] || (_cache[9] = ($event) => openModel.value = $event),
+				"onUpdate:open": _cache[10] || (_cache[10] = ($event) => openModel.value = $event),
 				"default-value": __props.defaultValue,
 				"default-open": __props.defaultOpen,
 				"default-placeholder": __props.defaultPlaceholder,
@@ -292,7 +241,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"stroke-linejoin": "round",
 							"aria-hidden": "true",
 							focusable: "false"
-						}, [..._cache[10] || (_cache[10] = [
+						}, [..._cache[11] || (_cache[11] = [
 							createElementVNode("rect", {
 								x: "3",
 								y: "4",
@@ -373,104 +322,75 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					as: __props.contentAs,
 					"as-child": __props.contentAsChild,
 					"disable-outside-pointer-events": __props.disableOutsidePointerEvents,
-					onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emit("escape-key-down", $event)),
-					onPointerDownOutside: _cache[3] || (_cache[3] = ($event) => emit("pointer-down-outside", $event)),
-					onFocusOutside: _cache[4] || (_cache[4] = ($event) => emit("focus-outside", $event)),
-					onInteractOutside: _cache[5] || (_cache[5] = ($event) => emit("interact-outside", $event)),
-					onOpenAutoFocus: _cache[6] || (_cache[6] = ($event) => emit("open-auto-focus", $event)),
-					onCloseAutoFocus: _cache[7] || (_cache[7] = ($event) => emit("close-auto-focus", $event))
+					onEscapeKeyDown: _cache[3] || (_cache[3] = ($event) => emit("escape-key-down", $event)),
+					onPointerDownOutside: _cache[4] || (_cache[4] = ($event) => emit("pointer-down-outside", $event)),
+					onFocusOutside: _cache[5] || (_cache[5] = ($event) => emit("focus-outside", $event)),
+					onInteractOutside: _cache[6] || (_cache[6] = ($event) => emit("interact-outside", $event)),
+					onOpenAutoFocus: _cache[7] || (_cache[7] = ($event) => emit("open-auto-focus", $event)),
+					onCloseAutoFocus: _cache[8] || (_cache[8] = ($event) => emit("close-auto-focus", $event))
 				}, {
 					default: withCtx(() => [createElementVNode("div", {
-						class: normalizeClass(unref(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
-						"data-slot": "step-header"
+						class: normalizeClass(unref(composeClassName)(slotFns.value.panel(), props.classNames?.panel)),
+						"data-slot": "panel"
 					}, [
-						createElementVNode("button", {
-							type: "button",
-							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
-							"data-hidden": activeStep.value === "date" ? "true" : void 0,
-							"aria-label": "Previous step",
-							"data-slot": "back-button",
-							onClick: goBack
-						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
-							width: "14",
-							height: "14",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
+						createElementVNode("div", {
+							class: normalizeClass(slotFns.value.calendarPane()),
+							"data-slot": "calendar-pane"
+						}, [createVNode(Calendar_default, {
+							modelValue: calendarValue.value,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
+							"default-value": __props.defaultValue,
+							"min-value": __props.minValue,
+							"max-value": __props.maxValue,
+							"is-date-disabled": __props.isDateDisabled,
+							"is-date-unavailable": __props.isDateUnavailable,
+							locale: __props.locale,
+							readonly: __props.isReadOnly,
+							disabled: __props.isDisabled
+						}, null, 8, [
+							"modelValue",
+							"default-value",
+							"min-value",
+							"max-value",
+							"is-date-disabled",
+							"is-date-unavailable",
+							"locale",
+							"readonly",
+							"disabled"
+						])], 2),
+						createElementVNode("div", {
+							class: normalizeClass(unref(composeClassName)(slotFns.value.divider(), props.classNames?.divider)),
+							"data-slot": "divider",
 							"aria-hidden": "true"
-						}, [createElementVNode("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1),
-						createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.stepTitle(), props.classNames?.stepTitle)) }, toDisplayString(STEP_TITLES[activeStep.value]), 3),
-						createElementVNode("button", {
-							type: "button",
-							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
-							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
-							"data-slot": "forward-button",
-							onClick: goForward
-						}, [activeStep.value === "time" ? (openBlock(), createElementBlock("span", {
-							key: 0,
-							class: normalizeClass(unref(composeClassName)(slotFns.value.doneLabel(), props.classNames?.doneLabel))
-						}, "Done", 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[12] || (_cache[12] = [createElementVNode("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2)
-					], 2), createElementVNode("div", {
-						class: normalizeClass(unref(composeClassName)(slotFns.value.panelWrap(), props.classNames?.panelWrap)),
-						style: { "overflow": "hidden" }
-					}, [createVNode(unref(AnimatePresence_default), { mode: "popLayout" }, {
-						default: withCtx(() => [activeStep.value === "date" ? (openBlock(), createBlock(unref(motion).div, {
-							key: "date",
-							initial: panelInitial.value,
-							animate: panelAnimate,
-							exit: panelExit.value,
-							transition: { duration: .15 },
-							class: "px-3 pb-3",
-							"data-slot": "calendar-panel"
-						}, {
-							default: withCtx(() => [createVNode(Calendar_default, {
-								modelValue: calendarValue.value,
-								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
-								"default-value": __props.defaultValue,
-								"min-value": __props.minValue,
-								"max-value": __props.maxValue,
-								"is-date-disabled": __props.isDateDisabled,
-								"is-date-unavailable": __props.isDateUnavailable,
-								locale: __props.locale,
-								readonly: __props.isReadOnly,
-								disabled: __props.isDisabled
-							}, null, 8, [
-								"modelValue",
-								"default-value",
-								"min-value",
-								"max-value",
-								"is-date-disabled",
-								"is-date-unavailable",
-								"locale",
-								"readonly",
-								"disabled"
-							])]),
-							_: 1
-						}, 8, ["initial", "exit"])) : activeStep.value === "time" ? (openBlock(), createBlock(unref(motion).div, {
-							key: "time",
-							initial: panelInitial.value,
-							animate: panelAnimate,
-							exit: panelExit.value,
-							transition: { duration: .15 }
+						}, null, 2),
+						createElementVNode("div", {
+							class: normalizeClass(slotFns.value.timePane()),
+							"data-slot": "time-pane"
+						}, [createVNode(DateTimePickerTimeScroller_default, {
+							"model-value": internalValue.value,
+							granularity: __props.granularity,
+							"hour-cycle": __props.hourCycle,
+							"onUpdate:modelValue": onTimeUpdate
+						}, null, 8, [
+							"model-value",
+							"granularity",
+							"hour-cycle"
+						]), createElementVNode("div", {
+							class: normalizeClass(slotFns.value.timeDone()),
+							"data-slot": "time-done"
+						}, [renderSlot(_ctx.$slots, "footer", { close: () => {
+							openModel.value = false;
+						} }, () => [createVNode(Button_default, {
+							size: "sm",
+							color: "primary",
+							"data-slot": "done-button",
+							onClick: _cache[2] || (_cache[2] = ($event) => openModel.value = false)
 						}, {
-							default: withCtx(() => [createVNode(DateTimePickerTimeScroller_default, {
-								"model-value": internalValue.value,
-								granularity: __props.granularity,
-								"hour-cycle": __props.hourCycle,
-								"onUpdate:modelValue": onTimeUpdate
-							}, null, 8, [
-								"model-value",
-								"granularity",
-								"hour-cycle"
-							])]),
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.doneLabel), 1)]),
 							_: 1
-						}, 8, ["initial", "exit"])) : createCommentVNode("", true)]),
-						_: 1
-					})], 2)]),
-					_: 1
+						})])], 2)], 2)
+					], 2)]),
+					_: 3
 				}, 8, [
 					"class",
 					"side-offset",

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    stepHeader: ClassValue\n    navButton: ClassValue\n    stepTitle: ClassValue\n    doneLabel: ClassValue\n    panelWrap: ClassValue\n  }>\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  /** Initial placeholder date for the calendar. */\n  defaultPlaceholder?: DateValue\n  /** Controlled placeholder date. */\n  placeholder?: DateValue\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root element. */\n  id?: string\n  /** Whether the calendar popover is modal (traps focus). */\n  modal?: boolean\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation in the calendar. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder=\"placeholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :modal=\"modal\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <!-- Step header -->\n      <div\n        :class=\"composeClassName(slotFns.stepHeader(), props.classNames?.stepHeader)\"\n        data-slot=\"step-header\"\n      >\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </button>\n\n        <span :class=\"composeClassName(slotFns.stepTitle(), props.classNames?.stepTitle)\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span\n            v-if=\"activeStep === 'time'\"\n            :class=\"composeClassName(slotFns.doneLabel(), props.classNames?.doneLabel)\"\n          >Done</span>\n          <svg\n            v-else\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div\n        :class=\"composeClassName(slotFns.panelWrap(), props.classNames?.panelWrap)\"\n        style=\"overflow: hidden;\"\n      >\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\nimport Button from '../button/Button.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    panel: ClassValue\n    divider: ClassValue\n  }>\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  /** Label for the footer button that closes the picker. */\n  doneLabel?: string\n  locale?: string\n  defaultValue?: CalendarDateTime\n  /** Initial placeholder date for the calendar. */\n  defaultPlaceholder?: DateValue\n  /** Controlled placeholder date. */\n  placeholder?: DateValue\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root element. */\n  id?: string\n  /** Whether the calendar popover is modal (traps focus). */\n  modal?: boolean\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation in the calendar. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n  doneLabel: 'Done',\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder=\"placeholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :modal=\"modal\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <div\n        :class=\"composeClassName(slotFns.panel(), props.classNames?.panel)\"\n        data-slot=\"panel\"\n      >\n        <!-- Wrapper keeps Calendar's multiple view roots (date grid, month\n             picker, year picker) as ONE flex child. Without it, the panel's\n             flex layout spreads those sibling roots into separate columns and\n             the inactive (empty) root shows as a blank box. -->\n        <div\n          :class=\"slotFns.calendarPane()\"\n          data-slot=\"calendar-pane\"\n        >\n          <Calendar\n            v-model=\"calendarValue\"\n            :default-value=\"defaultValue\"\n            :min-value=\"minValue\"\n            :max-value=\"maxValue\"\n            :is-date-disabled=\"isDateDisabled\"\n            :is-date-unavailable=\"isDateUnavailable\"\n            :locale=\"locale\"\n            :readonly=\"isReadOnly\"\n            :disabled=\"isDisabled\"\n          />\n        </div>\n\n        <div\n          :class=\"composeClassName(slotFns.divider(), props.classNames?.divider)\"\n          data-slot=\"divider\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- Time column: wheels on top, Done button pinned to the bottom so it\n             lines up with the calendar's bottom edge. Selection is already live,\n             so Done just closes the popover for users who miss click-outside. -->\n        <div\n          :class=\"slotFns.timePane()\"\n          data-slot=\"time-pane\"\n        >\n          <DateTimePickerTimeScroller\n            :model-value=\"internalValue\"\n            :granularity=\"granularity\"\n            :hour-cycle=\"hourCycle\"\n            @update:model-value=\"onTimeUpdate\"\n          />\n\n          <div\n            :class=\"slotFns.timeDone()\"\n            data-slot=\"time-done\"\n          >\n            <slot name=\"footer\" :close=\"() => { openModel = false }\">\n              <Button\n                size=\"sm\"\n                color=\"primary\"\n                data-slot=\"done-button\"\n                @click=\"openModel = false\"\n              >\n                {{ doneLabel }}\n              </Button>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/date-time-picker/DateTimePickerTimeScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePickerTimeScroller.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\nconst columns = computed(() => {\n  const cols: Array<{ key: string; items: (number | string)[] }> = [\n    { key: 'hour', items: hourItems.value },\n    { key: 'minute', items: minutes },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds })\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm })\n  return cols\n})\n\n// ─── Current index computation ───────────────────────────────────────────\n\nfunction currentIndexFor(key: string): number {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return hours12.indexOf(h12)\n    }\n    return v.hour\n  }\n  if (key === 'minute') return v.minute\n  if (key === 'second') return v.second ?? 0\n  if (key === 'ampm') return v.hour >= 12 ? 1 : 0\n  return 0\n}\n\n// ─── Scroll-to-selected ──────────────────────────────────────────────────\n\nconst columnRefs = ref<HTMLElement[]>([])\n\nconst ITEM_H = 40 // 2.5rem at 16px base\n\nfunction scrollColumnToIndex(colEl: HTMLElement, index: number) {\n  colEl.scrollTop = index * ITEM_H\n}\n\nfunction syncScrollPositions() {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el) scrollColumnToIndex(el, currentIndexFor(col.key))\n  })\n}\n\nonMounted(() => nextTick(syncScrollPositions))\nwatch(() => props.modelValue, () => nextTick(syncScrollPositions))\n\n// ─── Scroll → value update ───────────────────────────────────────────────\n\nfunction onColumnScroll(key: string, colEl: HTMLElement) {\n  const idx = Math.round(colEl.scrollTop / ITEM_H)\n  const col = columns.value.find(c => c.key === key)!\n  const item = col.items[idx]\n  if (item === undefined) return\n\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Keyboard navigation ─────────────────────────────────────────────────\n\nfunction onKeyDown(e: KeyboardEvent, colEl: HTMLElement) {\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    colEl.scrollTop += ITEM_H\n  } else if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    colEl.scrollTop -= ITEM_H\n  }\n}\n\n// ─── Click-to-select ─────────────────────────────────────────────────────\n\nfunction onItemClick(colEl: HTMLElement, idx: number) {\n  colEl.scrollTo({ top: idx * ITEM_H, behavior: 'smooth' })\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(_key: string, item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns, currentIndexFor })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(col.key, ($event.currentTarget as HTMLElement))\"\n      @keydown=\"onKeyDown($event, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in col.items\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"idx === currentIndexFor(col.key) ? 'true' : undefined\"\n        :aria-selected=\"idx === currentIndexFor(col.key)\"\n        role=\"option\"\n        @click=\"onItemClick(columnRefs[i]!, idx)\"\n      >\n        {{ itemLabel(col.key, item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DateTimePickerTimeScroller.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\ntype Column = { key: string; items: (number | string)[]; loop: boolean }\n\nconst columns = computed<Column[]>(() => {\n  const cols: Column[] = [\n    { key: 'hour', items: hourItems.value, loop: true },\n    { key: 'minute', items: minutes, loop: true },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds, loop: true })\n  // AM/PM is a short, finite column — it does not loop.\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm, loop: false })\n  return cols\n})\n\n// ─── Infinite circular scroll ─────────────────────────────────────────────\n// Numeric columns repeat their list REPEAT times and start in the middle copy.\n// On scroll, whenever the position drifts out of the middle band we jump it\n// back by whole cycles — invisible because the content is identical — so the\n// wheel can be dragged endlessly in either direction.\n\n// Three copies is the minimum for a seamless loop: a buffer copy at each end\n// plus the middle copy the user actually sits in. More copies = needless DOM.\nconst REPEAT = 3\nconst ITEM_H = 40 // 2.5rem at 16px base\nconst columnRefs = ref<HTMLElement[]>([])\n\nfunction renderItems(col: Column): (number | string)[] {\n  if (!col.loop) return col.items\n  const out: (number | string)[] = []\n  for (let r = 0; r < REPEAT; r++) out.push(...col.items)\n  return out\n}\n\nfunction cycleHeight(col: Column): number {\n  return col.items.length * ITEM_H\n}\n\n// Keep the scroll position inside the inner copies [cycle, total-cycle); when it\n// drifts into the first or last buffer copy, jump it by (REPEAT-2) cycles. The\n// content is identical, so the jump is invisible and the wheel feels endless.\nfunction onColumnScroll(i: number, colEl: HTMLElement) {\n  const col = columns.value[i]\n  if (!col.loop) return\n  const cycle = cycleHeight(col)\n  const total = cycle * REPEAT\n  const recenter = (REPEAT - 2) * cycle\n  if (colEl.scrollTop < cycle) {\n    colEl.scrollTop += recenter\n  } else if (colEl.scrollTop >= total - cycle) {\n    colEl.scrollTop -= recenter\n  }\n}\n\nonMounted(() => {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el && col.loop) el.scrollTop = cycleHeight(col) * Math.floor(REPEAT / 2)\n  })\n})\n\n// ─── Selection (tap to select) ─────────────────────────────────────────────\n// Selection is by VALUE, so every repeated copy of the chosen number highlights.\n\nfunction isSelected(key: string, item: number | string): boolean {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return item === h12\n    }\n    return item === v.hour\n  }\n  if (key === 'minute') return item === v.minute\n  if (key === 'second') return item === (v.second ?? 0)\n  if (key === 'ampm') return item === (v.hour >= 12 ? 'PM' : 'AM')\n  return false\n}\n\nfunction onItemClick(key: string, item: number | string) {\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(i, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in renderItems(col)\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"isSelected(col.key, item) ? 'true' : undefined\"\n        :aria-selected=\"isSelected(col.key, item)\"\n        role=\"option\"\n        @click=\"onItemClick(col.key, item)\"\n      >\n        {{ itemLabel(item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}