@auronui/vue 1.0.2 → 1.0.4

package/dist/components/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n  defineProps<{\n    validationMode?: ValidationMode\n    isDisabled?: boolean\n    class?: string\n  }>(),\n  {\n    validationMode: 'on-submit',\n    isDisabled: false,\n    class: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n  invalid: [errors: Record<string, string>]\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst fields = new Map<string, FieldRegistration>()\n\nfunction registerField(reg: FieldRegistration): void {\n  fields.set(reg.name, reg)\n}\n\nfunction unregisterField(name: string): void {\n  fields.delete(name)\n  const next = { ...errors.value }\n  delete next[name]\n  errors.value = next\n}\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n  const field = fields.get(name)\n  if (!field) return\n  const error = await runValidation(field.getValue(), field.rules, field.validate)\n  const next = { ...errors.value }\n  if (error) {\n    next[name] = error\n  } else {\n    delete next[name]\n  }\n  errors.value = next\n}\n\nfunction setErrors(newErrors: Record<string, string>): void {\n  errors.value = { ...errors.value, ...newErrors }\n  isSubmitting.value = false\n}\n\nasync function handleSubmit(): Promise<void> {\n  isSubmitting.value = true\n\n  const results = await Promise.all(\n    [...fields.entries()].map(async ([name, field]) => {\n      const error = await runValidation(field.getValue(), field.rules, field.validate)\n      return { name, error }\n    }),\n  )\n\n  const nextErrors: Record<string, string> = {}\n  for (const { name, error } of results) {\n    if (error) nextErrors[name] = error\n  }\n\n  if (Object.keys(nextErrors).length > 0) {\n    errors.value = nextErrors\n    isSubmitting.value = false\n    emit('invalid', nextErrors)\n    return\n  }\n\n  errors.value = {}\n\n  const values: Record<string, unknown> = {}\n  for (const [name, field] of fields.entries()) {\n    values[name] = field.getValue()\n  }\n\n  emit('submit', { values, setErrors })\n}\n\nconst ctx: FormContext = {\n  errors,\n  isSubmitting,\n  isDisabled: computed(() => props.isDisabled),\n  validationMode: computed(() => props.validationMode),\n  registerField,\n  unregisterField,\n  triggerFieldValidation,\n  setErrors,\n}\n\nprovide(formContextKey, ctx)\n</script>\n\n<template>\n  <form\n    :class=\"props.class\"\n    novalidate\n    @submit.prevent=\"handleSubmit\"\n  >\n    <slot\n      :is-submitting=\"isSubmitting\"\n      :is-disabled=\"props.isDisabled\"\n      :errors=\"errors\"\n    />\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { formContextKey } from "./form.context.js";
+import { runValidation } from "./validation.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, ref, renderSlot, withModifiers } from "vue";
+//#region src/components/form/Form.vue?vue&type=script&setup=true&lang.ts
+var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		validationMode: { default: "on-submit" },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		class: { default: void 0 }
+	},
+	emits: ["submit", "invalid"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const errors = ref({});
+		const isSubmitting = ref(false);
+		const fields = /* @__PURE__ */ new Map();
+		function registerField(reg) {
+			fields.set(reg.name, reg);
+		}
+		function unregisterField(name) {
+			fields.delete(name);
+			const next = { ...errors.value };
+			delete next[name];
+			errors.value = next;
+		}
+		async function triggerFieldValidation(name) {
+			const field = fields.get(name);
+			if (!field) return;
+			const error = await runValidation(field.getValue(), field.rules, field.validate);
+			const next = { ...errors.value };
+			if (error) next[name] = error;
+			else delete next[name];
+			errors.value = next;
+		}
+		function setErrors(newErrors) {
+			errors.value = {
+				...errors.value,
+				...newErrors
+			};
+			isSubmitting.value = false;
+		}
+		async function handleSubmit() {
+			isSubmitting.value = true;
+			const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
+				return {
+					name,
+					error: await runValidation(field.getValue(), field.rules, field.validate)
+				};
+			}));
+			const nextErrors = {};
+			for (const { name, error } of results) if (error) nextErrors[name] = error;
+			if (Object.keys(nextErrors).length > 0) {
+				errors.value = nextErrors;
+				isSubmitting.value = false;
+				emit("invalid", nextErrors);
+				return;
+			}
+			errors.value = {};
+			const values = {};
+			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			emit("submit", {
+				values,
+				setErrors
+			});
+		}
+		provide(formContextKey, {
+			errors,
+			isSubmitting,
+			isDisabled: computed(() => props.isDisabled),
+			validationMode: computed(() => props.validationMode),
+			registerField,
+			unregisterField,
+			triggerFieldValidation,
+			setErrors
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: normalizeClass(props.class),
+				novalidate: "",
+				onSubmit: withModifiers(handleSubmit, ["prevent"])
+			}, [renderSlot(_ctx.$slots, "default", {
+				isSubmitting: isSubmitting.value,
+				isDisabled: props.isDisabled,
+				errors: errors.value
+			})], 34);
+		};
+	}
+});
+//#endregion
+export { Form_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Form.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n  defineProps<{\n    validationMode?: ValidationMode\n    isDisabled?: boolean\n    class?: string\n  }>(),\n  {\n    validationMode: 'on-submit',\n    isDisabled: false,\n    class: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n  invalid: [errors: Record<string, string>]\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst fields = new Map<string, FieldRegistration>()\n\nfunction registerField(reg: FieldRegistration): void {\n  fields.set(reg.name, reg)\n}\n\nfunction unregisterField(name: string): void {\n  fields.delete(name)\n  const next = { ...errors.value }\n  delete next[name]\n  errors.value = next\n}\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n  const field = fields.get(name)\n  if (!field) return\n  const error = await runValidation(field.getValue(), field.rules, field.validate)\n  const next = { ...errors.value }\n  if (error) {\n    next[name] = error\n  } else {\n    delete next[name]\n  }\n  errors.value = next\n}\n\nfunction setErrors(newErrors: Record<string, string>): void {\n  errors.value = { ...errors.value, ...newErrors }\n  isSubmitting.value = false\n}\n\nasync function handleSubmit(): Promise<void> {\n  isSubmitting.value = true\n\n  const results = await Promise.all(\n    [...fields.entries()].map(async ([name, field]) => {\n      const error = await runValidation(field.getValue(), field.rules, field.validate)\n      return { name, error }\n    }),\n  )\n\n  const nextErrors: Record<string, string> = {}\n  for (const { name, error } of results) {\n    if (error) nextErrors[name] = error\n  }\n\n  if (Object.keys(nextErrors).length > 0) {\n    errors.value = nextErrors\n    isSubmitting.value = false\n    emit('invalid', nextErrors)\n    return\n  }\n\n  errors.value = {}\n\n  const values: Record<string, unknown> = {}\n  for (const [name, field] of fields.entries()) {\n    values[name] = field.getValue()\n  }\n\n  emit('submit', { values, setErrors })\n}\n\nconst ctx: FormContext = {\n  errors,\n  isSubmitting,\n  isDisabled: computed(() => props.isDisabled),\n  validationMode: computed(() => props.validationMode),\n  registerField,\n  unregisterField,\n  triggerFieldValidation,\n  setErrors,\n}\n\nprovide(formContextKey, ctx)\n</script>\n\n<template>\n  <form\n    :class=\"props.class\"\n    novalidate\n    @submit.prevent=\"handleSubmit\"\n  >\n    <slot\n      :is-submitting=\"isSubmitting\"\n      :is-disabled=\"props.isDisabled\"\n      :errors=\"errors\"\n    />\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAad,MAAM,OAAO;EAKb,MAAM,SAAS,IAA4B,EAAE,CAAA;EAC7C,MAAM,eAAe,IAAI,MAAK;EAC9B,MAAM,yBAAS,IAAI,KAA+B;EAElD,SAAS,cAAc,KAA8B;AACnD,UAAO,IAAI,IAAI,MAAM,IAAG;;EAG1B,SAAS,gBAAgB,MAAoB;AAC3C,UAAO,OAAO,KAAI;GAClB,MAAM,OAAO,EAAE,GAAG,OAAO,OAAM;AAC/B,UAAO,KAAK;AACZ,UAAO,QAAQ;;EAGjB,eAAe,uBAAuB,MAA6B;GACjE,MAAM,QAAQ,OAAO,IAAI,KAAI;AAC7B,OAAI,CAAC,MAAO;GACZ,MAAM,QAAQ,MAAM,cAAc,MAAM,UAAU,EAAE,MAAM,OAAO,MAAM,SAAQ;GAC/E,MAAM,OAAO,EAAE,GAAG,OAAO,OAAM;AAC/B,OAAI,MACF,MAAK,QAAQ;OAEb,QAAO,KAAK;AAEd,UAAO,QAAQ;;EAGjB,SAAS,UAAU,WAAyC;AAC1D,UAAO,QAAQ;IAAE,GAAG,OAAO;IAAO,GAAG;IAAU;AAC/C,gBAAa,QAAQ;;EAGvB,eAAe,eAA8B;AAC3C,gBAAa,QAAQ;GAErB,MAAM,UAAU,MAAM,QAAQ,IAC5B,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,WAAW;AAEjD,WAAO;KAAE;KAAM,OADD,MAAM,cAAc,MAAM,UAAU,EAAE,MAAM,OAAO,MAAM,SAAQ;KAC1D;KACrB,CACJ;GAEA,MAAM,aAAqC,EAAC;AAC5C,QAAK,MAAM,EAAE,MAAM,WAAW,QAC5B,KAAI,MAAO,YAAW,QAAQ;AAGhC,OAAI,OAAO,KAAK,WAAW,CAAC,SAAS,GAAG;AACtC,WAAO,QAAQ;AACf,iBAAa,QAAQ;AACrB,SAAK,WAAW,WAAU;AAC1B;;AAGF,UAAO,QAAQ,EAAC;GAEhB,MAAM,SAAkC,EAAC;AACzC,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,SAAS,CAC1C,QAAO,QAAQ,MAAM,UAAS;AAGhC,QAAK,UAAU;IAAE;IAAQ;IAAW,CAAA;;AActC,UAAQ,gBAXiB;GACvB;GACA;GACA,YAAY,eAAe,MAAM,WAAW;GAC5C,gBAAgB,eAAe,MAAM,eAAe;GACpD;GACA;GACA;GACA;GACF,CAE2B;;uBAIzB,mBAUO,QAAA;IATJ,OAAK,eAAE,MAAM,MAAK;IACnB,YAAA;IACC,UAAM,cAAU,cAAY,CAAA,UAAA,CAAA;OAE7B,WAIE,KAAA,QAAA,WAAA;IAHC,cAAe,aAAA;IACf,YAAa,MAAM;IACnB,QAAQ,OAAA"}

package/dist/components/form/FormField.js

@@ -0,0 +1,7 @@
+import FormField_vue_vue_type_script_setup_true_lang_default from "./FormField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/form/FormField.vue
+var FormField_default = FormField_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormField_default as default };
+
+//# sourceMappingURL=FormField.js.map

package/dist/components/form/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n  name: string\n  rules?: FieldRules\n  validate?: CustomValidator\n  /** Override validation mode — used in standalone mode (outside <Form>) or to override the Form's mode for a single field. */\n  validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// Standalone mode: local error state when used outside <Form>\nconst localError = ref<string | undefined>(undefined)\n\nconst fieldError = computed<string | undefined>(() =>\n  ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\n// Once a field has shown an error, validate on every change so errors clear as the user types.\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\nonMounted(() => {\n  ctx?.registerField({\n    name: props.name,\n    getValue: () => modelValue.value,\n    rules: props.rules,\n    validate: props.validate,\n  })\n})\n\nonUnmounted(() => {\n  ctx?.unregisterField(props.name)\n})\n\nasync function triggerValidation(val: unknown): Promise<void> {\n  const error = await runValidation(val, props.rules, props.validate)\n  if (ctx) {\n    const next = { ...ctx.errors.value }\n    if (error) {\n      next[props.name] = error\n    } else {\n      delete next[props.name]\n    }\n    ctx.errors.value = next\n  } else {\n    localError.value = error\n  }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n  modelValue.value = val\n  if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n    await triggerValidation(val)\n  }\n}\n\nasync function handleBlur(): Promise<void> {\n  if (validationMode.value === 'on-blur') {\n    await triggerValidation(modelValue.value)\n  }\n}\n\nconst fieldProps = computed(() => ({\n  name: props.name,\n  modelValue: modelValue.value,\n  'onUpdate:modelValue': handleUpdate,\n  isInvalid: isInvalid.value,\n  errorMessage: fieldError.value,\n  isDisabled: isDisabled.value,\n  onBlur: handleBlur,\n}))\n</script>\n\n<template>\n  <slot :field-props=\"fieldProps\" />\n</template>\n"],"mappings":""}

package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { useFormInject } from "./form.context.js";
+import { runValidation } from "./validation.js";
+import { computed, defineComponent, mergeModels, onMounted, onUnmounted, ref, renderSlot, useModel, watch } from "vue";
+//#region src/components/form/FormField.vue?vue&type=script&setup=true&lang.ts
+var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "FormField",
+	props: /* @__PURE__ */ mergeModels({
+		name: {},
+		rules: {},
+		validate: { type: Function },
+		validationMode: {}
+	}, {
+		"modelValue": { default: void 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const ctx = useFormInject();
+		const localError = ref(void 0);
+		const fieldError = computed(() => ctx ? ctx.errors.value[props.name] : localError.value);
+		const hasBeenInvalid = ref(false);
+		watch(fieldError, (error) => {
+			if (error) hasBeenInvalid.value = true;
+		});
+		const isInvalid = computed(() => !!fieldError.value);
+		const isDisabled = computed(() => ctx?.isDisabled.value ?? false);
+		const validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
+		onMounted(() => {
+			ctx?.registerField({
+				name: props.name,
+				getValue: () => modelValue.value,
+				rules: props.rules,
+				validate: props.validate
+			});
+		});
+		onUnmounted(() => {
+			ctx?.unregisterField(props.name);
+		});
+		async function triggerValidation(val) {
+			const error = await runValidation(val, props.rules, props.validate);
+			if (ctx) {
+				const next = { ...ctx.errors.value };
+				if (error) next[props.name] = error;
+				else delete next[props.name];
+				ctx.errors.value = next;
+			} else localError.value = error;
+		}
+		async function handleUpdate(val) {
+			modelValue.value = val;
+			if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
+		}
+		async function handleBlur() {
+			if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
+		}
+		const fieldProps = computed(() => ({
+			name: props.name,
+			modelValue: modelValue.value,
+			"onUpdate:modelValue": handleUpdate,
+			isInvalid: isInvalid.value,
+			errorMessage: fieldError.value,
+			isDisabled: isDisabled.value,
+			onBlur: handleBlur
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+		};
+	}
+});
+//#endregion
+export { FormField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=FormField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n  name: string\n  rules?: FieldRules\n  validate?: CustomValidator\n  /** Override validation mode — used in standalone mode (outside <Form>) or to override the Form's mode for a single field. */\n  validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// Standalone mode: local error state when used outside <Form>\nconst localError = ref<string | undefined>(undefined)\n\nconst fieldError = computed<string | undefined>(() =>\n  ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\n// Once a field has shown an error, validate on every change so errors clear as the user types.\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\nonMounted(() => {\n  ctx?.registerField({\n    name: props.name,\n    getValue: () => modelValue.value,\n    rules: props.rules,\n    validate: props.validate,\n  })\n})\n\nonUnmounted(() => {\n  ctx?.unregisterField(props.name)\n})\n\nasync function triggerValidation(val: unknown): Promise<void> {\n  const error = await runValidation(val, props.rules, props.validate)\n  if (ctx) {\n    const next = { ...ctx.errors.value }\n    if (error) {\n      next[props.name] = error\n    } else {\n      delete next[props.name]\n    }\n    ctx.errors.value = next\n  } else {\n    localError.value = error\n  }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n  modelValue.value = val\n  if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n    await triggerValidation(val)\n  }\n}\n\nasync function handleBlur(): Promise<void> {\n  if (validationMode.value === 'on-blur') {\n    await triggerValidation(modelValue.value)\n  }\n}\n\nconst fieldProps = computed(() => ({\n  name: props.name,\n  modelValue: modelValue.value,\n  'onUpdate:modelValue': handleUpdate,\n  isInvalid: isInvalid.value,\n  errorMessage: fieldError.value,\n  isDisabled: isDisabled.value,\n  onBlur: handleBlur,\n}))\n</script>\n\n<template>\n  <slot :field-props=\"fieldProps\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAQd,MAAM,aAAa,SAAoB,SAAA,aAAuB;EAE9D,MAAM,MAAM,eAAc;EAG1B,MAAM,aAAa,IAAwB,KAAA,EAAS;EAEpD,MAAM,aAAa,eACjB,MAAM,IAAI,OAAO,MAAM,MAAM,QAAQ,WAAW,MAClD;EAGA,MAAM,iBAAiB,IAAI,MAAK;AAChC,QAAM,aAAa,UAAU;AAAE,OAAI,MAAO,gBAAe,QAAQ;IAAM;EACvE,MAAM,YAAY,eAAe,CAAC,CAAC,WAAW,MAAK;EACnD,MAAM,aAAa,eAAe,KAAK,WAAW,SAAS,MAAK;EAChE,MAAM,iBAAiB,eAAe,MAAM,kBAAkB,KAAK,eAAe,SAAS,YAAW;AAEtG,kBAAgB;AACd,QAAK,cAAc;IACjB,MAAM,MAAM;IACZ,gBAAgB,WAAW;IAC3B,OAAO,MAAM;IACb,UAAU,MAAM;IACjB,CAAA;IACF;AAED,oBAAkB;AAChB,QAAK,gBAAgB,MAAM,KAAI;IAChC;EAED,eAAe,kBAAkB,KAA6B;GAC5D,MAAM,QAAQ,MAAM,cAAc,KAAK,MAAM,OAAO,MAAM,SAAQ;AAClE,OAAI,KAAK;IACP,MAAM,OAAO,EAAE,GAAG,IAAI,OAAO,OAAM;AACnC,QAAI,MACF,MAAK,MAAM,QAAQ;QAEnB,QAAO,KAAK,MAAM;AAEpB,QAAI,OAAO,QAAQ;SAEnB,YAAW,QAAQ;;EAIvB,eAAe,aAAa,KAA6B;AACvD,cAAW,QAAQ;AACnB,OAAI,eAAe,UAAU,eAAe,eAAe,MACzD,OAAM,kBAAkB,IAAG;;EAI/B,eAAe,aAA4B;AACzC,OAAI,eAAe,UAAU,UAC3B,OAAM,kBAAkB,WAAW,MAAK;;EAI5C,MAAM,aAAa,gBAAgB;GACjC,MAAM,MAAM;GACZ,YAAY,WAAW;GACvB,uBAAuB;GACvB,WAAW,UAAU;GACrB,cAAc,WAAW;GACzB,YAAY,WAAW;GACvB,QAAQ;GACT,EAAC;;UAIA,WAAkC,KAAA,QAAA,WAAA,EAA3B,YAAa,WAAA,OAAU,CAAA"}

package/dist/components/form/form.context.js

@@ -0,0 +1,15 @@
+import { createContext } from "../../utils/context.js";
+import { inject } from "vue";
+//#region src/components/form/form.context.ts
+var { useProvide: useFormProvide, useInject: _useFormInjectStrict, key: formContextKey } = createContext("Form");
+/**
+* Inject Form context. Returns null when called outside a <Form> — callers
+* handle standalone mode themselves.
+*/
+function useFormInject() {
+	return inject(formContextKey, null);
+}
+//#endregion
+export { formContextKey, useFormInject };
+
+//# sourceMappingURL=form.context.js.map

package/dist/components/form/form.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/components/form/form.context.ts"],"sourcesContent":["import { inject, type Ref, type ComputedRef } from 'vue'\nimport { createContext } from '../../utils/context'\nimport type { FieldRules, CustomValidator } from './validation'\n\nexport type { FieldRules, CustomValidator }\n\nexport type ValidationMode = 'on-submit' | 'on-blur' | 'on-change'\n\nexport interface FieldRegistration {\n  name: string\n  getValue: () => unknown\n  rules?: FieldRules\n  validate?: CustomValidator\n}\n\nexport interface FormContext {\n  errors: Ref<Record<string, string>>\n  isSubmitting: Ref<boolean>\n  isDisabled: ComputedRef<boolean>\n  validationMode: ComputedRef<ValidationMode>\n  registerField(reg: FieldRegistration): void\n  unregisterField(name: string): void\n  triggerFieldValidation(name: string): Promise<void>\n  setErrors(newErrors: Record<string, string>): void\n}\n\nexport const {\n  useProvide: useFormProvide,\n  useInject: _useFormInjectStrict,\n  key: formContextKey,\n} = createContext<FormContext>('Form')\n\n/**\n * Inject Form context. Returns null when called outside a <Form> — callers\n * handle standalone mode themselves.\n */\nexport function useFormInject(): FormContext | null {\n  return inject(formContextKey, null)\n}\n"],"mappings":";;;AA0BA,IAAa,EACX,YAAY,gBACZ,WAAW,sBACX,KAAK,mBACH,cAA2B,OAAO;;;;;AAMtC,SAAgB,gBAAoC;AAClD,QAAO,OAAO,gBAAgB,KAAK"}

package/dist/components/form/validation.js

@@ -0,0 +1,71 @@
+//#region src/components/form/validation.ts
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isEmpty(value) {
+	if (value === void 0 || value === null || value === "" || value === false) return true;
+	if (Array.isArray(value) && value.length === 0) return true;
+	return false;
+}
+function resolveSimpleRule(rule) {
+	if (typeof rule === "string") return {
+		enabled: true,
+		message: rule
+	};
+	return {
+		enabled: rule,
+		message: void 0
+	};
+}
+function resolveNumericRule(rule) {
+	if (typeof rule === "number") return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+function resolvePatternRule(rule) {
+	if (rule instanceof RegExp) return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+async function runValidation(value, rules, validate) {
+	if (!rules && !validate) return void 0;
+	if (rules?.required !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.required);
+		if (enabled && isEmpty(value)) return message ?? "This field is required";
+	}
+	if (isEmpty(value)) {
+		if (validate) return await validate(value);
+		return;
+	}
+	if (rules?.email !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.email);
+		if (enabled && !EMAIL_REGEX.test(String(value))) return message ?? "Enter a valid email address";
+	}
+	if (rules?.pattern !== void 0) {
+		const { value: regex, message } = resolvePatternRule(rules.pattern);
+		if (!regex.test(String(value))) return message ?? "Invalid format";
+	}
+	if (rules?.minLength !== void 0) {
+		const { value: min, message } = resolveNumericRule(rules.minLength);
+		if ((Array.isArray(value) ? value.length : String(value).length) < min) return message ?? `Must be at least ${min} characters`;
+	}
+	if (rules?.maxLength !== void 0) {
+		const { value: max, message } = resolveNumericRule(rules.maxLength);
+		if ((Array.isArray(value) ? value.length : String(value).length) > max) return message ?? `Must be at most ${max} characters`;
+	}
+	if (rules?.min !== void 0) {
+		const { value: minVal, message } = resolveNumericRule(rules.min);
+		if (Number(value) < minVal) return message ?? `Must be at least ${minVal}`;
+	}
+	if (rules?.max !== void 0) {
+		const { value: maxVal, message } = resolveNumericRule(rules.max);
+		if (Number(value) > maxVal) return message ?? `Must be at most ${maxVal}`;
+	}
+	if (validate) return await validate(value);
+}
+//#endregion
+export { runValidation };
+
+//# sourceMappingURL=validation.js.map

package/dist/components/form/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","names":[],"sources":["../../../src/components/form/validation.ts"],"sourcesContent":["type RuleWithMessage<T> = T | { value: T; message: string }\n\nexport interface FieldRules {\n  required?: boolean | string\n  email?: boolean | string\n  pattern?: RuleWithMessage<RegExp>\n  minLength?: RuleWithMessage<number>\n  maxLength?: RuleWithMessage<number>\n  min?: RuleWithMessage<number>\n  max?: RuleWithMessage<number>\n}\n\nexport type CustomValidator = (value: unknown) => string | undefined | Promise<string | undefined>\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isEmpty(value: unknown): boolean {\n  if (value === undefined || value === null || value === '' || value === false) return true\n  if (Array.isArray(value) && value.length === 0) return true\n  return false\n}\n\nfunction resolveSimpleRule(rule: boolean | string): { enabled: boolean; message: string | undefined } {\n  if (typeof rule === 'string') return { enabled: true, message: rule }\n  return { enabled: rule, message: undefined }\n}\n\nfunction resolveNumericRule(rule: number | { value: number; message: string }): { value: number; message: string | undefined } {\n  if (typeof rule === 'number') return { value: rule, message: undefined }\n  return rule\n}\n\nfunction resolvePatternRule(rule: RegExp | { value: RegExp; message: string }): { value: RegExp; message: string | undefined } {\n  if (rule instanceof RegExp) return { value: rule, message: undefined }\n  return rule\n}\n\nexport async function runValidation(\n  value: unknown,\n  rules?: FieldRules,\n  validate?: CustomValidator,\n): Promise<string | undefined> {\n  if (!rules && !validate) return undefined\n\n  if (rules?.required !== undefined) {\n    const { enabled, message } = resolveSimpleRule(rules.required)\n    if (enabled && isEmpty(value)) return message ?? 'This field is required'\n  }\n\n  if (isEmpty(value)) {\n    if (validate) return await validate(value)\n    return undefined\n  }\n\n  if (rules?.email !== undefined) {\n    const { enabled, message } = resolveSimpleRule(rules.email)\n    if (enabled && !EMAIL_REGEX.test(String(value))) return message ?? 'Enter a valid email address'\n  }\n\n  if (rules?.pattern !== undefined) {\n    const { value: regex, message } = resolvePatternRule(rules.pattern)\n    if (!regex.test(String(value))) return message ?? 'Invalid format'\n  }\n\n  if (rules?.minLength !== undefined) {\n    const { value: min, message } = resolveNumericRule(rules.minLength)\n    const len = Array.isArray(value) ? value.length : String(value).length\n    if (len < min) return message ?? `Must be at least ${min} characters`\n  }\n\n  if (rules?.maxLength !== undefined) {\n    const { value: max, message } = resolveNumericRule(rules.maxLength)\n    const len = Array.isArray(value) ? value.length : String(value).length\n    if (len > max) return message ?? `Must be at most ${max} characters`\n  }\n\n  if (rules?.min !== undefined) {\n    const { value: minVal, message } = resolveNumericRule(rules.min)\n    if (Number(value) < minVal) return message ?? `Must be at least ${minVal}`\n  }\n\n  if (rules?.max !== undefined) {\n    const { value: maxVal, message } = resolveNumericRule(rules.max)\n    if (Number(value) > maxVal) return message ?? `Must be at most ${maxVal}`\n  }\n\n  if (validate) return await validate(value)\n\n  return undefined\n}\n"],"mappings":";AAcA,IAAM,cAAc;AAEpB,SAAS,QAAQ,OAAyB;AACxC,KAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,MAAM,UAAU,MAAO,QAAO;AACrF,KAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,WAAW,EAAG,QAAO;AACvD,QAAO;;AAGT,SAAS,kBAAkB,MAA2E;AACpG,KAAI,OAAO,SAAS,SAAU,QAAO;EAAE,SAAS;EAAM,SAAS;EAAM;AACrE,QAAO;EAAE,SAAS;EAAM,SAAS,KAAA;EAAW;;AAG9C,SAAS,mBAAmB,MAAmG;AAC7H,KAAI,OAAO,SAAS,SAAU,QAAO;EAAE,OAAO;EAAM,SAAS,KAAA;EAAW;AACxE,QAAO;;AAGT,SAAS,mBAAmB,MAAmG;AAC7H,KAAI,gBAAgB,OAAQ,QAAO;EAAE,OAAO;EAAM,SAAS,KAAA;EAAW;AACtE,QAAO;;AAGT,eAAsB,cACpB,OACA,OACA,UAC6B;AAC7B,KAAI,CAAC,SAAS,CAAC,SAAU,QAAO,KAAA;AAEhC,KAAI,OAAO,aAAa,KAAA,GAAW;EACjC,MAAM,EAAE,SAAS,YAAY,kBAAkB,MAAM,SAAS;AAC9D,MAAI,WAAW,QAAQ,MAAM,CAAE,QAAO,WAAW;;AAGnD,KAAI,QAAQ,MAAM,EAAE;AAClB,MAAI,SAAU,QAAO,MAAM,SAAS,MAAM;AAC1C;;AAGF,KAAI,OAAO,UAAU,KAAA,GAAW;EAC9B,MAAM,EAAE,SAAS,YAAY,kBAAkB,MAAM,MAAM;AAC3D,MAAI,WAAW,CAAC,YAAY,KAAK,OAAO,MAAM,CAAC,CAAE,QAAO,WAAW;;AAGrE,KAAI,OAAO,YAAY,KAAA,GAAW;EAChC,MAAM,EAAE,OAAO,OAAO,YAAY,mBAAmB,MAAM,QAAQ;AACnE,MAAI,CAAC,MAAM,KAAK,OAAO,MAAM,CAAC,CAAE,QAAO,WAAW;;AAGpD,KAAI,OAAO,cAAc,KAAA,GAAW;EAClC,MAAM,EAAE,OAAO,KAAK,YAAY,mBAAmB,MAAM,UAAU;AAEnE,OADY,MAAM,QAAQ,MAAM,GAAG,MAAM,SAAS,OAAO,MAAM,CAAC,UACtD,IAAK,QAAO,WAAW,oBAAoB,IAAI;;AAG3D,KAAI,OAAO,cAAc,KAAA,GAAW;EAClC,MAAM,EAAE,OAAO,KAAK,YAAY,mBAAmB,MAAM,UAAU;AAEnE,OADY,MAAM,QAAQ,MAAM,GAAG,MAAM,SAAS,OAAO,MAAM,CAAC,UACtD,IAAK,QAAO,WAAW,mBAAmB,IAAI;;AAG1D,KAAI,OAAO,QAAQ,KAAA,GAAW;EAC5B,MAAM,EAAE,OAAO,QAAQ,YAAY,mBAAmB,MAAM,IAAI;AAChE,MAAI,OAAO,MAAM,GAAG,OAAQ,QAAO,WAAW,oBAAoB;;AAGpE,KAAI,OAAO,QAAQ,KAAA,GAAW;EAC5B,MAAM,EAAE,OAAO,QAAQ,YAAY,mBAAmB,MAAM,IAAI;AAChE,MAAI,OAAO,MAAM,GAAG,OAAQ,QAAO,WAAW,mBAAmB;;AAGnE,KAAI,SAAU,QAAO,MAAM,SAAS,MAAM"}

package/dist/components/select/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <SelectContent\n        v-if=\"rootContext.open.value\"\n        :position=\"props.position\"\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          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        data-slot=\"popover\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"ctx.slots.value.popover()\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectContent.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 { useSelectInject } from "./Select.context.js";
-import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, vShow, withCtx, withDirectives } from "vue";
 import { SelectContent, SelectPortal, SelectViewport, injectSelectRootContext } from "reka-ui";
 //#region src/components/select/SelectContent.vue?vue&type=script&setup=true&lang.ts
 var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -18,24 +18,17 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectPortal), null, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
-					default: withCtx(() => [unref(rootContext).open.value ? (openBlock(), createBlock(unref(SelectContent), {
-						key: 0,
+					default: withCtx(() => [createVNode(unref(SelectContent), {
 						position: props.position,
 						"side-offset": props.sideOffset,
-						"as-child": "",
 						"data-slot": "popover"
 					}, {
-						default: withCtx(() => [createVNode(unref(motion).div, {
+						default: withCtx(() => [withDirectives(createVNode(unref(motion).div, {
 							class: normalizeClass(unref(ctx).slots.value.popover()),
-							initial: {
-								opacity: 0,
-								scale: .95
-							},
-							animate: {
+							animate: unref(rootContext).open.value ? {
 								opacity: 1,
 								scale: 1
-							},
-							exit: {
+							} : {
 								opacity: 0,
 								scale: .95
 							},
@@ -46,9 +39,9 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								_: 3
 							})]),
 							_: 3
-						}, 8, ["class"])]),
+						}, 8, ["class", "animate"]), [[vShow, unref(rootContext).open.value]])]),
 						_: 3
-					}, 8, ["position", "side-offset"])) : createCommentVNode("", true)]),
+					}, 8, ["position", "side-offset"])]),
 					_: 3
 				})]),
 				_: 3

package/dist/components/select/SelectContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <SelectContent\n        v-if=\"rootContext.open.value\"\n        :position=\"props.position\"\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          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAUd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;;uBAI1C,YAsBe,MAAA,aAAA,EAAA,MAAA;2BADK,CApBlB,YAoBkB,MAAA,wBAAA,EAAA,MAAA;4BADA,CAjBR,MAAA,YAAW,CAAC,KAAK,SAAA,WAAA,EADzB,YAkBgB,MAAA,cAAA,EAAA;;MAhBb,UAAU,MAAM;MAChB,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAYG,CAVb,YAUa,MAAA,OAAA,CAAA,KAAA;OATV,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;;8BAId,CAFjB,YAEiB,MAAA,eAAA,EAAA,EAFD,aAAU,YAAU,EAAA;+BAC1B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        data-slot=\"popover\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"ctx.slots.value.popover()\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAUd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;;uBAI1C,YAmCe,MAAA,aAAA,EAAA,MAAA;2BADK,CAjClB,YAiCkB,MAAA,wBAAA,EAAA,MAAA;4BADA,CAfhB,YAegB,MAAA,cAAA,EAAA;MAdb,UAAU,MAAM;MAChB,eAAa,MAAM;MACpB,aAAU;;6BAWG,CAAA,eATb,YASa,MAAA,OAAA,CAAA,KAAA;OAPV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS,MAAA,YAAW,CAAC,KAAK,QAAK;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAA,SAAA;QAAA,OAAA;QAAA;OAC/B,YAAY,EAAA,UAAA,KAAkB;;8BAId,CAFjB,YAEiB,MAAA,eAAA,EAAA,EAFD,aAAU,YAAU,EAAA;+BAC1B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;4CANF,MAAA,YAAW,CAAC,KAAK,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/select/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\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\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\nonMounted(() => {\n  const label = props.textValue ?? textRef.value?.textContent?.trim() ?? props.value\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\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    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? props.value\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\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    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js

@@ -17,8 +17,10 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const ctx = useSelectInject();
 		const textRef = useTemplateRef("textRef");
+		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		onMounted(() => {
-			const label = props.textValue ?? textRef.value?.textContent?.trim() ?? props.value;
+			const el = textRef.value?.$el;
+			const label = props.textValue ?? el?.textContent?.trim() ?? props.value;
 			ctx.registerItem(props.value, label);
 		});
 		return (_ctx, _cache) => {

package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\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\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\nonMounted(() => {\n  const label = props.textValue ?? textRef.value?.textContent?.trim() ?? props.value\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\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    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAWd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAErD,kBAAgB;GACd,MAAM,QAAQ,MAAM,aAAa,QAAQ,OAAO,aAAa,MAAM,IAAI,MAAM;AAC7E,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAkCa,MAAA,WAAA,EAAA;IAjCV,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAY,MAAM,aAAa,MAAM;IACtC,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,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":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? props.value\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\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    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAiBd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAKrD,MAAI,MAAM,cAAc,KAAA,EACtB,KAAI,aAAa,MAAM,OAAO,MAAM,UAAS;AAG/C,kBAAgB;GAKd,MAAM,KAAM,QAAQ,OAAwC;GAC5D,MAAM,QAAQ,MAAM,aAAa,IAAI,aAAa,MAAM,IAAI,MAAM;AAClE,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAkCa,MAAA,WAAA,EAAA;IAjCV,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAY,MAAM,aAAa,MAAM;IACtC,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,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/select/SelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ modelValue }\">\n      <template v-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue.toString()) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!--\n        Label resolution order:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n           (works after first open, and in real browsers via DocumentFragment path)\n        2. itemRegistry label — populated at setup time for items with explicit\n           textValue prop, or at onMounted for slot-text items after first open\n        3. Placeholder when no value is selected\n      -->\n      <template v-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString()) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js

@@ -17,7 +17,7 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				placeholder: props.placeholder,
 				"data-slot": "value"
 			}, {
-				default: withCtx(({ modelValue }) => [modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(modelValue.toString())), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
+				default: withCtx(({ selectedLabel, modelValue }) => [selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString())), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ modelValue }\">\n      <template v-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue.toString()) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;EAIA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAac,MAAA,YAAA,EAAA;IAZX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAGL,EAHS,iBAAU,CACd,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAArG,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,WAAW,UAAQ,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAEtC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!--\n        Label resolution order:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n           (works after first open, and in real browsers via DocumentFragment path)\n        2. itemRegistry label — populated at setup time for items with explicit\n           textValue prop, or at onMounted for slot-text items after first open\n        3. Placeholder when no value is selected\n      -->\n      <template v-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString()) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;EAIA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAwBc,MAAA,YAAA,EAAA;IAvBX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAWL,EAXS,eAAe,iBAAU,CAS7B,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAArD,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAc,KAAI,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAEF,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAA1G,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,MAAM,QAAQ,WAAU,GAAI,aAAa,WAAW,UAAQ,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAE/E,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}

package/dist/index.js

@@ -34,6 +34,8 @@ import CloseButton_default from "./components/button/CloseButton.js";
 import ToggleButton_default from "./components/button/ToggleButton.js";
 import ToggleButtonGroup_default from "./components/button/ToggleButtonGroup.js";
 import Link_default from "./components/link/Link.js";
+import Form_default from "./components/form/Form.js";
+import FormField_default from "./components/form/FormField.js";
 import Input_default from "./components/input/Input.js";
 import Textarea_default from "./components/textarea/Textarea.js";
 import NumberField_default from "./components/number-field/NumberField.js";
@@ -212,6 +214,7 @@ import DateRangeField_default from "./components/date-range-field/DateRangeField
 import TimeField_default from "./components/time-field/TimeField.js";
 import DatePicker_default from "./components/date-picker/DatePicker.js";
 import DateRangePicker_default from "./components/date-range-picker/DateRangePicker.js";
+import DateTimePicker_default from "./components/date-time-picker/DateTimePicker.js";
 import { useColorState } from "./composables/useColorState.js";
 import ColorArea_default from "./components/color-area/ColorArea.js";
 import ColorSlider_default from "./components/color-slider/ColorSlider.js";
@@ -220,4 +223,4 @@ import ColorSwatch_default from "./components/color-swatch/ColorSwatch.js";
 import ColorSwatchPicker_default from "./components/color-swatch-picker/ColorSwatchPicker.js";
 import ColorInputGroup_default from "./components/color-input-group/ColorInputGroup.js";
 import ColorPicker_default from "./components/color-picker/ColorPicker.js";
-export { Accordion_default as Accordion, AccordionContent_default as AccordionContent, AccordionHeader_default as AccordionHeader, AccordionItem_default as AccordionItem, AccordionTrigger_default as AccordionTrigger, Alert_default as Alert, AlertDescription_default as AlertDescription, AlertDialog_default as AlertDialog, AlertDialogAction_default as AlertDialogAction, AlertDialogBody_default as AlertDialogBody, AlertDialogCancel_default as AlertDialogCancel, AlertDialogContent_default as AlertDialogContent, AlertDialogDescription_default as AlertDialogDescription, AlertDialogFooter_default as AlertDialogFooter, AlertDialogHeader_default as AlertDialogHeader, AlertDialogIcon_default as AlertDialogIcon, AlertDialogOverlay_default as AlertDialogOverlay, AlertDialogTitle_default as AlertDialogTitle, AlertDialogTrigger_default as AlertDialogTrigger, AlertIcon_default as AlertIcon, AlertTitle_default as AlertTitle, AspectRatio_default as AspectRatio, Autocomplete_default as Autocomplete, AutocompleteContent_default as AutocompleteContent, AutocompleteInput_default as AutocompleteInput, AutocompleteItem_default as AutocompleteItem, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Badge_default as Badge, BreadcrumbItem_default as BreadcrumbItem, Breadcrumbs_default as Breadcrumbs, Button_default as Button, ButtonGroup_default as ButtonGroup, Calendar_default as Calendar, CalendarYearPicker_default as CalendarYearPicker, Card_default as Card, CardBody_default as CardBody, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, Chip_default as Chip, CloseButton_default as CloseButton, Collapsible_default as Collapsible, CollapsibleContent_default as CollapsibleContent, CollapsibleGroup_default as CollapsibleGroup, CollapsibleTrigger_default as CollapsibleTrigger, ColorArea_default as ColorArea, ColorField_default as ColorField, ColorInputGroup_default as ColorInputGroup, ColorPicker_default as ColorPicker, ColorSlider_default as ColorSlider, ColorSwatch_default as ColorSwatch, ColorSwatchPicker_default as ColorSwatchPicker, ComboBox_default as ComboBox, ComboBoxContent_default as ComboBoxContent, ComboBoxEmpty_default as ComboBoxEmpty, ComboBoxInput_default as ComboBoxInput, ComboBoxItem_default as ComboBoxItem, DateInput_default as DateInput, DatePicker_default as DatePicker, DateRangeField_default as DateRangeField, DateRangePicker_default as DateRangePicker, Description_default as Description, Drawer_default as Drawer, DrawerBody_default as DrawerBody, DrawerClose_default as DrawerClose, DrawerContent_default as DrawerContent, DrawerFooter_default as DrawerFooter, DrawerHeader_default as DrawerHeader, DrawerOverlay_default as DrawerOverlay, DrawerTitle_default as DrawerTitle, DrawerTrigger_default as DrawerTrigger, Dropdown_default as Dropdown, DropdownCheckboxItem_default as DropdownCheckboxItem, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu, DropdownRadioGroup_default as DropdownRadioGroup, DropdownRadioItem_default as DropdownRadioItem, DropdownSection_default as DropdownSection, DropdownSub_default as DropdownSub, DropdownSubContent_default as DropdownSubContent, DropdownSubTrigger_default as DropdownSubTrigger, DropdownTrigger_default as DropdownTrigger, EmptyState_default as EmptyState, EmptyStateContent_default as EmptyStateContent, Fieldset_default as Fieldset, Header_default as Header, Input_default as Input, InputOTP_default as InputOTP, Kbd_default as Kbd, Label_default as Label, Link_default as Link, ListBox_default as ListBox, ListBoxItem_default as ListBoxItem, ListBoxSection_default as ListBoxSection, Meter_default as Meter, Modal_default as Modal, ModalBody_default as ModalBody, ModalClose_default as ModalClose, ModalContent_default as ModalContent, ModalDescription_default as ModalDescription, ModalFooter_default as ModalFooter, ModalHeader_default as ModalHeader, ModalOverlay_default as ModalOverlay, ModalTitle_default as ModalTitle, ModalTrigger_default as ModalTrigger, NumberField_default as NumberField, Pagination_default as Pagination, PaginationContent_default as PaginationContent, PaginationEllipsis_default as PaginationEllipsis, PaginationFirst_default as PaginationFirst, PaginationItem_default as PaginationItem, PaginationLast_default as PaginationLast, PaginationNext_default as PaginationNext, PaginationPrev_default as PaginationPrev, Popover_default as Popover, PopoverAnchor_default as PopoverAnchor, PopoverArrow_default as PopoverArrow, PopoverClose_default as PopoverClose, PopoverContent_default as PopoverContent, PopoverTrigger_default as PopoverTrigger, ProgressBar_default as ProgressBar, ProgressCircle_default as ProgressCircle, Radio_default as Radio, RadioGroup_default as RadioGroup, RangeCalendar_default as RangeCalendar, ScrollArea_default as ScrollArea, ScrollShadow_default as ScrollShadow, Select_default as Select, SelectContent_default as SelectContent, SelectItem_default as SelectItem, SelectTrigger_default as SelectTrigger, SelectValue_default as SelectValue, Separator_default as Separator, Skeleton_default as Skeleton, Slider_default as Slider, Spinner_default as Spinner, SplitterGroup_default as SplitterGroup, SplitterPanel_default as SplitterPanel, SplitterResizeHandle_default as SplitterResizeHandle, Stepper_default as Stepper, StepperContent_default as StepperContent, StepperDescription_default as StepperDescription, StepperIndicator_default as StepperIndicator, StepperItem_default as StepperItem, StepperSeparator_default as StepperSeparator, StepperTitle_default as StepperTitle, Surface_default as Surface, Switch_default as Switch, SwitchGroup_default as SwitchGroup, Tab_default as Tab, TabIndicator_default as TabIndicator, TabList_default as TabList, TabPanel_default as TabPanel, Table_default as Table, TableBody_default as TableBody, TableCell_default as TableCell, TableFooter_default as TableFooter, TableHeader_default as TableHeader, TableHeaderCell_default as TableHeaderCell, TableRow_default as TableRow, Tabs_default as Tabs, Tag_default as Tag, TagDelete_default as TagDelete, TagGroup_default as TagGroup, TagGroupInput_default as TagGroupInput, TagText_default as TagText, Text_default as Text, Textarea_default as Textarea, TimeField_default as TimeField, Toast_default as Toast, ToastAction_default as ToastAction, ToastClose_default as ToastClose, ToastDescription_default as ToastDescription, ToastProvider_default as ToastProvider, ToastTitle_default as ToastTitle, ToastViewport_default as ToastViewport, ToggleButton_default as ToggleButton, ToggleButtonGroup_default as ToggleButtonGroup, Toolbar_default as Toolbar, ToolbarButton_default as ToolbarButton, ToolbarLink_default as ToolbarLink, ToolbarSeparator_default as ToolbarSeparator, ToolbarToggleGroup_default as ToolbarToggleGroup, ToolbarToggleItem_default as ToolbarToggleItem, Tooltip_default as Tooltip, TooltipArrow_default as TooltipArrow, TooltipContent_default as TooltipContent, TooltipProvider_default as TooltipProvider, TooltipTrigger_default as TooltipTrigger, Tree_default as Tree, TreeItem_default as TreeItem, TreeItemToggle_default as TreeItemToggle, autocompleteContextKey, checkboxGroupContextKey, comboBoxContextKey, composeClassName, composeSlotClassName, createContext, createPaginationContext, cx, dataAttr, dropdownContextKey, mapPropsVariants, paginationContextKey, radioGroupContextKey, splitterContextKey, stepperContextKey, surfaceContextKey, switchGroupContextKey, tableContextKey, tagGroupContextKey, treeContextKey, useAutocompleteInject, useAutocompleteProvide, useCSSVariable, useCheckboxGroupInject, useCheckboxGroupProvide, useColorState, useComboBoxInject, useComboBoxProvide, useDropdownInject, useDropdownProvide, useIsHydrated, useIsMounted, useListData, useMeasuredHeight, useMediaQuery, useOverlayState, usePaginationInject, usePaginationProvide, useRadioGroupInject, useRadioGroupProvide, useSurfaceInject, useSwitchGroupInject, useSwitchGroupProvide, useTableInject, useTableKeyboardNav, useTableProvide, useTagGroupInject, useTagGroupProvide, useToast };
+export { Accordion_default as Accordion, AccordionContent_default as AccordionContent, AccordionHeader_default as AccordionHeader, AccordionItem_default as AccordionItem, AccordionTrigger_default as AccordionTrigger, Alert_default as Alert, AlertDescription_default as AlertDescription, AlertDialog_default as AlertDialog, AlertDialogAction_default as AlertDialogAction, AlertDialogBody_default as AlertDialogBody, AlertDialogCancel_default as AlertDialogCancel, AlertDialogContent_default as AlertDialogContent, AlertDialogDescription_default as AlertDialogDescription, AlertDialogFooter_default as AlertDialogFooter, AlertDialogHeader_default as AlertDialogHeader, AlertDialogIcon_default as AlertDialogIcon, AlertDialogOverlay_default as AlertDialogOverlay, AlertDialogTitle_default as AlertDialogTitle, AlertDialogTrigger_default as AlertDialogTrigger, AlertIcon_default as AlertIcon, AlertTitle_default as AlertTitle, AspectRatio_default as AspectRatio, Autocomplete_default as Autocomplete, AutocompleteContent_default as AutocompleteContent, AutocompleteInput_default as AutocompleteInput, AutocompleteItem_default as AutocompleteItem, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Badge_default as Badge, BreadcrumbItem_default as BreadcrumbItem, Breadcrumbs_default as Breadcrumbs, Button_default as Button, ButtonGroup_default as ButtonGroup, Calendar_default as Calendar, CalendarYearPicker_default as CalendarYearPicker, Card_default as Card, CardBody_default as CardBody, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, Chip_default as Chip, CloseButton_default as CloseButton, Collapsible_default as Collapsible, CollapsibleContent_default as CollapsibleContent, CollapsibleGroup_default as CollapsibleGroup, CollapsibleTrigger_default as CollapsibleTrigger, ColorArea_default as ColorArea, ColorField_default as ColorField, ColorInputGroup_default as ColorInputGroup, ColorPicker_default as ColorPicker, ColorSlider_default as ColorSlider, ColorSwatch_default as ColorSwatch, ColorSwatchPicker_default as ColorSwatchPicker, ComboBox_default as ComboBox, ComboBoxContent_default as ComboBoxContent, ComboBoxEmpty_default as ComboBoxEmpty, ComboBoxInput_default as ComboBoxInput, ComboBoxItem_default as ComboBoxItem, DateInput_default as DateInput, DatePicker_default as DatePicker, DateRangeField_default as DateRangeField, DateRangePicker_default as DateRangePicker, DateTimePicker_default as DateTimePicker, Description_default as Description, Drawer_default as Drawer, DrawerBody_default as DrawerBody, DrawerClose_default as DrawerClose, DrawerContent_default as DrawerContent, DrawerFooter_default as DrawerFooter, DrawerHeader_default as DrawerHeader, DrawerOverlay_default as DrawerOverlay, DrawerTitle_default as DrawerTitle, DrawerTrigger_default as DrawerTrigger, Dropdown_default as Dropdown, DropdownCheckboxItem_default as DropdownCheckboxItem, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu, DropdownRadioGroup_default as DropdownRadioGroup, DropdownRadioItem_default as DropdownRadioItem, DropdownSection_default as DropdownSection, DropdownSub_default as DropdownSub, DropdownSubContent_default as DropdownSubContent, DropdownSubTrigger_default as DropdownSubTrigger, DropdownTrigger_default as DropdownTrigger, EmptyState_default as EmptyState, EmptyStateContent_default as EmptyStateContent, Fieldset_default as Fieldset, Form_default as Form, FormField_default as FormField, Header_default as Header, Input_default as Input, InputOTP_default as InputOTP, Kbd_default as Kbd, Label_default as Label, Link_default as Link, ListBox_default as ListBox, ListBoxItem_default as ListBoxItem, ListBoxSection_default as ListBoxSection, Meter_default as Meter, Modal_default as Modal, ModalBody_default as ModalBody, ModalClose_default as ModalClose, ModalContent_default as ModalContent, ModalDescription_default as ModalDescription, ModalFooter_default as ModalFooter, ModalHeader_default as ModalHeader, ModalOverlay_default as ModalOverlay, ModalTitle_default as ModalTitle, ModalTrigger_default as ModalTrigger, NumberField_default as NumberField, Pagination_default as Pagination, PaginationContent_default as PaginationContent, PaginationEllipsis_default as PaginationEllipsis, PaginationFirst_default as PaginationFirst, PaginationItem_default as PaginationItem, PaginationLast_default as PaginationLast, PaginationNext_default as PaginationNext, PaginationPrev_default as PaginationPrev, Popover_default as Popover, PopoverAnchor_default as PopoverAnchor, PopoverArrow_default as PopoverArrow, PopoverClose_default as PopoverClose, PopoverContent_default as PopoverContent, PopoverTrigger_default as PopoverTrigger, ProgressBar_default as ProgressBar, ProgressCircle_default as ProgressCircle, Radio_default as Radio, RadioGroup_default as RadioGroup, RangeCalendar_default as RangeCalendar, ScrollArea_default as ScrollArea, ScrollShadow_default as ScrollShadow, Select_default as Select, SelectContent_default as SelectContent, SelectItem_default as SelectItem, SelectTrigger_default as SelectTrigger, SelectValue_default as SelectValue, Separator_default as Separator, Skeleton_default as Skeleton, Slider_default as Slider, Spinner_default as Spinner, SplitterGroup_default as SplitterGroup, SplitterPanel_default as SplitterPanel, SplitterResizeHandle_default as SplitterResizeHandle, Stepper_default as Stepper, StepperContent_default as StepperContent, StepperDescription_default as StepperDescription, StepperIndicator_default as StepperIndicator, StepperItem_default as StepperItem, StepperSeparator_default as StepperSeparator, StepperTitle_default as StepperTitle, Surface_default as Surface, Switch_default as Switch, SwitchGroup_default as SwitchGroup, Tab_default as Tab, TabIndicator_default as TabIndicator, TabList_default as TabList, TabPanel_default as TabPanel, Table_default as Table, TableBody_default as TableBody, TableCell_default as TableCell, TableFooter_default as TableFooter, TableHeader_default as TableHeader, TableHeaderCell_default as TableHeaderCell, TableRow_default as TableRow, Tabs_default as Tabs, Tag_default as Tag, TagDelete_default as TagDelete, TagGroup_default as TagGroup, TagGroupInput_default as TagGroupInput, TagText_default as TagText, Text_default as Text, Textarea_default as Textarea, TimeField_default as TimeField, Toast_default as Toast, ToastAction_default as ToastAction, ToastClose_default as ToastClose, ToastDescription_default as ToastDescription, ToastProvider_default as ToastProvider, ToastTitle_default as ToastTitle, ToastViewport_default as ToastViewport, ToggleButton_default as ToggleButton, ToggleButtonGroup_default as ToggleButtonGroup, Toolbar_default as Toolbar, ToolbarButton_default as ToolbarButton, ToolbarLink_default as ToolbarLink, ToolbarSeparator_default as ToolbarSeparator, ToolbarToggleGroup_default as ToolbarToggleGroup, ToolbarToggleItem_default as ToolbarToggleItem, Tooltip_default as Tooltip, TooltipArrow_default as TooltipArrow, TooltipContent_default as TooltipContent, TooltipProvider_default as TooltipProvider, TooltipTrigger_default as TooltipTrigger, Tree_default as Tree, TreeItem_default as TreeItem, TreeItemToggle_default as TreeItemToggle, autocompleteContextKey, checkboxGroupContextKey, comboBoxContextKey, composeClassName, composeSlotClassName, createContext, createPaginationContext, cx, dataAttr, dropdownContextKey, mapPropsVariants, paginationContextKey, radioGroupContextKey, splitterContextKey, stepperContextKey, surfaceContextKey, switchGroupContextKey, tableContextKey, tagGroupContextKey, treeContextKey, useAutocompleteInject, useAutocompleteProvide, useCSSVariable, useCheckboxGroupInject, useCheckboxGroupProvide, useColorState, useComboBoxInject, useComboBoxProvide, useDropdownInject, useDropdownProvide, useIsHydrated, useIsMounted, useListData, useMeasuredHeight, useMediaQuery, useOverlayState, usePaginationInject, usePaginationProvide, useRadioGroupInject, useRadioGroupProvide, useSurfaceInject, useSwitchGroupInject, useSwitchGroupProvide, useTableInject, useTableKeyboardNav, useTableProvide, useTagGroupInject, useTagGroupProvide, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/vue",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vue 3 85 components with full visual and functional parity",
   "type": "module",
   "license": "MIT",
@@ -75,7 +75,7 @@
     "tailwind-merge": "3.5.0",
     "tailwind-variants": "3.2.2",
     "vee-validate": "^4.15.1",
-    "@auronui/styles": "1.0.2"
+    "@auronui/styles": "1.0.4"
   },
   "devDependencies": {
     "@chialab/vitest-axe": "0.19.1",