npm - @auronui/vue - Versions diffs - 1.0.20 → 1.0.22 - Mend

@auronui/vue 1.0.20 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (371) hide show

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

	@@ -1 +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 minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => 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 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 :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 :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\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 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=\"8\"\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":""}
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":""}

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

@@ -81,10 +81,48 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		},
 		locale: {},
 		defaultValue: {},
+		defaultPlaceholder: {},
+		placeholder: {},
 		minValue: {},
 		maxValue: {},
 		isDateUnavailable: {},
-		isDateDisabled: {}
+		isDateDisabled: {},
+		step: {},
+		dir: {},
+		id: {},
+		modal: { type: Boolean },
+		required: { type: Boolean },
+		pagedNavigation: { type: Boolean },
+		weekStartsOn: {},
+		weekdayFormat: {},
+		fixedWeeks: { type: Boolean },
+		numberOfMonths: {},
+		preventDeselect: { type: Boolean },
+		triggerAs: {},
+		triggerAsChild: { type: Boolean },
+		portal: {},
+		forceMount: { type: Boolean },
+		side: {},
+		sideOffset: {},
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		contentAs: {},
+		contentAsChild: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -94,9 +132,18 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		},
 		"openModifiers": {}
 	}),
-	emits: ["update:modelValue", "update:open"],
-	setup(__props) {
+	emits: /* @__PURE__ */ mergeModels([
+		"update:placeholder",
+		"escape-key-down",
+		"pointer-down-outside",
+		"focus-outside",
+		"interact-outside",
+		"open-auto-focus",
+		"close-auto-focus"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const modelValue = useModel(__props, "modelValue");
 		const openModel = useModel(__props, "open");
 		const STEP_TITLES = {
@@ -172,11 +219,13 @@ 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[2] || (_cache[2] = ($event) => modelValue.value = $event),
+				"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => modelValue.value = $event),
 				open: openModel.value,
-				"onUpdate:open": _cache[3] || (_cache[3] = ($event) => openModel.value = $event),
+				"onUpdate:open": _cache[9] || (_cache[9] = ($event) => openModel.value = $event),
 				"default-value": __props.defaultValue,
 				"default-open": __props.defaultOpen,
+				"default-placeholder": __props.defaultPlaceholder,
+				placeholder: __props.placeholder,
 				"min-value": __props.minValue,
 				"max-value": __props.maxValue,
 				"is-date-unavailable": __props.isDateUnavailable,
@@ -184,9 +233,20 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				locale: __props.locale,
 				granularity: __props.granularity,
 				"hour-cycle": __props.hourCycle,
+				step: __props.step,
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				name: __props.name,
+				dir: __props.dir,
+				id: __props.id,
+				required: __props.required,
+				modal: __props.modal,
+				"paged-navigation": __props.pagedNavigation,
+				"week-starts-on": __props.weekStartsOn,
+				"weekday-format": __props.weekdayFormat,
+				"fixed-weeks": __props.fixedWeeks,
+				"number-of-months": __props.numberOfMonths,
+				"prevent-deselect": __props.preventDeselect,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-time-picker"
 			}, {
@@ -214,6 +274,8 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				}, {
 					endContent: withCtx(() => [createVNode(unref(DatePickerTrigger), {
 						class: normalizeClass(unref(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
+						as: __props.triggerAs,
+						"as-child": __props.triggerAsChild,
 						"aria-label": "Open date time picker",
 						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
 					}, {
@@ -230,7 +292,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"stroke-linejoin": "round",
 							"aria-hidden": "true",
 							focusable: "false"
-						}, [..._cache[4] || (_cache[4] = [
+						}, [..._cache[10] || (_cache[10] = [
 							createElementVNode("rect", {
 								x: "3",
 								y: "4",
@@ -259,7 +321,11 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							}, null, -1)
 						])], 2))])]),
 						_: 3
-					}, 8, ["class"])]),
+					}, 8, [
+						"class",
+						"as",
+						"as-child"
+					])]),
 					_: 3
 				}, 8, [
 					"model-value",
@@ -284,7 +350,35 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				]), createVNode(unref(DatePickerContent), {
 					class: normalizeClass(unref(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
-					"side-offset": 8
+					"side-offset": __props.sideOffset ?? 8,
+					portal: __props.portal != null ? { to: __props.portal } : void 0,
+					"force-mount": __props.forceMount,
+					side: __props.side,
+					"side-flip": __props.sideFlip,
+					align: __props.align,
+					"align-offset": __props.alignOffset,
+					"align-flip": __props.alignFlip,
+					"avoid-collisions": __props.avoidCollisions,
+					"collision-boundary": __props.collisionBoundary,
+					"collision-padding": __props.collisionPadding,
+					"arrow-padding": __props.arrowPadding,
+					"hide-shifted-arrow": __props.hideShiftedArrow,
+					sticky: __props.sticky,
+					"hide-when-detached": __props.hideWhenDetached,
+					"position-strategy": __props.positionStrategy,
+					"update-position-strategy": __props.updatePositionStrategy,
+					"disable-update-on-layout-shift": __props.disableUpdateOnLayoutShift,
+					"prioritize-position": __props.prioritizePosition,
+					reference: __props.reference,
+					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))
 				}, {
 					default: withCtx(() => [createElementVNode("div", {
 						class: normalizeClass(unref(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
@@ -297,7 +391,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"aria-label": "Previous step",
 							"data-slot": "back-button",
 							onClick: goBack
-						}, [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
 							width: "14",
 							height: "14",
 							viewBox: "0 0 24 24",
@@ -318,7 +412,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						}, [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[6] || (_cache[6] = [createElementVNode("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2)
+						}, "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" }
@@ -377,13 +471,40 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 1
 					})], 2)]),
 					_: 1
-				}, 8, ["class"])]),
+				}, 8, [
+					"class",
+					"side-offset",
+					"portal",
+					"force-mount",
+					"side",
+					"side-flip",
+					"align",
+					"align-offset",
+					"align-flip",
+					"avoid-collisions",
+					"collision-boundary",
+					"collision-padding",
+					"arrow-padding",
+					"hide-shifted-arrow",
+					"sticky",
+					"hide-when-detached",
+					"position-strategy",
+					"update-position-strategy",
+					"disable-update-on-layout-shift",
+					"prioritize-position",
+					"reference",
+					"as",
+					"as-child",
+					"disable-outside-pointer-events"
+				])]),
 				_: 3
 			}, 8, [
 				"modelValue",
 				"open",
 				"default-value",
 				"default-open",
+				"default-placeholder",
+				"placeholder",
 				"min-value",
 				"max-value",
 				"is-date-unavailable",
@@ -391,9 +512,20 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"locale",
 				"granularity",
 				"hour-cycle",
+				"step",
 				"disabled",
 				"readonly",
 				"name",
+				"dir",
+				"id",
+				"required",
+				"modal",
+				"paged-navigation",
+				"week-starts-on",
+				"weekday-format",
+				"fixed-weeks",
+				"number-of-months",
+				"prevent-deselect",
 				"class"
 			]);
 		};

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

	@@ -1 +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 minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => 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 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 :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 :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\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 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=\"8\"\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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"}
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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"}

package/dist/components/drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, computed, h, toRef } from 'vue'\nimport { DialogRoot } from 'reka-ui'\nimport { useDrawerProvide } from './drawer.context'\nimport type { DrawerPlacement, DrawerSize } from './drawer.context'\n\n/*\n Drawer root component. Wraps Reka UI's DialogRoot.\n \n Uses Options API / render-function style to avoid Vue SFC compiled template\n * from forwarding `open: undefined` to DialogRoot — same pattern as Modal.vue.\n * Reka's `useVModel` checks `props.open === undefined` to choose uncontrolled\n * vs controlled mode.\n */\nexport default defineComponent({\n name: 'Drawer',\n props: {\n defaultOpen: { type: Boolean, default: false },\n open: { type: Boolean, default: undefined },\n modal: { type: Boolean, default: true },\n placement: {\n type: String as () => DrawerPlacement,\n default: 'right',\n },\n size: {\n type: String as () => DrawerSize,\n default: 'md',\n },\n },\n emits: ['update:open'],\n setup(props, { slots, emit }) {\n // Provide context to all Drawer sub-components\n useDrawerProvide({\n placement: toRef(props, 'placement'),\n size: toRef(props, 'size'),\n })\n\n const rootProps = computed(() => {\n const p: Record<string, unknown> = {\n defaultOpen: props.defaultOpen,\n modal: props.modal,\n 'onUpdate:open': (val: boolean) => emit('update:open', val),\n }\n // Only include `open` when explicitly controlled — omitting the key lets\n // Reka use `defaultOpen` for uncontrolled behavior.\n if (props.open !== undefined) {\n p.open = props.open\n }\n return p\n })\n\n return () => h(DialogRoot, rootProps.value, slots)\n },\n})\n</script>\n"],"mappings":""}
1	+ {"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, computed, h, toRef, ref } from 'vue'\nimport { DialogRoot } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { useDrawerProvide } from './drawer.context'\nimport type { DrawerPlacement, DrawerSize } from './drawer.context'\n\n/*\n Drawer root component. Wraps Reka UI's DialogRoot.\n \n Uses Options API / render-function style to avoid Vue SFC compiled template\n * from forwarding `open: undefined` to DialogRoot — same pattern as Modal.vue.\n * Reka's `useVModel` checks `props.open === undefined` to choose uncontrolled\n * vs controlled mode.\n \n When `dock=true` the component renders a flex container div and manages its\n * own open state without Reka, so the drawer panel shifts content in the DOM\n * rather than overlaying it.\n */\nexport default defineComponent({\n name: 'Drawer',\n props: {\n defaultOpen: { type: Boolean, default: false },\n open: { type: Boolean, default: undefined },\n modal: { type: Boolean, default: true },\n placement: {\n type: String as () => DrawerPlacement,\n default: 'right',\n },\n size: {\n type: String as () => DrawerSize,\n default: 'md',\n },\n inline: { type: Boolean, default: false },\n hideBackdrop: { type: Boolean, default: false },\n dock: { type: Boolean, default: false },\n },\n emits: ['update:open'],\n setup(props, { slots, emit }) {\n const styles = drawerVariants()\n\n // Dock mode: open state managed locally (no Reka dialog)\n const localPushOpen = ref(props.defaultOpen ?? false)\n const dockOpen = computed(() =>\n props.open !== undefined ? props.open : localPushOpen.value,\n )\n\n function toggleDock() {\n const next = !dockOpen.value\n if (props.open === undefined) localPushOpen.value = next\n emit('update:open', next)\n }\n\n function closeDock() {\n if (props.open === undefined) localPushOpen.value = false\n emit('update:open', false)\n }\n\n // Provide context to all Drawer sub-components\n useDrawerProvide({\n placement: toRef(props, 'placement'),\n size: toRef(props, 'size'),\n inline: toRef(props, 'inline'),\n hideBackdrop: toRef(props, 'hideBackdrop'),\n dock: toRef(props, 'dock'),\n dockOpen,\n toggleDock,\n closeDock,\n })\n\n const rootProps = computed(() => {\n const p: Record<string, unknown> = {\n defaultOpen: props.defaultOpen,\n // inline and hideBackdrop both require non-modal: no scroll lock, no focus trap\n modal: props.inline \|\| props.hideBackdrop ? false : props.modal,\n 'onUpdate:open': (val: boolean) => emit('update:open', val),\n }\n // Only include `open` when explicitly controlled — omitting the key lets\n // Reka use `defaultOpen` for uncontrolled behavior.\n if (props.open !== undefined) {\n p.open = props.open\n }\n return p\n })\n\n return () => {\n // Dock mode: render a flex container that shifts content\n if (props.dock) {\n return h(\n 'div',\n { class: styles.dockContainer({ placement: props.placement }) },\n slots.default?.(),\n )\n }\n return h(DialogRoot, rootProps.value, slots)\n }\n },\n})\n</script>\n"],"mappings":""}

package/dist/components/drawer/Drawer.vue_vue_type_script_lang.js CHANGED Viewed

@@ -1,5 +1,6 @@
+import { drawerVariants } from "../../packages/styles/src/components/drawer/drawer.styles.js";
 import { useDrawerProvide } from "./drawer.context.js";
-import { computed, defineComponent, h, toRef } from "vue";
+import { computed, defineComponent, h, ref, toRef } from "vue";
 import { DialogRoot } from "reka-ui";
 //#region src/components/drawer/Drawer.vue?vue&type=script&lang.ts
 /**
@@ -9,6 +10,10 @@ import { DialogRoot } from "reka-ui";
 * from forwarding `open: undefined` to DialogRoot — same pattern as Modal.vue.
 * Reka's `useVModel` checks `props.open === undefined` to choose uncontrolled
 * vs controlled mode.
+*
+* When `dock=true` the component renders a flex container div and manages its
+* own open state without Reka, so the drawer panel shifts content in the DOM
+* rather than overlaying it.
 */
 var Drawer_vue_vue_type_script_lang_default = defineComponent({
 	name: "Drawer",
@@ -32,24 +37,57 @@ var Drawer_vue_vue_type_script_lang_default = defineComponent({
 		size: {
 			type: String,
 			default: "md"
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		},
+		hideBackdrop: {
+			type: Boolean,
+			default: false
+		},
+		dock: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: ["update:open"],
 	setup(props, { slots, emit }) {
+		const styles = drawerVariants();
+		const localPushOpen = ref(props.defaultOpen ?? false);
+		const dockOpen = computed(() => props.open !== void 0 ? props.open : localPushOpen.value);
+		function toggleDock() {
+			const next = !dockOpen.value;
+			if (props.open === void 0) localPushOpen.value = next;
+			emit("update:open", next);
+		}
+		function closeDock() {
+			if (props.open === void 0) localPushOpen.value = false;
+			emit("update:open", false);
+		}
 		useDrawerProvide({
 			placement: toRef(props, "placement"),
-			size: toRef(props, "size")
+			size: toRef(props, "size"),
+			inline: toRef(props, "inline"),
+			hideBackdrop: toRef(props, "hideBackdrop"),
+			dock: toRef(props, "dock"),
+			dockOpen,
+			toggleDock,
+			closeDock
 		});
 		const rootProps = computed(() => {
 			const p = {
 				defaultOpen: props.defaultOpen,
-				modal: props.modal,
+				modal: props.inline || props.hideBackdrop ? false : props.modal,
 				"onUpdate:open": (val) => emit("update:open", val)
 			};
 			if (props.open !== void 0) p.open = props.open;
 			return p;
 		});
-		return () => h(DialogRoot, rootProps.value, slots);
+		return () => {
+			if (props.dock) return h("div", { class: styles.dockContainer({ placement: props.placement }) }, slots.default?.());
+			return h(DialogRoot, rootProps.value, slots);
+		};
 	}
 });
 //#endregion

package/dist/components/drawer/Drawer.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.vue_vue_type_script_lang.js","names":[],"sources":["../../../src/components/drawer/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, computed, h, toRef } from 'vue'\nimport { DialogRoot } from 'reka-ui'\nimport { useDrawerProvide } from './drawer.context'\nimport type { DrawerPlacement, DrawerSize } from './drawer.context'\n\n/*\n Drawer root component. Wraps Reka UI's DialogRoot.\n \n Uses Options API / render-function style to avoid Vue SFC compiled template\n * from forwarding `open: undefined` to DialogRoot — same pattern as Modal.vue.\n * Reka's `useVModel` checks `props.open === undefined` to choose uncontrolled\n * vs controlled mode.\n */\nexport default defineComponent({\n name: 'Drawer',\n props: {\n defaultOpen: { type: Boolean, default: false },\n open: { type: Boolean, default: undefined },\n modal: { type: Boolean, default: true },\n placement: {\n type: String as () => DrawerPlacement,\n default: 'right',\n },\n size: {\n type: String as () => DrawerSize,\n default: 'md',\n },\n },\n emits: ['update:open'],\n setup(props, { slots, emit }) {\n // Provide context to all Drawer sub-components\n useDrawerProvide({\n placement: toRef(props, 'placement'),\n size: toRef(props, 'size'),\n })\n\n const rootProps = computed(() => {\n const p: Record<string, unknown> = {\n defaultOpen: props.defaultOpen,\n modal: props.modal,\n 'onUpdate:open': (val: boolean) => emit('update:open', val),\n }\n // Only include `open` when explicitly controlled — omitting the key lets\n // Reka use `defaultOpen` for uncontrolled behavior.\n if (props.open !== undefined) {\n p.open = props.open\n }\n return p\n })\n\n return () => h(DialogRoot, rootProps.value, slots)\n },\n})\n</script>\n"],"mappings":"~~;;;;;;;;;;;;AAcA~~,IAAA,0CAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;EACL,aAAa;GAAE,MAAM;GAAS,SAAS;GAAO;EAC9C,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;GAAW;EAC3C,OAAO;GAAE,MAAM;GAAS,SAAS;GAAM;EACvC,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;~~EACF~~;CACD,OAAO,CAAC,cAAc;CACtB,MAAM,OAAO,EAAE,OAAO,QAAQ;~~AAE5B~~,mBAAiB;GACf,WAAW,MAAM,OAAO,YAAY;GACpC,MAAM,MAAM,OAAO,OAAO;~~GAC3B~~,CAAA;EAED,MAAM,YAAY,eAAe;GAC/B,MAAM,IAA6B;IACjC,aAAa,MAAM;~~IACnB~~,OAAO,MAAM;~~IACb~~,kBAAkB,QAAiB,KAAK,eAAe,IAAI;IAC7D;AAGA,OAAI,MAAM,SAAS,KAAA,EACjB,GAAE,OAAO,MAAM;AAEjB,UAAO;IACR;AAED,eAAa,EAAE,YAAY,UAAU,OAAO,MAAK~~;;CAEpD~~,CAAA"}
1	+ {"version":3,"file":"Drawer.vue_vue_type_script_lang.js","names":[],"sources":["../../../src/components/drawer/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, computed, h, toRef, ref } from 'vue'\nimport { DialogRoot } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { useDrawerProvide } from './drawer.context'\nimport type { DrawerPlacement, DrawerSize } from './drawer.context'\n\n/*\n Drawer root component. Wraps Reka UI's DialogRoot.\n \n Uses Options API / render-function style to avoid Vue SFC compiled template\n * from forwarding `open: undefined` to DialogRoot — same pattern as Modal.vue.\n * Reka's `useVModel` checks `props.open === undefined` to choose uncontrolled\n * vs controlled mode.\n \n When `dock=true` the component renders a flex container div and manages its\n * own open state without Reka, so the drawer panel shifts content in the DOM\n * rather than overlaying it.\n */\nexport default defineComponent({\n name: 'Drawer',\n props: {\n defaultOpen: { type: Boolean, default: false },\n open: { type: Boolean, default: undefined },\n modal: { type: Boolean, default: true },\n placement: {\n type: String as () => DrawerPlacement,\n default: 'right',\n },\n size: {\n type: String as () => DrawerSize,\n default: 'md',\n },\n inline: { type: Boolean, default: false },\n hideBackdrop: { type: Boolean, default: false },\n dock: { type: Boolean, default: false },\n },\n emits: ['update:open'],\n setup(props, { slots, emit }) {\n const styles = drawerVariants()\n\n // Dock mode: open state managed locally (no Reka dialog)\n const localPushOpen = ref(props.defaultOpen ?? false)\n const dockOpen = computed(() =>\n props.open !== undefined ? props.open : localPushOpen.value,\n )\n\n function toggleDock() {\n const next = !dockOpen.value\n if (props.open === undefined) localPushOpen.value = next\n emit('update:open', next)\n }\n\n function closeDock() {\n if (props.open === undefined) localPushOpen.value = false\n emit('update:open', false)\n }\n\n // Provide context to all Drawer sub-components\n useDrawerProvide({\n placement: toRef(props, 'placement'),\n size: toRef(props, 'size'),\n inline: toRef(props, 'inline'),\n hideBackdrop: toRef(props, 'hideBackdrop'),\n dock: toRef(props, 'dock'),\n dockOpen,\n toggleDock,\n closeDock,\n })\n\n const rootProps = computed(() => {\n const p: Record<string, unknown> = {\n defaultOpen: props.defaultOpen,\n // inline and hideBackdrop both require non-modal: no scroll lock, no focus trap\n modal: props.inline \|\| props.hideBackdrop ? false : props.modal,\n 'onUpdate:open': (val: boolean) => emit('update:open', val),\n }\n // Only include `open` when explicitly controlled — omitting the key lets\n // Reka use `defaultOpen` for uncontrolled behavior.\n if (props.open !== undefined) {\n p.open = props.open\n }\n return p\n })\n\n return () => {\n // Dock mode: render a flex container that shifts content\n if (props.dock) {\n return h(\n 'div',\n { class: styles.dockContainer({ placement: props.placement }) },\n slots.default?.(),\n )\n }\n return h(DialogRoot, rootProps.value, slots)\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAA,0CAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;EACL,aAAa;GAAE,MAAM;GAAS,SAAS;GAAO;EAC9C,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;GAAW;EAC3C,OAAO;GAAE,MAAM;GAAS,SAAS;GAAM;EACvC,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,cAAc;GAAE,MAAM;GAAS,SAAS;GAAO;EAC/C,MAAM;GAAE,MAAM;GAAS,SAAS;GAAO;EACxC;CACD,OAAO,CAAC,cAAc;CACtB,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,SAAS,gBAAe;EAG9B,MAAM,gBAAgB,IAAI,MAAM,eAAe,MAAK;EACpD,MAAM,WAAW,eACf,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,cAAc,MACxD;EAEA,SAAS,aAAa;GACpB,MAAM,OAAO,CAAC,SAAS;AACvB,OAAI,MAAM,SAAS,KAAA,EAAW,eAAc,QAAQ;AACpD,QAAK,eAAe,KAAI;;EAG1B,SAAS,YAAY;AACnB,OAAI,MAAM,SAAS,KAAA,EAAW,eAAc,QAAQ;AACpD,QAAK,eAAe,MAAK;;AAI3B,mBAAiB;GACf,WAAW,MAAM,OAAO,YAAY;GACpC,MAAM,MAAM,OAAO,OAAO;GAC1B,QAAQ,MAAM,OAAO,SAAS;GAC9B,cAAc,MAAM,OAAO,eAAe;GAC1C,MAAM,MAAM,OAAO,OAAO;GAC1B;GACA;GACA;GACD,CAAA;EAED,MAAM,YAAY,eAAe;GAC/B,MAAM,IAA6B;IACjC,aAAa,MAAM;IAEnB,OAAO,MAAM,UAAU,MAAM,eAAe,QAAQ,MAAM;IAC1D,kBAAkB,QAAiB,KAAK,eAAe,IAAI;IAC7D;AAGA,OAAI,MAAM,SAAS,KAAA,EACjB,GAAE,OAAO,MAAM;AAEjB,UAAO;IACR;AAED,eAAa;AAEX,OAAI,MAAM,KACR,QAAO,EACL,OACA,EAAE,OAAO,OAAO,cAAc,EAAE,WAAW,MAAM,WAAW,CAAA,EAAG,EAC/D,MAAM,WAAW,CACnB;AAEF,UAAO,EAAE,YAAY,UAAU,OAAO,MAAK;;;CAGhD,CAAA"}

package/dist/components/drawer/DrawerClose.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n asChild?: boolean\n class?: string\n}>(), {\n asChild: false,\n})\n\nconst styles = drawerVariants()\n</script>\n\n<template>\n <DialogClose\n :as-child=\"props.asChild\"\n :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n >\n <slot />\n </DialogClose>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose, Primitive } from 'reka-ui'\nimport { drawerVariants } from '@auronui/styles/components/drawer'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useDrawerInject } from './drawer.context'\n\nconst props = withDefaults(defineProps<{\n as?: string\n asChild?: boolean\n class?: string\n}>(), {\n asChild: false,\n})\n\nconst ctx = useDrawerInject()\nconst styles = drawerVariants()\n</script>\n\n<template>\n <!-- dock mode: close open state directly (no Reka dialog context) -->\n <Primitive\n v-if=\"ctx.dock.value\"\n :as-child=\"props.asChild\"\n :as=\"props.as ?? 'button'\"\n :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n @click=\"ctx.closeDock()\"\n >\n <slot />\n </Primitive>\n\n <!-- default / inline / hideBackdrop modes: Reka manages close -->\n <DialogClose\n v-else\n :as=\"props.as\"\n :as-child=\"props.asChild\"\n :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n >\n <slot />\n </DialogClose>\n</template>\n"],"mappings":""}