@auronui/vue 1.0.2 → 1.0.4

package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { composeClassName } from "../../utils/composeClassName.js";
 import { useComboBoxProvide } from "./ComboBox.context.js";
-import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, toRef, unref, useId, withCtx } from "vue";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, toRef, unref, useId, watch, withCtx } from "vue";
 import { comboBoxVariants } from "@auronui/styles";
 import { ComboboxRoot } from "reka-ui";
 //#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
@@ -77,17 +77,52 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			if (props.filterFunction) return props.filterFunction;
 			return (itemText, searchTerm) => itemText.toLowerCase().includes(searchTerm.toLowerCase());
 		});
-		const displayValue = computed(() => (val) => {
-			if (!val) return "";
-			const item = props.items.find((i) => i.value === val);
-			return item?.label ?? item?.textValue ?? val;
+		const slotItemRegistry = ref(/* @__PURE__ */ new Map());
+		function registerItem(value, label) {
+			const next = new Map(slotItemRegistry.value);
+			next.set(value, label);
+			slotItemRegistry.value = next;
+		}
+		function unregisterItem(value) {
+			const next = new Map(slotItemRegistry.value);
+			next.delete(value);
+			slotItemRegistry.value = next;
+		}
+		function labelFor(value) {
+			if (!value) return "";
+			const item = props.items.find((i) => i.value === value);
+			if (item) return item.label ?? item.textValue ?? value;
+			return slotItemRegistry.value.get(value) ?? value;
+		}
+		function valueFor(label) {
+			if (!label) return "";
+			const item = props.items.find((i) => (i.label ?? i.textValue ?? i.value) === label);
+			if (item) return item.value;
+			for (const [value, lbl] of slotItemRegistry.value) if (lbl === label) return value;
+			return label;
+		}
+		const internalValue = ref(labelFor(props.modelValue));
+		const displayValue = computed(() => (val) => val);
+		watch(() => props.modelValue, (val) => {
+			const next = labelFor(val);
+			if (internalValue.value !== next) internalValue.value = next;
+		});
+		function handleModelValueUpdate(emitted) {
+			internalValue.value = emitted;
+			emit("update:modelValue", valueFor(emitted));
+		}
+		watch(slotItemRegistry, () => {
+			const next = labelFor(props.modelValue);
+			if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? "")) internalValue.value = next;
 		});
 		useComboBoxProvide({
 			isDisabled: toRef(props, "isDisabled"),
 			isInvalid: toRef(props, "isInvalid"),
 			fullWidth: toRef(props, "fullWidth"),
 			slots: slotFns,
-			displayValue
+			displayValue,
+			registerItem,
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
@@ -101,20 +136,20 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"data-slot": "label"
 				}, [createTextVNode(toDisplayString(props.label) + " ", 1), props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)], 8, _hoisted_2)) : createCommentVNode("", true),
 				createVNode(unref(ComboboxRoot), {
-					"model-value": props.modelValue,
-					"default-value": props.defaultValue,
+					modelValue: internalValue.value,
+					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
+					"default-value": props.defaultValue ? labelFor(props.defaultValue) : void 0,
 					open: props.open,
 					"default-open": props.defaultOpen,
 					disabled: props.isDisabled,
 					required: props.isRequired,
 					"filter-function": effectiveFilter.value,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
-					"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
+					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
 				}, 8, [
-					"model-value",
+					"modelValue",
 					"default-value",
 					"open",
 					"default-open",

package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useId } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n}>()\n\nconst labelId = useId()\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Map a stored value back to its human-readable label for the input display\nconst displayValue = computed(() => (val: string): string => {\n  if (!val) return ''\n  const item = props.items.find(i => i.value === val)\n  return item?.label ?? item?.textValue ?? val\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      :model-value=\"props.modelValue\"\n      :default-value=\"props.defaultValue\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n      @update:open=\"emit('update:open', $event)\"\n    >\n      <slot />\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAqCd,MAAM,OAAO;EAKb,MAAM,UAAU,OAAM;EAEtB,MAAM,UAAU,eACd,iBAAiB,EACf,WAAW,MAAM,WAClB,CAAA,CACH;EAGA,MAAM,kBAAkB,eAAe;AACrC,OAAI,MAAM,eAAgB,QAAO,MAAM;AACvC,WAAQ,UAAkB,eACxB,SAAS,aAAa,CAAC,SAAS,WAAW,aAAa,CAAA;IAC3D;EAGD,MAAM,eAAe,gBAAgB,QAAwB;AAC3D,OAAI,CAAC,IAAK,QAAO;GACjB,MAAM,OAAO,MAAM,MAAM,MAAK,MAAK,EAAE,UAAU,IAAG;AAClD,UAAO,MAAM,SAAS,MAAM,aAAa;IAC1C;AAED,qBAAmB;GACjB,YAAY,MAAM,OAAO,aAAa;GACtC,WAAW,MAAM,OAAO,YAAY;GACpC,WAAW,MAAM,OAAO,YAAY;GACpC,OAAO;GACP;GACD,CAAA;;uBAIC,mBAiDM,OAAA;IAhDH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,gBAAc,MAAM,aAAa,KAAA;IAClC,aAAU;;IAGF,MAAM,SAAA,WAAA,EADd,mBAUQ,SAAA;;KARL,IAAI,MAAA,QAAO;KACZ,aAAU;wCAEP,MAAM,MAAK,GAAG,KACjB,EAAA,EACQ,MAAM,cAAA,WAAA,EADd,mBAGU,QAHV,YAGC,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAGL,YAYe,MAAA,aAAA,EAAA;KAXZ,eAAa,MAAM;KACnB,iBAAe,MAAM;KACrB,MAAM,MAAM;KACZ,gBAAc,MAAM;KACpB,UAAU,MAAM;KAChB,UAAU,MAAM;KAChB,mBAAiB,gBAAA;KACjB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,OAAM;KACpD,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,OAAM;;4BAEhC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;IAIF,MAAM,eAAgB,MAAM,aAAa,MAAM,gBAAA,WAAA,EADvD,mBAiBM,OAjBN,YAiBM,CAZI,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAMI,KANJ,YAMI,gBADC,MAAM,aAAY,EAAA,EAAA,IAGV,MAAM,eAAA,WAAA,EADnB,mBAKI,KALJ,YAKI,gBADC,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"ComboBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId, watch } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n}>()\n\nconst labelId = useId()\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Registry for slot-rendered items: value → label (populated by ComboBoxItem at mount).\n// Replaced with a new Map instance on each mutation so Vue's ref() reactivity tracks changes.\nconst slotItemRegistry = ref(new Map<string, string>())\n\nfunction registerItem(value: string, label: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.set(value, label)\n  slotItemRegistry.value = next\n}\n\nfunction unregisterItem(value: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.delete(value)\n  slotItemRegistry.value = next\n}\n\n// Resolve a user-facing value (\"us\") to the label text used internally by Reka.\n// Priority: items prop entry > slot registry > identity fallback\nfunction labelFor(value: string | undefined): string {\n  if (!value) return ''\n  const item = props.items.find(i => i.value === value)\n  if (item) return item.label ?? item.textValue ?? value\n  return slotItemRegistry.value.get(value) ?? value\n}\n\n// Resolve a Reka-internal label text back to the user-facing value.\nfunction valueFor(label: string): string {\n  if (!label) return ''\n  // Check items prop first\n  const item = props.items.find(i => (i.label ?? i.textValue ?? i.value) === label)\n  if (item) return item.value\n  // Check slot registry\n  for (const [value, lbl] of slotItemRegistry.value) {\n    if (lbl === label) return value\n  }\n  return label\n}\n\n// internalValue holds the label text that Reka sees as its modelValue.\n// This lets Reka write the label directly into the input without a displayValue function.\nconst internalValue = ref(labelFor(props.modelValue))\n\n// Map a stored value back to its human-readable label for the input display.\n// Used as a no-op pass-through since internalValue already holds the label.\nconst displayValue = computed(() => (val: string): string => val)\n\n// Parent → internal: when the user's v-model changes, resolve to label text\nwatch(() => props.modelValue, (val) => {\n  const next = labelFor(val)\n  if (internalValue.value !== next) internalValue.value = next\n})\n\n// Internal → parent: when Reka emits a label text (after selection), translate to real value\nfunction handleModelValueUpdate(emitted: string) {\n  internalValue.value = emitted\n  emit('update:modelValue', valueFor(emitted))\n}\n\n// When slot items register (children mount after parent), re-resolve internalValue.\n// This covers the case where modelValue is set before children have mounted.\nwatch(slotItemRegistry, () => {\n  const next = labelFor(props.modelValue)\n  if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? '')) {\n    internalValue.value = next\n  }\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n  registerItem,\n  unregisterItem,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      v-model=\"internalValue\"\n      :default-value=\"props.defaultValue ? labelFor(props.defaultValue) : undefined\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"handleModelValueUpdate($event)\"\n      @update:open=\"emit('update:open', $event)\"\n    >\n      <slot />\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/combo-box/ComboBoxContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContent.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxContent.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = slots.default?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { motion } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/motion/index.js";
 import { AnimatePresence_default } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/animate-presence/AnimatePresence.js";
 import { useComboBoxInject } from "./ComboBox.context.js";
-import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots, watchEffect, withCtx } from "vue";
 import { ComboboxContent, ComboboxPortal, ComboboxViewport, injectComboboxRootContext } from "reka-ui";
 //#region src/components/combo-box/ComboBoxContent.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -14,6 +14,40 @@ var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const props = __props;
 		const ctx = useComboBoxInject();
 		const comboboxRootContext = injectComboboxRootContext();
+		const slots = useSlots();
+		function extractNodeText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractNodeText(n.children);
+				return "";
+			}).join("");
+		}
+		function walkAndRegister(nodes) {
+			for (const node of nodes) {
+				if (node.props && typeof node.props.value === "string") {
+					const value = node.props.value;
+					const children = node.children;
+					if (children && typeof children === "object" && "default" in children) {
+						const slotFn = children.default;
+						if (typeof slotFn === "function") {
+							const text = extractNodeText(slotFn()).trim();
+							if (text) ctx.registerItem(value, text);
+						}
+					} else if (typeof children === "string") {
+						const text = children.trim();
+						if (text) ctx.registerItem(value, text);
+					} else if (Array.isArray(children)) {
+						const text = extractNodeText(children).trim();
+						if (text) ctx.registerItem(value, text);
+					}
+				}
+				if (Array.isArray(node.children)) walkAndRegister(node.children);
+			}
+		}
+		watchEffect(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxPortal), null, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;;uBAIpD,YAuBiB,MAAA,eAAA,EAAA,MAAA;2BADG,CArBlB,YAqBkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAlBV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAmBkB,MAAA,gBAAA,EAAA;;MAjBhB,UAAS;MACR,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAaG,CAXb,YAWa,MAAA,OAAA,CAAA,KAAA;OAVV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAKZ,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,aAAU,YAAU,EAAA;+BAC5B,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}
+{"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = slots.default?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;EAItD,MAAM,QAAQ,UAAS;EAEvB,SAAS,gBAAgB,OAAwB;AAC/C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,gBAAgB,EAAE,SAAmB;AAC3E,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,SAAS,gBAAgB,OAAgB;AACvC,QAAK,MAAM,QAAQ,OAAO;AAExB,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,UAAU,UAAU;KACtD,MAAM,QAAQ,KAAK,MAAM;KACzB,MAAM,WAAW,KAAK;AACtB,SAAI,YAAY,OAAO,aAAa,YAAY,aAAa,UAAU;MACrE,MAAM,SAAU,SAA2C;AAC3D,UAAI,OAAO,WAAW,YAAY;OAChC,MAAM,OAAO,gBAAgB,QAAQ,CAAC,CAAC,MAAK;AAC5C,WAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;gBAE/B,OAAO,aAAa,UAAU;MACvC,MAAM,OAAO,SAAS,MAAK;AAC3B,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;gBAC7B,MAAM,QAAQ,SAAS,EAAE;MAClC,MAAM,OAAO,gBAAgB,SAAoB,CAAC,MAAK;AACvD,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;;AAI1C,QAAI,MAAM,QAAQ,KAAK,SAAS,CAC9B,iBAAgB,KAAK,SAAmB;;;AAM9C,oBAAkB;GAChB,MAAM,SAAS,MAAM,WAAU;AAC/B,OAAI,OAAQ,iBAAgB,OAAM;IACnC;;uBAIC,YAuBiB,MAAA,eAAA,EAAA,MAAA;2BADG,CArBlB,YAqBkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAlBV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAmBkB,MAAA,gBAAA,EAAA;;MAjBhB,UAAS;MACR,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAaG,CAXb,YAWa,MAAA,OAAA,CAAA,KAAA;OAVV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAKZ,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,aAAU,YAAU,EAAA;+BAC5B,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"props.value\"\n    :text-value=\"props.textValue ?? props.value\"\n    :disabled=\"props.isDisabled\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </ComboboxItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots = useSlots()\nconst ctx = useComboBoxInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed(() => {\n  const vnodes = slots.default?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// Register this item's value→label mapping with the parent ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </ComboboxItem>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
-import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { useComboBoxInject } from "./ComboBox.context.js";
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
 import { ComboboxItem, ComboboxItemIndicator } from "reka-ui";
 //#region src/components/combo-box/ComboBoxItem.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ComboBoxItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -14,11 +14,32 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
+		const ctx = useComboBoxInject();
+		function extractText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractText(n.children);
+				return "";
+			}).join("");
+		}
+		const displayText = computed(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		onMounted(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		onUnmounted(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxItem), {
-				value: props.value,
-				"text-value": props.textValue ?? props.value,
+				value: displayText.value,
+				"text-value": displayText.value,
 				disabled: props.isDisabled,
+				"data-item-value": props.value,
 				class: "list-box-item list-box-item--default",
 				"data-slot": "list-box-item"
 			}, {
@@ -50,7 +71,8 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			}, 8, [
 				"value",
 				"text-value",
-				"disabled"
+				"disabled",
+				"data-item-value"
 			]);
 		};
 	}

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"props.value\"\n    :text-value=\"props.textValue ?? props.value\"\n    :disabled=\"props.isDisabled\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBAaZ,YAgCe,MAAA,aAAA,EAAA;IA/BZ,OAAO,MAAM;IACb,cAAY,MAAM,aAAa,MAAM;IACrC,UAAU,MAAM;IACjB,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,YAqBwB,MAAA,sBAAA,EAAA;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
+{"version":3,"file":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots = useSlots()\nconst ctx = useComboBoxInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed(() => {\n  const vnodes = slots.default?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// Register this item's value→label mapping with the parent ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <ComboboxItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ComboboxItemIndicator>\n    <slot name=\"endContent\" />\n  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAQ,UAAS;EACvB,MAAM,MAAM,mBAAkB;EAG9B,SAAS,YAAY,OAAwB;AAC3C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,YAAY,EAAE,SAAmB;AACvE,WAAO;KACP,CAAC,KAAK,GAAE;;EAKZ,MAAM,cAAc,eAAe;GACjC,MAAM,SAAS,MAAM,WAAU;AAC/B,OAAI,CAAC,OAAQ,QAAO,MAAM;AAC1B,UAAO,YAAY,OAAO,CAAC,MAAM,IAAI,MAAM;IAC5C;AAID,kBAAgB;AACd,OAAI,aAAa,MAAM,OAAO,YAAY,MAAK;IAChD;AAED,oBAAkB;AAChB,OAAI,eAAe,MAAM,MAAK;IAC/B;;uBAIC,YAiCe,MAAA,aAAA,EAAA;IAhCZ,OAAO,YAAA;IACP,cAAY,YAAA;IACZ,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACxB,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,YAqBwB,MAAA,sBAAA,EAAA;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}

package/dist/components/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\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  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  class?: string\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  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    modelValue.value = val ?? null\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :number-of-months=\"visibleMonths\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\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  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  class?: string\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  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :number-of-months=\"visibleMonths\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -79,7 +79,12 @@ var DatePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const calendarValue = computed({
 			get: () => modelValue.value ?? void 0,
 			set: (val) => {
-				modelValue.value = val ?? null;
+				if (val != null && modelValue.value != null && "hour" in modelValue.value) modelValue.value = modelValue.value.set({
+					year: val.year,
+					month: val.month,
+					day: val.day
+				});
+				else modelValue.value = val ?? null;
 				if (props.closeOnSelect && val != null) openModel.value = false;
 			}
 		});

package/dist/components/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\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  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  class?: string\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  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    modelValue.value = val ?? null\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :number-of-months=\"visibleMonths\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\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  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  class?: string\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  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :number-of-months=\"visibleMonths\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: string\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <!-- Step header -->\n      <div\n        :class=\"slotFns.stepHeader()\"\n        data-slot=\"step-header\"\n      >\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </button>\n\n        <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span\n            v-if=\"activeStep === 'time'\"\n            :class=\"slotFns.doneLabel()\"\n          >Done</span>\n          <svg\n            v-else\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div\n        :class=\"slotFns.panelWrap()\"\n        style=\"overflow: hidden;\"\n      >\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}