@auronui/vue 1.4.0 → 1.4.2

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

@@ -1 +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":""}
+{"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    timeField: Partial<{\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    timeScroller: Partial<{\n      scrollerWrap: ClassValue\n      scrollerColumn: ClassValue\n      scrollerItem: ClassValue\n    }>\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        :class-names=\"props.classNames?.timeField\"\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            :class-names=\"props.classNames?.timeScroller\"\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

@@ -175,6 +175,7 @@ var TimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"hide-time-zone": __props.hideTimeZone,
 					required: __props.required,
 					dir: __props.dir,
+					"class-names": props.classNames?.timeField,
 					"onUpdate:modelValue": _cache[1] || (_cache[1] = (val) => onFieldChange(val))
 				}, {
 					endContent: withCtx(() => [createVNode(PopoverTrigger_default, {
@@ -236,7 +237,8 @@ var TimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"name",
 					"hide-time-zone",
 					"required",
-					"dir"
+					"dir",
+					"class-names"
 				]), createVNode(PopoverContent_default, {
 					class: normalizeClass(unref(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
@@ -265,11 +267,13 @@ var TimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						"model-value": internalValue.value,
 						granularity: __props.granularity === "hour" ? "minute" : __props.granularity,
 						"hour-cycle": __props.hourCycle,
+						"class-names": props.classNames?.timeScroller,
 						"onUpdate:modelValue": _cache[2] || (_cache[2] = (val) => onScrollerChange(val))
 					}, null, 8, [
 						"model-value",
 						"granularity",
-						"hour-cycle"
+						"hour-cycle",
+						"class-names"
 					]), createElementVNode("div", {
 						class: normalizeClass(unref(composeClassName)(slotFns.value.timeDone(), props.classNames?.timeDone)),
 						"data-slot": "time-done"

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

@@ -1 +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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"}
+{"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    timeField: Partial<{\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    timeScroller: Partial<{\n      scrollerWrap: ClassValue\n      scrollerColumn: ClassValue\n      scrollerItem: ClassValue\n    }>\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        :class-names=\"props.classNames?.timeField\"\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            :class-names=\"props.classNames?.timeScroller\"\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/toast/ToastViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.js","names":[],"sources":["../../../src/components/toast/ToastViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ToastViewport — Renders toasts for one screen position.\n *\n * Each viewport wraps its own RekaToastProvider so its ToastRoot children\n * teleport to THIS viewport, not a shared one. Without an isolated provider\n * per viewport, all ToastRoots teleport to whichever viewport mounted last.\n *\n * Usage:\n * ```vue\n * <ToastProvider>\n *   <ToastViewport position=\"top-right\" />\n *   <ToastViewport position=\"bottom-right\" />\n * </ToastProvider>\n * ```\n */\nimport { computed } from 'vue'\nimport { ToastProvider as RekaToastProvider, ToastViewport as RekaToastViewport } from 'reka-ui'\nimport { toastVariants } from '@auronui/styles'\nimport type { ToastVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToast } from '../../composables/useToast'\nimport Toast from './Toast.vue'\nimport ToastTitle from './ToastTitle.vue'\nimport ToastDescription from './ToastDescription.vue'\nimport ToastAction from './ToastAction.vue'\nimport ToastClose from './ToastClose.vue'\n\ntype ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'\n\nconst props = withDefaults(defineProps<{\n  position?: ToastPosition\n  class?: string\n  hotkey?: string[]\n  label?: string\n  swipeDirection?: 'up' | 'down' | 'left' | 'right'\n  /** Default duration for toasts in this provider (ms) */\n  duration?: number\n  /** Disable swipe gestures for all toasts in this provider */\n  disableSwipe?: boolean\n  /** Distance in pixels before a swipe is recognised */\n  swipeThreshold?: number\n  /** Render viewport as a different element */\n  as?: string\n  /** Merge viewport props onto child element */\n  asChild?: boolean\n}>(), {\n  position: 'bottom-right',\n  hotkey: () => ['F8'],\n  label: 'Notifications ({hotkey})',\n  swipeDirection: 'right',\n})\n\nconst { toasts, dismiss, remove } = useToast()\n\nfunction handleOpenChange(id: string, open: boolean) {\n  if (!open) {\n    dismiss(id)\n    setTimeout(() => remove(id), 250)\n  }\n}\n\nconst placementVariant = computed<ToastVariants['placement']>(() => {\n  const map: Record<ToastPosition, ToastVariants['placement']> = {\n    'top-right': 'top end',\n    'top-center': 'top',\n    'top-left': 'top start',\n    'bottom-right': 'bottom end',\n    'bottom-center': 'bottom',\n    'bottom-left': 'bottom start',\n  }\n  return map[props.position] ?? 'bottom end'\n})\n\nconst styles = computed(() => toastVariants({ placement: placementVariant.value }))\n\nconst viewportToasts = computed(() =>\n  toasts.value.filter((t) => (t.position ?? 'bottom-right') === props.position),\n)\n</script>\n\n<template>\n  <!-- Each viewport has its own isolated Reka provider so ToastRoot teleports here, not to a shared viewport -->\n  <RekaToastProvider\n    :swipe-direction=\"swipeDirection\"\n    :duration=\"props.duration\"\n    :disable-swipe=\"props.disableSwipe\"\n    :swipe-threshold=\"props.swipeThreshold\"\n  >\n    <RekaToastViewport\n      :hotkey=\"hotkey\"\n      :label=\"label\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :class=\"composeClassName(styles.region(), props.class)\"\n    >\n      <Toast\n        v-for=\"toast in viewportToasts\"\n        :key=\"toast.id\"\n        :open=\"toast.open\"\n        :duration=\"toast.duration\"\n        :position=\"toast.position\"\n        :variant=\"toast.variant\"\n        @update:open=\"(open) => handleOpenChange(toast.id, open)\"\n      >\n        <div :class=\"styles.content()\">\n          <ToastTitle>{{ toast.title }}</ToastTitle>\n          <ToastDescription v-if=\"toast.description\">\n            {{ toast.description }}\n          </ToastDescription>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1 ml-auto\">\n          <ToastAction\n            v-if=\"toast.action\"\n            :alt-text=\"toast.action.label\"\n            @click=\"toast.action!.onClick\"\n          >\n            {{ toast.action.label }}\n          </ToastAction>\n          <ToastClose @click=\"dismiss(toast.id)\" />\n        </div>\n      </Toast>\n      <slot />\n    </RekaToastViewport>\n  </RekaToastProvider>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ToastViewport.js","names":[],"sources":["../../../src/components/toast/ToastViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ToastViewport — Renders toasts for one screen position.\n *\n * Each viewport wraps its own RekaToastProvider so its ToastRoot children\n * teleport to THIS viewport, not a shared one. Without an isolated provider\n * per viewport, all ToastRoots teleport to whichever viewport mounted last.\n *\n * Usage:\n * ```vue\n * <ToastProvider>\n *   <ToastViewport position=\"top-right\" />\n *   <ToastViewport position=\"bottom-right\" />\n * </ToastProvider>\n * ```\n */\nimport { computed } from 'vue'\nimport { ToastProvider as RekaToastProvider, ToastViewport as RekaToastViewport } from 'reka-ui'\nimport { toastVariants } from '@auronui/styles'\nimport type { ToastVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useToast } from '../../composables/useToast'\nimport Toast from './Toast.vue'\nimport ToastTitle from './ToastTitle.vue'\nimport ToastDescription from './ToastDescription.vue'\nimport ToastAction from './ToastAction.vue'\nimport ToastClose from './ToastClose.vue'\n\ntype ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'\n\nconst props = withDefaults(defineProps<{\n  position?: ToastPosition\n  class?: string\n  hotkey?: string[]\n  label?: string\n  swipeDirection?: 'up' | 'down' | 'left' | 'right'\n  /** Default duration for toasts in this provider (ms) */\n  duration?: number\n  /** Disable swipe gestures for all toasts in this provider */\n  disableSwipe?: boolean\n  /** Distance in pixels before a swipe is recognised */\n  swipeThreshold?: number\n  /** Render viewport as a different element */\n  as?: string\n  /** Merge viewport props onto child element */\n  asChild?: boolean\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    toast: ClassValue\n    content: ClassValue\n    title: ClassValue\n    description: ClassValue\n    actions: ClassValue\n    action: ClassValue\n    close: ClassValue\n  }>\n}>(), {\n  position: 'bottom-right',\n  hotkey: () => ['F8'],\n  label: 'Notifications ({hotkey})',\n  swipeDirection: 'right',\n})\n\nconst { toasts, dismiss, remove } = useToast()\n\nfunction handleOpenChange(id: string, open: boolean) {\n  if (!open) {\n    dismiss(id)\n    setTimeout(() => remove(id), 250)\n  }\n}\n\nconst placementVariant = computed<ToastVariants['placement']>(() => {\n  const map: Record<ToastPosition, ToastVariants['placement']> = {\n    'top-right': 'top end',\n    'top-center': 'top',\n    'top-left': 'top start',\n    'bottom-right': 'bottom end',\n    'bottom-center': 'bottom',\n    'bottom-left': 'bottom start',\n  }\n  return map[props.position] ?? 'bottom end'\n})\n\nconst styles = computed(() => toastVariants({ placement: placementVariant.value }))\n\nconst viewportToasts = computed(() =>\n  toasts.value.filter((t) => (t.position ?? 'bottom-right') === props.position),\n)\n</script>\n\n<template>\n  <!-- Each viewport has its own isolated Reka provider so ToastRoot teleports here, not to a shared viewport -->\n  <RekaToastProvider\n    :swipe-direction=\"swipeDirection\"\n    :duration=\"props.duration\"\n    :disable-swipe=\"props.disableSwipe\"\n    :swipe-threshold=\"props.swipeThreshold\"\n  >\n    <RekaToastViewport\n      :hotkey=\"hotkey\"\n      :label=\"label\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :class=\"composeClassName(styles.region(), props.class)\"\n    >\n      <Toast\n        v-for=\"toast in viewportToasts\"\n        :key=\"toast.id\"\n        :open=\"toast.open\"\n        :duration=\"toast.duration\"\n        :position=\"toast.position\"\n        :variant=\"toast.variant\"\n        :class=\"composeClassName(props.classNames?.toast)\"\n        @update:open=\"(open) => handleOpenChange(toast.id, open)\"\n      >\n        <div :class=\"composeClassName(styles.content(), props.classNames?.content)\">\n          <ToastTitle :class=\"composeClassName(props.classNames?.title)\">{{ toast.title }}</ToastTitle>\n          <ToastDescription v-if=\"toast.description\" :class=\"composeClassName(props.classNames?.description)\">\n            {{ toast.description }}\n          </ToastDescription>\n        </div>\n        <div :class=\"composeClassName('flex shrink-0 items-center gap-1 ml-auto', props.classNames?.actions)\">\n          <ToastAction\n            v-if=\"toast.action\"\n            :alt-text=\"toast.action.label\"\n            :class=\"composeClassName(props.classNames?.action)\"\n            @click=\"toast.action!.onClick\"\n          >\n            {{ toast.action.label }}\n          </ToastAction>\n          <ToastClose :class=\"composeClassName(props.classNames?.close)\" @click=\"dismiss(toast.id)\" />\n        </div>\n      </Toast>\n      <slot />\n    </RekaToastViewport>\n  </RekaToastProvider>\n</template>\n"],"mappings":""}

package/dist/components/toast/ToastViewport.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,6 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { toastVariants } from "@auronui/styles";
 import { ToastProvider, ToastViewport } from "reka-ui";
 //#region src/components/toast/ToastViewport.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
 var ToastViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ToastViewport",
 	props: {
@@ -22,7 +21,8 @@ var ToastViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		disableSwipe: { type: Boolean },
 		swipeThreshold: {},
 		as: {},
-		asChild: { type: Boolean }
+		asChild: { type: Boolean },
+		classNames: {}
 	},
 	setup(__props) {
 		/**
@@ -81,28 +81,41 @@ var ToastViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							duration: toast.duration,
 							position: toast.position,
 							variant: toast.variant,
+							class: normalizeClass(unref(composeClassName)(props.classNames?.toast)),
 							"onUpdate:open": (open) => handleOpenChange(toast.id, open)
 						}, {
-							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(styles.value.content()) }, [createVNode(ToastTitle_default, null, {
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(composeClassName)(styles.value.content(), props.classNames?.content)) }, [createVNode(ToastTitle_default, { class: normalizeClass(unref(composeClassName)(props.classNames?.title)) }, {
 								default: withCtx(() => [createTextVNode(toDisplayString(toast.title), 1)]),
 								_: 2
-							}, 1024), toast.description ? (openBlock(), createBlock(ToastDescription_default, { key: 0 }, {
+							}, 1032, ["class"]), toast.description ? (openBlock(), createBlock(ToastDescription_default, {
+								key: 0,
+								class: normalizeClass(unref(composeClassName)(props.classNames?.description))
+							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(toast.description), 1)]),
 								_: 2
-							}, 1024)) : createCommentVNode("", true)], 2), createElementVNode("div", _hoisted_1, [toast.action ? (openBlock(), createBlock(ToastAction_default, {
+							}, 1032, ["class"])) : createCommentVNode("", true)], 2), createElementVNode("div", { class: normalizeClass(unref(composeClassName)("flex shrink-0 items-center gap-1 ml-auto", props.classNames?.actions)) }, [toast.action ? (openBlock(), createBlock(ToastAction_default, {
 								key: 0,
 								"alt-text": toast.action.label,
+								class: normalizeClass(unref(composeClassName)(props.classNames?.action)),
 								onClick: toast.action.onClick
 							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(toast.action.label), 1)]),
 								_: 2
-							}, 1032, ["alt-text", "onClick"])) : createCommentVNode("", true), createVNode(ToastClose_default, { onClick: ($event) => unref(dismiss)(toast.id) }, null, 8, ["onClick"])])]),
+							}, 1032, [
+								"alt-text",
+								"class",
+								"onClick"
+							])) : createCommentVNode("", true), createVNode(ToastClose_default, {
+								class: normalizeClass(unref(composeClassName)(props.classNames?.close)),
+								onClick: ($event) => unref(dismiss)(toast.id)
+							}, null, 8, ["class", "onClick"])], 2)]),
 							_: 2
 						}, 1032, [
 							"open",
 							"duration",
 							"position",
 							"variant",
+							"class",
 							"onUpdate:open"
 						]);
 					}), 128)), renderSlot(_ctx.$slots, "default")]),

package/dist/components/toast/ToastViewport.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/toast/ToastViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ToastViewport — Renders toasts for one screen position.\n *\n * Each viewport wraps its own RekaToastProvider so its ToastRoot children\n * teleport to THIS viewport, not a shared one. Without an isolated provider\n * per viewport, all ToastRoots teleport to whichever viewport mounted last.\n *\n * Usage:\n * ```vue\n * <ToastProvider>\n *   <ToastViewport position=\"top-right\" />\n *   <ToastViewport position=\"bottom-right\" />\n * </ToastProvider>\n * ```\n */\nimport { computed } from 'vue'\nimport { ToastProvider as RekaToastProvider, ToastViewport as RekaToastViewport } from 'reka-ui'\nimport { toastVariants } from '@auronui/styles'\nimport type { ToastVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useToast } from '../../composables/useToast'\nimport Toast from './Toast.vue'\nimport ToastTitle from './ToastTitle.vue'\nimport ToastDescription from './ToastDescription.vue'\nimport ToastAction from './ToastAction.vue'\nimport ToastClose from './ToastClose.vue'\n\ntype ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'\n\nconst props = withDefaults(defineProps<{\n  position?: ToastPosition\n  class?: string\n  hotkey?: string[]\n  label?: string\n  swipeDirection?: 'up' | 'down' | 'left' | 'right'\n  /** Default duration for toasts in this provider (ms) */\n  duration?: number\n  /** Disable swipe gestures for all toasts in this provider */\n  disableSwipe?: boolean\n  /** Distance in pixels before a swipe is recognised */\n  swipeThreshold?: number\n  /** Render viewport as a different element */\n  as?: string\n  /** Merge viewport props onto child element */\n  asChild?: boolean\n}>(), {\n  position: 'bottom-right',\n  hotkey: () => ['F8'],\n  label: 'Notifications ({hotkey})',\n  swipeDirection: 'right',\n})\n\nconst { toasts, dismiss, remove } = useToast()\n\nfunction handleOpenChange(id: string, open: boolean) {\n  if (!open) {\n    dismiss(id)\n    setTimeout(() => remove(id), 250)\n  }\n}\n\nconst placementVariant = computed<ToastVariants['placement']>(() => {\n  const map: Record<ToastPosition, ToastVariants['placement']> = {\n    'top-right': 'top end',\n    'top-center': 'top',\n    'top-left': 'top start',\n    'bottom-right': 'bottom end',\n    'bottom-center': 'bottom',\n    'bottom-left': 'bottom start',\n  }\n  return map[props.position] ?? 'bottom end'\n})\n\nconst styles = computed(() => toastVariants({ placement: placementVariant.value }))\n\nconst viewportToasts = computed(() =>\n  toasts.value.filter((t) => (t.position ?? 'bottom-right') === props.position),\n)\n</script>\n\n<template>\n  <!-- Each viewport has its own isolated Reka provider so ToastRoot teleports here, not to a shared viewport -->\n  <RekaToastProvider\n    :swipe-direction=\"swipeDirection\"\n    :duration=\"props.duration\"\n    :disable-swipe=\"props.disableSwipe\"\n    :swipe-threshold=\"props.swipeThreshold\"\n  >\n    <RekaToastViewport\n      :hotkey=\"hotkey\"\n      :label=\"label\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :class=\"composeClassName(styles.region(), props.class)\"\n    >\n      <Toast\n        v-for=\"toast in viewportToasts\"\n        :key=\"toast.id\"\n        :open=\"toast.open\"\n        :duration=\"toast.duration\"\n        :position=\"toast.position\"\n        :variant=\"toast.variant\"\n        @update:open=\"(open) => handleOpenChange(toast.id, open)\"\n      >\n        <div :class=\"styles.content()\">\n          <ToastTitle>{{ toast.title }}</ToastTitle>\n          <ToastDescription v-if=\"toast.description\">\n            {{ toast.description }}\n          </ToastDescription>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1 ml-auto\">\n          <ToastAction\n            v-if=\"toast.action\"\n            :alt-text=\"toast.action.label\"\n            @click=\"toast.action!.onClick\"\n          >\n            {{ toast.action.label }}\n          </ToastAction>\n          <ToastClose @click=\"dismiss(toast.id)\" />\n        </div>\n      </Toast>\n      <slot />\n    </RekaToastViewport>\n  </RekaToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EAuBd,MAAM,EAAE,QAAQ,SAAS,WAAW,UAAS;EAE7C,SAAS,iBAAiB,IAAY,MAAe;AACnD,OAAI,CAAC,MAAM;AACT,YAAQ,GAAE;AACV,qBAAiB,OAAO,GAAG,EAAE,IAAG;;;EAIpC,MAAM,mBAAmB,eAA2C;AASlE,UAR+D;IAC7D,aAAa;IACb,cAAc;IACd,YAAY;IACZ,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACjB,CACW,MAAM,aAAa;IAC/B;EAED,MAAM,SAAS,eAAe,cAAc,EAAE,WAAW,iBAAiB,OAAO,CAAC,CAAA;EAElF,MAAM,iBAAiB,eACrB,OAAO,MAAM,QAAQ,OAAO,EAAE,YAAY,oBAAoB,MAAM,SAAS,CAC/E;;uBAKE,YAyCoB,MAAA,cAAA,EAAA;IAxCjB,mBAAiB,QAAA;IACjB,UAAU,MAAM;IAChB,iBAAe,MAAM;IACrB,mBAAiB,MAAM;;2BAoCJ,CAlCpB,YAkCoB,MAAA,cAAA,EAAA;KAjCjB,QAAQ,QAAA;KACR,OAAO,QAAA;KACP,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,QAAM,EAAI,MAAM,MAAK,CAAA;;4BAGpB,EAAA,UAAA,KAAA,EADjC,mBAyBQ,UAAA,MAAA,WAxBU,eAAA,QAAT,UAAK;0BADd,YAyBQ,eAAA;OAvBL,KAAK,MAAM;OACX,MAAM,MAAM;OACZ,UAAU,MAAM;OAChB,UAAU,MAAM;OAChB,SAAS,MAAM;OACf,kBAAc,SAAS,iBAAiB,MAAM,IAAI,KAAI;;8BAOjD,CALN,mBAKM,OAAA,EALA,OAAK,eAAE,OAAA,MAAO,SAAO,CAAA,EAAA,EAAA,CACzB,YAA0C,oBAAA,MAAA;+BAAb,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;iBACF,MAAM,eAAA,WAAA,EAA9B,YAEmB,0BAAA,EAAA,KAAA,GAAA,EAAA;+BADM,CAAA,gBAAA,gBAApB,MAAM,YAAW,EAAA,EAAA,CAAA,CAAA;;sDAGxB,mBASM,OATN,YASM,CAPI,MAAM,UAAA,WAAA,EADd,YAMc,qBAAA;;QAJX,YAAU,MAAM,OAAO;QACvB,SAAO,MAAM,OAAQ;;+BAEE,CAAA,gBAAA,gBAArB,MAAM,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;0EAEvB,YAAyC,oBAAA,EAA5B,UAAK,WAAE,MAAA,QAAO,CAAC,MAAM,GAAE,EAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;gBAGxC,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ToastViewport.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/toast/ToastViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ToastViewport — Renders toasts for one screen position.\n *\n * Each viewport wraps its own RekaToastProvider so its ToastRoot children\n * teleport to THIS viewport, not a shared one. Without an isolated provider\n * per viewport, all ToastRoots teleport to whichever viewport mounted last.\n *\n * Usage:\n * ```vue\n * <ToastProvider>\n *   <ToastViewport position=\"top-right\" />\n *   <ToastViewport position=\"bottom-right\" />\n * </ToastProvider>\n * ```\n */\nimport { computed } from 'vue'\nimport { ToastProvider as RekaToastProvider, ToastViewport as RekaToastViewport } from 'reka-ui'\nimport { toastVariants } from '@auronui/styles'\nimport type { ToastVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useToast } from '../../composables/useToast'\nimport Toast from './Toast.vue'\nimport ToastTitle from './ToastTitle.vue'\nimport ToastDescription from './ToastDescription.vue'\nimport ToastAction from './ToastAction.vue'\nimport ToastClose from './ToastClose.vue'\n\ntype ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'\n\nconst props = withDefaults(defineProps<{\n  position?: ToastPosition\n  class?: string\n  hotkey?: string[]\n  label?: string\n  swipeDirection?: 'up' | 'down' | 'left' | 'right'\n  /** Default duration for toasts in this provider (ms) */\n  duration?: number\n  /** Disable swipe gestures for all toasts in this provider */\n  disableSwipe?: boolean\n  /** Distance in pixels before a swipe is recognised */\n  swipeThreshold?: number\n  /** Render viewport as a different element */\n  as?: string\n  /** Merge viewport props onto child element */\n  asChild?: boolean\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    toast: ClassValue\n    content: ClassValue\n    title: ClassValue\n    description: ClassValue\n    actions: ClassValue\n    action: ClassValue\n    close: ClassValue\n  }>\n}>(), {\n  position: 'bottom-right',\n  hotkey: () => ['F8'],\n  label: 'Notifications ({hotkey})',\n  swipeDirection: 'right',\n})\n\nconst { toasts, dismiss, remove } = useToast()\n\nfunction handleOpenChange(id: string, open: boolean) {\n  if (!open) {\n    dismiss(id)\n    setTimeout(() => remove(id), 250)\n  }\n}\n\nconst placementVariant = computed<ToastVariants['placement']>(() => {\n  const map: Record<ToastPosition, ToastVariants['placement']> = {\n    'top-right': 'top end',\n    'top-center': 'top',\n    'top-left': 'top start',\n    'bottom-right': 'bottom end',\n    'bottom-center': 'bottom',\n    'bottom-left': 'bottom start',\n  }\n  return map[props.position] ?? 'bottom end'\n})\n\nconst styles = computed(() => toastVariants({ placement: placementVariant.value }))\n\nconst viewportToasts = computed(() =>\n  toasts.value.filter((t) => (t.position ?? 'bottom-right') === props.position),\n)\n</script>\n\n<template>\n  <!-- Each viewport has its own isolated Reka provider so ToastRoot teleports here, not to a shared viewport -->\n  <RekaToastProvider\n    :swipe-direction=\"swipeDirection\"\n    :duration=\"props.duration\"\n    :disable-swipe=\"props.disableSwipe\"\n    :swipe-threshold=\"props.swipeThreshold\"\n  >\n    <RekaToastViewport\n      :hotkey=\"hotkey\"\n      :label=\"label\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :class=\"composeClassName(styles.region(), props.class)\"\n    >\n      <Toast\n        v-for=\"toast in viewportToasts\"\n        :key=\"toast.id\"\n        :open=\"toast.open\"\n        :duration=\"toast.duration\"\n        :position=\"toast.position\"\n        :variant=\"toast.variant\"\n        :class=\"composeClassName(props.classNames?.toast)\"\n        @update:open=\"(open) => handleOpenChange(toast.id, open)\"\n      >\n        <div :class=\"composeClassName(styles.content(), props.classNames?.content)\">\n          <ToastTitle :class=\"composeClassName(props.classNames?.title)\">{{ toast.title }}</ToastTitle>\n          <ToastDescription v-if=\"toast.description\" :class=\"composeClassName(props.classNames?.description)\">\n            {{ toast.description }}\n          </ToastDescription>\n        </div>\n        <div :class=\"composeClassName('flex shrink-0 items-center gap-1 ml-auto', props.classNames?.actions)\">\n          <ToastAction\n            v-if=\"toast.action\"\n            :alt-text=\"toast.action.label\"\n            :class=\"composeClassName(props.classNames?.action)\"\n            @click=\"toast.action!.onClick\"\n          >\n            {{ toast.action.label }}\n          </ToastAction>\n          <ToastClose :class=\"composeClassName(props.classNames?.close)\" @click=\"dismiss(toast.id)\" />\n        </div>\n      </Toast>\n      <slot />\n    </RekaToastViewport>\n  </RekaToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EAiCd,MAAM,EAAE,QAAQ,SAAS,WAAW,UAAS;EAE7C,SAAS,iBAAiB,IAAY,MAAe;AACnD,OAAI,CAAC,MAAM;AACT,YAAQ,GAAE;AACV,qBAAiB,OAAO,GAAG,EAAE,IAAG;;;EAIpC,MAAM,mBAAmB,eAA2C;AASlE,UAR+D;IAC7D,aAAa;IACb,cAAc;IACd,YAAY;IACZ,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACjB,CACW,MAAM,aAAa;IAC/B;EAED,MAAM,SAAS,eAAe,cAAc,EAAE,WAAW,iBAAiB,OAAO,CAAC,CAAA;EAElF,MAAM,iBAAiB,eACrB,OAAO,MAAM,QAAQ,OAAO,EAAE,YAAY,oBAAoB,MAAM,SAAS,CAC/E;;uBAKE,YA2CoB,MAAA,cAAA,EAAA;IA1CjB,mBAAiB,QAAA;IACjB,UAAU,MAAM;IAChB,iBAAe,MAAM;IACrB,mBAAiB,MAAM;;2BAsCJ,CApCpB,YAoCoB,MAAA,cAAA,EAAA;KAnCjB,QAAQ,QAAA;KACR,OAAO,QAAA;KACP,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,QAAM,EAAI,MAAM,MAAK,CAAA;;4BAGpB,EAAA,UAAA,KAAA,EADjC,mBA2BQ,UAAA,MAAA,WA1BU,eAAA,QAAT,UAAK;0BADd,YA2BQ,eAAA;OAzBL,KAAK,MAAM;OACX,MAAM,MAAM;OACZ,UAAU,MAAM;OAChB,UAAU,MAAM;OAChB,SAAS,MAAM;OACf,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAM,YAAY,MAAK,CAAA;OAC/C,kBAAc,SAAS,iBAAiB,MAAM,IAAI,KAAI;;8BAOjD,CALN,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACvE,YAA6F,oBAAA,EAAhF,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAM,YAAY,MAAK,CAAA,EAAA,EAAA;+BAAoB,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;4BACrD,MAAM,eAAA,WAAA,EAA9B,YAEmB,0BAAA;;QAFyB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAM,YAAY,YAAW,CAAA;;+BACxE,CAAA,gBAAA,gBAApB,MAAM,YAAW,EAAA,EAAA,CAAA,CAAA;;iEAGxB,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,iBAAgB,CAAA,4CAA6C,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CAEzF,MAAM,UAAA,WAAA,EADd,YAOc,qBAAA;;QALX,YAAU,MAAM,OAAO;QACvB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAM,YAAY,OAAM,CAAA;QAChD,SAAO,MAAM,OAAQ;;+BAEE,CAAA,gBAAA,gBAArB,MAAM,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;2CAEvB,YAA4F,oBAAA;QAA/E,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAM,YAAY,MAAK,CAAA;QAAI,UAAK,WAAE,MAAA,QAAO,CAAC,MAAM,GAAE;;;;;;;;;;;gBAG3F,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}