@auronui/vue 1.0.3 → 1.0.4

package/dist/cjs/index.cjs

@@ -1442,6 +1442,244 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#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 (0, vue.inject)(formContextKey, null);
+}
+//#endregion
+//#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
+//#region src/components/form/Form.vue
+var Form_default = /* @__PURE__ */ (0, vue.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 = (0, vue.ref)({});
+		const isSubmitting = (0, vue.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
+			});
+		}
+		(0, vue.provide)(formContextKey, {
+			errors,
+			isSubmitting,
+			isDisabled: (0, vue.computed)(() => props.isDisabled),
+			validationMode: (0, vue.computed)(() => props.validationMode),
+			registerField,
+			unregisterField,
+			triggerFieldValidation,
+			setErrors
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("form", {
+				class: (0, vue.normalizeClass)(props.class),
+				novalidate: "",
+				onSubmit: (0, vue.withModifiers)(handleSubmit, ["prevent"])
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
+				isSubmitting: isSubmitting.value,
+				isDisabled: props.isDisabled,
+				errors: errors.value
+			})], 34);
+		};
+	}
+});
+//#endregion
+//#region src/components/form/FormField.vue
+var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "FormField",
+	props: /* @__PURE__ */ (0, vue.mergeModels)({
+		name: {},
+		rules: {},
+		validate: { type: Function },
+		validationMode: {}
+	}, {
+		"modelValue": { default: void 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const ctx = useFormInject();
+		const localError = (0, vue.ref)(void 0);
+		const fieldError = (0, vue.computed)(() => ctx ? ctx.errors.value[props.name] : localError.value);
+		const hasBeenInvalid = (0, vue.ref)(false);
+		(0, vue.watch)(fieldError, (error) => {
+			if (error) hasBeenInvalid.value = true;
+		});
+		const isInvalid = (0, vue.computed)(() => !!fieldError.value);
+		const isDisabled = (0, vue.computed)(() => ctx?.isDisabled.value ?? false);
+		const validationMode = (0, vue.computed)(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
+		(0, vue.onMounted)(() => {
+			ctx?.registerField({
+				name: props.name,
+				getValue: () => modelValue.value,
+				rules: props.rules,
+				validate: props.validate
+			});
+		});
+		(0, vue.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 = (0, vue.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 (0, vue.renderSlot)(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+		};
+	}
+});
+//#endregion
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$49 = [
 	"data-invalid",
@@ -14720,7 +14958,7 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				placeholder: props.placeholder,
 				"data-slot": "value"
 			}, {
-				default: (0, vue.withCtx)(({ modelValue }) => [modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(modelValue.toString())), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
+				default: (0, vue.withCtx)(({ selectedLabel, modelValue }) => [selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString())), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};
@@ -14742,24 +14980,17 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectPortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
-					default: (0, vue.withCtx)(() => [(0, vue.unref)(rootContext).open.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectContent), {
-						key: 0,
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectContent), {
 						position: props.position,
 						"side-offset": props.sideOffset,
-						"as-child": "",
 						"data-slot": "popover"
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(motion).div, {
+						default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(motion).div, {
 							class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.popover()),
-							initial: {
-								opacity: 0,
-								scale: .95
-							},
-							animate: {
+							animate: (0, vue.unref)(rootContext).open.value ? {
 								opacity: 1,
 								scale: 1
-							},
-							exit: {
+							} : {
 								opacity: 0,
 								scale: .95
 							},
@@ -14770,9 +15001,9 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								_: 3
 							})]),
 							_: 3
-						}, 8, ["class"])]),
+						}, 8, ["class", "animate"]), [[vue.vShow, (0, vue.unref)(rootContext).open.value]])]),
 						_: 3
-					}, 8, ["position", "side-offset"])) : (0, vue.createCommentVNode)("", true)]),
+					}, 8, ["position", "side-offset"])]),
 					_: 3
 				})]),
 				_: 3
@@ -14797,8 +15028,10 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useSelectInject();
 		const textRef = (0, vue.useTemplateRef)("textRef");
+		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		(0, vue.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) => {
@@ -15414,17 +15647,52 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (props.filterFunction) return props.filterFunction;
 			return (itemText, searchTerm) => itemText.toLowerCase().includes(searchTerm.toLowerCase());
 		});
-		const displayValue = (0, vue.computed)(() => (val) => {
-			if (!val) return "";
-			const item = props.items.find((i) => i.value === val);
-			return item?.label ?? item?.textValue ?? val;
+		const slotItemRegistry = (0, vue.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 = (0, vue.ref)(labelFor(props.modelValue));
+		const displayValue = (0, vue.computed)(() => (val) => val);
+		(0, vue.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));
+		}
+		(0, vue.watch)(slotItemRegistry, () => {
+			const next = labelFor(props.modelValue);
+			if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? "")) internalValue.value = next;
 		});
 		useComboBoxProvide({
 			isDisabled: (0, vue.toRef)(props, "isDisabled"),
 			isInvalid: (0, vue.toRef)(props, "isInvalid"),
 			fullWidth: (0, vue.toRef)(props, "fullWidth"),
 			slots: slotFns,
-			displayValue
+			displayValue,
+			registerItem,
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -15438,20 +15706,20 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-slot": "label"
 				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.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: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
 				}, 8, [
-					"model-value",
+					"modelValue",
 					"default-value",
 					"open",
 					"default-open",
@@ -15560,6 +15828,40 @@ var ComboBoxContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useComboBoxInject();
 		const comboboxRootContext = (0, reka_ui.injectComboboxRootContext)();
+		const slots = (0, vue.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);
+			}
+		}
+		(0, vue.watchEffect)(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxPortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
@@ -15607,7 +15909,6 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboBoxItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -15616,11 +15917,32 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = (0, vue.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 = (0, vue.computed)(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		(0, vue.onMounted)(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		(0, vue.onUnmounted)(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.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"
 			}, {
@@ -15652,7 +15974,8 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, 8, [
 				"value",
 				"text-value",
-				"disabled"
+				"disabled",
+				"data-item-value"
 			]);
 		};
 	}
@@ -15762,6 +16085,17 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const generatedId = (0, vue.useId)();
 		const inputId = (0, vue.computed)(() => attrs.id ?? generatedId);
 		const hasLabel = (0, vue.computed)(() => !!props.label);
+		const slotItemRegistry = (0, vue.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;
+		}
 		const isLoading = (0, vue.ref)(false);
 		const internalItems = (0, vue.ref)([...props.items]);
 		const isOpen = (0, vue.ref)(props.defaultOpen ?? false);
@@ -15775,11 +16109,15 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		function labelFor(value) {
 			if (value == null || value === "") return "";
 			const match = internalItems.value.find((i) => i.value === value);
-			return match?.label ?? match?.textValue ?? value;
+			if (match) return match.label ?? match.textValue ?? value;
+			return slotItemRegistry.value.get(value) ?? value;
 		}
 		function valueFor(displayed) {
 			if (!displayed) return "";
-			return internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed)?.value ?? displayed;
+			const match = internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed);
+			if (match) return match.value;
+			for (const [value, label] of slotItemRegistry.value) if (label === displayed) return value;
+			return displayed;
 		}
 		const searchTerm = (0, vue.ref)(labelFor(props.modelValue));
 		const isFilled = (0, vue.computed)(() => !!searchTerm.value);
@@ -15839,6 +16177,10 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const next = labelFor(props.modelValue);
 			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (props.modelValue ?? "")) searchTerm.value = next;
 		});
+		(0, vue.watch)(slotItemRegistry, () => {
+			const next = labelFor(props.modelValue);
+			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (props.modelValue ?? "")) searchTerm.value = next;
+		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)({
 			variant: props.variant,
 			size: props.size,
@@ -15866,7 +16208,9 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			ariaDescribedBy,
 			truncateItems: (0, vue.toRef)(props, "truncateItems"),
 			hasItems,
-			slots: slotFns
+			slots: slotFns,
+			registerItem,
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -16072,6 +16416,44 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useAutocompleteInject();
 		const rootContext = (0, reka_ui.injectComboboxRootContext)();
+		const slots = (0, vue.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 label = node.props.label;
+					if (label) ctx.registerItem(value, label);
+					else {
+						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);
+			}
+		}
+		(0, vue.watchEffect)(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompletePortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
@@ -16145,7 +16527,6 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AutocompleteItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -16154,10 +16535,30 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = (0, vue.useSlots)();
+		const ctx = useAutocompleteInject();
+		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 = (0, vue.computed)(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		(0, vue.onMounted)(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		(0, vue.onUnmounted)(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteItem), {
-				value: props.textValue ?? 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",
@@ -25343,7 +25744,6 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
 					"model-value": internalValue.value,
-					"onUpdate:modelValue": onInputChange,
 					variant: __props.variant,
 					size: __props.size,
 					color: __props.color,
@@ -25361,7 +25761,8 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-read-only": __props.isReadOnly,
 					"is-required": __props.isRequired,
 					name: __props.name,
-					"hide-time-zone": __props.hideTimeZone
+					"hide-time-zone": __props.hideTimeZone,
+					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
 						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
@@ -26261,6 +26662,8 @@ exports.DropdownTrigger = DropdownTrigger_default;
 exports.EmptyState = EmptyState_default;
 exports.EmptyStateContent = EmptyStateContent_default;
 exports.Fieldset = Fieldset_default;
+exports.Form = Form_default;
+exports.FormField = FormField_default;
 exports.Header = Header_default;
 exports.Input = Input_default;
 exports.InputOTP = InputOTP_default;