@auronui/vue 1.2.2 → 1.4.0

package/dist/components/time-field/TimeField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  defaultPlaceholder?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Enable step snapping behavior. */\n  stepSnapping?: boolean\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n  /** Marks the field as required for form submission. */\n  required?: boolean\n  /** Text direction for the field. */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element or component. */\n  as?: string\n  /** Render root child as root element. */\n  asChild?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadOnly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadOnly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :step-snapping=\"stepSnapping\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :required=\"required\"\n        :dir=\"dir\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n          role=\"alert\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TimeField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  defaultPlaceholder?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  /** Enable step snapping behavior. */\n  stepSnapping?: boolean\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n  /** Marks the field as required for form submission. */\n  required?: boolean\n  /** Text direction for the field. */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element or component. */\n  as?: string\n  /** Render root child as root element. */\n  asChild?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\n\nconst isFilled = computed(() => modelValue.value != null)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  showInsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => fieldId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => props.isReadOnly,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadOnly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :step-snapping=\"stepSnapping\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :required=\"required\"\n        :dir=\"dir\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <FieldLabel\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :label=\"label\"\n            :is-required=\"isRequired\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          />\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        error-role=\"alert\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/time-picker/TimePicker.js

@@ -0,0 +1,7 @@
+import TimePicker_vue_vue_type_script_setup_true_lang_default from "./TimePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/time-picker/TimePicker.vue
+var TimePicker_default = TimePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimePicker_default as default };
+
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/time-picker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../../src/components/time-picker/TimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue'\nimport { Time, getLocalTimeZone, now as internationalizedNow } from '@internationalized/date'\nimport { timePickerVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport TimeField from '../time-field/TimeField.vue'\nimport TimeScroller from '../_shared/TimeScroller.vue'\nimport Popover from '../popover/Popover.vue'\nimport PopoverTrigger from '../popover/PopoverTrigger.vue'\nimport PopoverContent from '../popover/PopoverContent.vue'\nimport Button from '../button/Button.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to TimeField */\n  variant?: TimeFieldVariants['variant']\n  size?: TimeFieldVariants['size']\n  color?: TimeFieldVariants['color']\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: Time\n  defaultOpen?: boolean\n  defaultPlaceholder?: Time\n  placeholderValue?: Time\n  minValue?: Time\n  maxValue?: Time\n  locale?: string\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  stepSnapping?: 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  hideTimeZone?: boolean\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Label for the footer button that closes the picker. */\n  doneLabel?: string\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  required?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  sideOffset?: number\n  sideFlip?: boolean\n  align?: 'start' | 'center' | 'end'\n  alignOffset?: number\n  alignFlip?: boolean\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | null | Array<Element | null>\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  arrowPadding?: number\n  hideShiftedArrow?: boolean\n  sticky?: 'partial' | 'always'\n  hideWhenDetached?: boolean\n  positionStrategy?: 'fixed' | 'absolute'\n  updatePositionStrategy?: 'always' | 'optimized'\n  disableUpdateOnLayoutShift?: boolean\n  prioritizePosition?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover, panel, timeDone) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    panel: ClassValue\n    timeDone: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\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  hourCycle: 24,\n  defaultOpen: false,\n  closeOnSelect: true,\n  modal: false,\n  doneLabel: 'Done',\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst modelValue = defineModel<Time | null | undefined>()\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// Internal working value — always a Time, never null/undefined, so both the\n// TimeField trigger and the TimeScroller panel always have something to render.\n// Mirrors DateTimePicker.vue's internalValue seeding pattern exactly.\nconst _now = internationalizedNow(getLocalTimeZone())\nconst internalValue = shallowRef<Time>(\n  modelValue.value ?? props.defaultValue ?? new Time(_now.hour, _now.minute),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\nwatch(modelValue, (v) => {\n  if (v instanceof Time) internalValue.value = v\n})\n\n// Route segment edits from TimeField back to both internalValue and modelValue.\nfunction onFieldChange(v: Time | null | undefined) {\n  if (!(v instanceof Time)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// Route wheel selections from TimeScroller back to both internalValue and modelValue.\nfunction onScrollerChange(v: Time) {\n  internalValue.value = v\n  modelValue.value = v\n  if (props.closeOnSelect) {\n    // Scroller selection is a single-field change (hour OR minute OR second),\n    // not a \"done\" action — do NOT auto-close here. closeOnSelect exists for\n    // parity with DateTimePicker's prop surface, matching its own behavior of\n    // not auto-closing on a single time-field tap either.\n  }\n}\n\nconst slotFns = computed(() =>\n  timePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"time-picker\"\n  >\n    <Popover\n      v-model:open=\"openModel\"\n      :default-open=\"defaultOpen\"\n      :modal=\"modal\"\n    >\n      <TimeField\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        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder-value=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :step-snapping=\"stepSnapping\"\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        :required=\"required\"\n        :dir=\"dir\"\n        @update:model-value=\"(val) => onFieldChange(val as Time | null | undefined)\"\n      >\n        <template #endContent>\n          <PopoverTrigger\n            :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n            :as=\"triggerAs\"\n            :as-child=\"triggerAsChild\"\n            aria-label=\"Open 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                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n            </slot>\n          </PopoverTrigger>\n        </template>\n      </TimeField>\n\n      <PopoverContent\n        :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n        data-slot=\"popover\"\n        :side-offset=\"sideOffset ?? 8\"\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      >\n        <div\n          :class=\"composeClassName(slotFns.panel(), props.classNames?.panel)\"\n          data-slot=\"panel\"\n        >\n          <TimeScroller\n            :model-value=\"internalValue\"\n            :granularity=\"granularity === 'hour' ? 'minute' : granularity\"\n            :hour-cycle=\"hourCycle\"\n            @update:model-value=\"(val) => onScrollerChange(val as Time)\"\n          />\n\n          <div\n            :class=\"composeClassName(slotFns.timeDone(), props.classNames?.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      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/time-picker/TimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,320 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import Button_default from "../button/Button.js";
+import Popover_default from "../popover/Popover.js";
+import PopoverTrigger_default from "../popover/PopoverTrigger.js";
+import PopoverContent_default from "../popover/PopoverContent.js";
+import TimeField_default from "../time-field/TimeField.js";
+import TimeScroller_default from "../_shared/TimeScroller.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { timePickerVariants } from "@auronui/styles";
+import { Time, getLocalTimeZone, now } from "@internationalized/date";
+//#region src/components/time-picker/TimePicker.vue?vue&type=script&setup=true&lang.ts
+var TimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TimePicker",
+	props: /* @__PURE__ */ mergeModels({
+		variant: { default: "flat" },
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		defaultValue: {},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		defaultPlaceholder: {},
+		placeholderValue: {},
+		minValue: {},
+		maxValue: {},
+		locale: {},
+		granularity: { default: "minute" },
+		hourCycle: { default: 24 },
+		step: {},
+		stepSnapping: { type: Boolean },
+		label: {},
+		description: {},
+		errorMessage: {},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		hideTimeZone: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		modal: {
+			type: Boolean,
+			default: false
+		},
+		doneLabel: { default: "Done" },
+		dir: {},
+		required: { type: Boolean },
+		triggerAs: {},
+		triggerAsChild: { type: Boolean },
+		side: {},
+		sideOffset: {},
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
+		collisionBoundary: {},
+		collisionPadding: { default: 8 },
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: {
+			type: Boolean,
+			default: true
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: void 0
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const openModel = useModel(__props, "open");
+		if (props.defaultOpen && openModel.value === void 0) openModel.value = true;
+		const _now = now(getLocalTimeZone());
+		const internalValue = shallowRef(modelValue.value ?? props.defaultValue ?? new Time(_now.hour, _now.minute));
+		watch(modelValue, (v) => {
+			if (v instanceof Time) internalValue.value = v;
+		});
+		function onFieldChange(v) {
+			if (!(v instanceof Time)) return;
+			internalValue.value = v;
+			modelValue.value = v;
+		}
+		function onScrollerChange(v) {
+			internalValue.value = v;
+			modelValue.value = v;
+			if (props.closeOnSelect) {}
+		}
+		const slotFns = computed(() => timePickerVariants({
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			fullWidth: props.fullWidth
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
+				"data-slot": "time-picker"
+			}, [createVNode(Popover_default, {
+				open: openModel.value,
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => openModel.value = $event),
+				"default-open": __props.defaultOpen,
+				modal: __props.modal
+			}, {
+				default: withCtx(() => [createVNode(TimeField_default, {
+					"model-value": internalValue.value,
+					variant: __props.variant,
+					size: __props.size,
+					color: __props.color,
+					"label-placement": __props.labelPlacement,
+					"full-width": __props.fullWidth,
+					"default-value": __props.defaultValue,
+					"default-placeholder": __props.defaultPlaceholder,
+					"placeholder-value": __props.placeholderValue,
+					"min-value": __props.minValue,
+					"max-value": __props.maxValue,
+					granularity: __props.granularity,
+					"hour-cycle": __props.hourCycle,
+					step: __props.step,
+					"step-snapping": __props.stepSnapping,
+					locale: __props.locale,
+					label: __props.label,
+					description: __props.description,
+					"error-message": __props.errorMessage,
+					"is-invalid": __props.isInvalid,
+					"is-disabled": __props.isDisabled,
+					"is-read-only": __props.isReadOnly,
+					"is-required": __props.isRequired,
+					name: __props.name,
+					"hide-time-zone": __props.hideTimeZone,
+					required: __props.required,
+					dir: __props.dir,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = (val) => onFieldChange(val))
+				}, {
+					endContent: withCtx(() => [createVNode(PopoverTrigger_default, {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
+						as: __props.triggerAs,
+						"as-child": __props.triggerAsChild,
+						"aria-label": "Open time picker",
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectorIcon", {}, () => [(openBlock(), createElementBlock("svg", {
+							class: normalizeClass(unref(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
+							xmlns: "http://www.w3.org/2000/svg",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [..._cache[5] || (_cache[5] = [createElementVNode("circle", {
+							cx: "12",
+							cy: "12",
+							r: "10"
+						}, null, -1), createElementVNode("polyline", { points: "12 6 12 12 16 14" }, null, -1)])], 2))])]),
+						_: 3
+					}, 8, [
+						"class",
+						"as",
+						"as-child"
+					])]),
+					_: 3
+				}, 8, [
+					"model-value",
+					"variant",
+					"size",
+					"color",
+					"label-placement",
+					"full-width",
+					"default-value",
+					"default-placeholder",
+					"placeholder-value",
+					"min-value",
+					"max-value",
+					"granularity",
+					"hour-cycle",
+					"step",
+					"step-snapping",
+					"locale",
+					"label",
+					"description",
+					"error-message",
+					"is-invalid",
+					"is-disabled",
+					"is-read-only",
+					"is-required",
+					"name",
+					"hide-time-zone",
+					"required",
+					"dir"
+				]), createVNode(PopoverContent_default, {
+					class: normalizeClass(unref(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
+					"data-slot": "popover",
+					"side-offset": __props.sideOffset ?? 8,
+					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
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.panel(), props.classNames?.panel)),
+						"data-slot": "panel"
+					}, [createVNode(TimeScroller_default, {
+						"model-value": internalValue.value,
+						granularity: __props.granularity === "hour" ? "minute" : __props.granularity,
+						"hour-cycle": __props.hourCycle,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = (val) => onScrollerChange(val))
+					}, null, 8, [
+						"model-value",
+						"granularity",
+						"hour-cycle"
+					]), createElementVNode("div", {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.timeDone(), props.classNames?.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[3] || (_cache[3] = ($event) => openModel.value = false)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.doneLabel), 1)]),
+						_: 1
+					})])], 2)], 2)]),
+					_: 3
+				}, 8, [
+					"class",
+					"side-offset",
+					"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"
+				])]),
+				_: 3
+			}, 8, [
+				"open",
+				"default-open",
+				"modal"
+			])], 2);
+		};
+	}
+});
+//#endregion
+export { TimePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/time-picker/TimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/TimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue'\nimport { Time, getLocalTimeZone, now as internationalizedNow } from '@internationalized/date'\nimport { timePickerVariants, type TimeFieldVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport TimeField from '../time-field/TimeField.vue'\nimport TimeScroller from '../_shared/TimeScroller.vue'\nimport Popover from '../popover/Popover.vue'\nimport PopoverTrigger from '../popover/PopoverTrigger.vue'\nimport PopoverContent from '../popover/PopoverContent.vue'\nimport Button from '../button/Button.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to TimeField */\n  variant?: TimeFieldVariants['variant']\n  size?: TimeFieldVariants['size']\n  color?: TimeFieldVariants['color']\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: Time\n  defaultOpen?: boolean\n  defaultPlaceholder?: Time\n  placeholderValue?: Time\n  minValue?: Time\n  maxValue?: Time\n  locale?: string\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  stepSnapping?: 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  hideTimeZone?: boolean\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Label for the footer button that closes the picker. */\n  doneLabel?: string\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  required?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  sideOffset?: number\n  sideFlip?: boolean\n  align?: 'start' | 'center' | 'end'\n  alignOffset?: number\n  alignFlip?: boolean\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | null | Array<Element | null>\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  arrowPadding?: number\n  hideShiftedArrow?: boolean\n  sticky?: 'partial' | 'always'\n  hideWhenDetached?: boolean\n  positionStrategy?: 'fixed' | 'absolute'\n  updatePositionStrategy?: 'always' | 'optimized'\n  disableUpdateOnLayoutShift?: boolean\n  prioritizePosition?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover, panel, timeDone) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    panel: ClassValue\n    timeDone: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\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  hourCycle: 24,\n  defaultOpen: false,\n  closeOnSelect: true,\n  modal: false,\n  doneLabel: 'Done',\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst modelValue = defineModel<Time | null | undefined>()\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// Internal working value — always a Time, never null/undefined, so both the\n// TimeField trigger and the TimeScroller panel always have something to render.\n// Mirrors DateTimePicker.vue's internalValue seeding pattern exactly.\nconst _now = internationalizedNow(getLocalTimeZone())\nconst internalValue = shallowRef<Time>(\n  modelValue.value ?? props.defaultValue ?? new Time(_now.hour, _now.minute),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\nwatch(modelValue, (v) => {\n  if (v instanceof Time) internalValue.value = v\n})\n\n// Route segment edits from TimeField back to both internalValue and modelValue.\nfunction onFieldChange(v: Time | null | undefined) {\n  if (!(v instanceof Time)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// Route wheel selections from TimeScroller back to both internalValue and modelValue.\nfunction onScrollerChange(v: Time) {\n  internalValue.value = v\n  modelValue.value = v\n  if (props.closeOnSelect) {\n    // Scroller selection is a single-field change (hour OR minute OR second),\n    // not a \"done\" action — do NOT auto-close here. closeOnSelect exists for\n    // parity with DateTimePicker's prop surface, matching its own behavior of\n    // not auto-closing on a single time-field tap either.\n  }\n}\n\nconst slotFns = computed(() =>\n  timePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"time-picker\"\n  >\n    <Popover\n      v-model:open=\"openModel\"\n      :default-open=\"defaultOpen\"\n      :modal=\"modal\"\n    >\n      <TimeField\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        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder-value=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :step-snapping=\"stepSnapping\"\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        :required=\"required\"\n        :dir=\"dir\"\n        @update:model-value=\"(val) => onFieldChange(val as Time | null | undefined)\"\n      >\n        <template #endContent>\n          <PopoverTrigger\n            :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n            :as=\"triggerAs\"\n            :as-child=\"triggerAsChild\"\n            aria-label=\"Open 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                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n            </slot>\n          </PopoverTrigger>\n        </template>\n      </TimeField>\n\n      <PopoverContent\n        :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n        data-slot=\"popover\"\n        :side-offset=\"sideOffset ?? 8\"\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      >\n        <div\n          :class=\"composeClassName(slotFns.panel(), props.classNames?.panel)\"\n          data-slot=\"panel\"\n        >\n          <TimeScroller\n            :model-value=\"internalValue\"\n            :granularity=\"granularity === 'hour' ? 'minute' : granularity\"\n            :hour-cycle=\"hourCycle\"\n            @update:model-value=\"(val) => onScrollerChange(val as Time)\"\n          />\n\n          <div\n            :class=\"composeClassName(slotFns.timeDone(), props.classNames?.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      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/time-range-field/TimeRangeField.js

@@ -0,0 +1,7 @@
+import TimeRangeField_vue_vue_type_script_setup_true_lang_default from "./TimeRangeField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/time-range-field/TimeRangeField.vue
+var TimeRangeField_default = TimeRangeField_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimeRangeField_default as default };
+
+//# sourceMappingURL=TimeRangeField.js.map

package/dist/components/time-range-field/TimeRangeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeField.js","names":[],"sources":["../../../src/components/time-range-field/TimeRangeField.vue"],"sourcesContent":["<!--\n  TimeRangeField — form-field mirror of DateRangeField.vue for a time range.\n\n  Same prop surface, data-attribute contract, floating-label behavior,\n  start/end content slots, and a11y wiring as DateRangeField. Renders TWO\n  segment lists (start + end) separated by a visible \"–\" glyph, using\n  @internationalized/date TimeValue instead of DateValue.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeRangeFieldRoot, TimeRangeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeRangeFieldVariants, type TimeRangeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeRange | null | undefined>()\n\nexport interface TimeRange {\n  start: TimeValue\n  end: TimeValue\n}\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeRangeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeRangeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeRangeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeRangeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. Merged with tailwind-variants styles. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    separator: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeRangeField-specific ─────────────────────────────────── */\n  defaultValue?: TimeRange\n  defaultPlaceholder?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  hideTimeZone?: boolean\n  locale?: string\n  name?: string\n  /** Marks the field as required for form submission. */\n  required?: boolean\n  /** Text direction for the field. */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element or component. */\n  as?: string\n  /** Render root child as root element. */\n  asChild?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\n\nconst isFilled = computed(() => modelValue.value?.start != null || modelValue.value?.end != null)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  showInsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => fieldId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => props.isReadOnly,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against focus snap-back after an outside click.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled by sniffing rendered segments across BOTH segment lists.\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeRangeFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadOnly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n    data-slot=\"time-range-field\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <TimeRangeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :required=\"required\"\n        :dir=\"dir\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <FieldLabel\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :label=\"label\"\n            :is-required=\"isRequired\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          />\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n            data-type=\"start\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments.start\"\n              :key=\"`start-${_i}`\"\n            >\n              <TimeRangeFieldInput\n                :part=\"segment.part\"\n                type=\"start\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeRangeFieldInput>\n            </template>\n          </div>\n\n          <span\n            :class=\"composeClassName(slotFns.separator(), props.classNames?.separator)\"\n            aria-hidden=\"true\"\n            data-slot=\"separator\"\n          >–</span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n            data-type=\"end\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments.end\"\n              :key=\"`end-${_i}`\"\n            >\n              <TimeRangeFieldInput\n                :part=\"segment.part\"\n                type=\"end\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeRangeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeRangeFieldRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        error-role=\"alert\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}