@reopt-ai/opt-ui 1.13.0 → 1.15.0

package/dist/{text-truncate-BeYW6XZu.cjs → text-truncate-gQhpMy-Z.cjs}

@@ -242,6 +242,47 @@ function useControlledState(defaultValue, controlledValue, onChange) {
 	}, [isControlled, onChange])];
 }
 //#endregion
+//#region src/core/toggle.tsx
+const _excluded$22 = [
+	"size",
+	"className",
+	"children"
+];
+const _excluded2$12 = [
+	"className",
+	"children",
+	"orientation"
+];
+const sizeStyles$7 = {
+	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
+	md: "h-10 min-w-10 px-3 text-sm gap-2"
+};
+const toggleBase = cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", OPT_FOCUS_VISIBLE);
+/** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
+function Toggle(_ref) {
+	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$22);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$7[size], className) }, props), {}, {
+		"data-opt-id": "GFCMY",
+		"data-opt-slug": "toggle.Toggle",
+		children
+	}));
+}
+Toggle.displayName = "Toggle";
+/** A set of related toggles with shared selection and keyboard navigation. */
+function ToggleGroup(_ref2) {
+	let { className, children, orientation = "horizontal" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$12);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, _objectSpread2(_objectSpread2({
+		orientation,
+		"aria-orientation": orientation,
+		className: cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
+	}, props), {}, {
+		"data-opt-id": "47J37",
+		"data-opt-slug": "toggle.ToggleGroup",
+		children
+	}));
+}
+ToggleGroup.displayName = "ToggleGroup";
+//#endregion
 //#region src/core/skeleton.tsx
 const _excluded$21 = [
 	"variant",
@@ -1056,12 +1097,10 @@ function Tooltip(_ref5) {
 }
 //#endregion
 //#region src/lib/use-input-id.ts
-/**
-* Generates a stable component ID from label text.
-* Eliminates the duplicated `id ?? label?.replace(...)` pattern across input components.
-*/
-function useInputId(id, label, prefix) {
-	return id !== null && id !== void 0 ? id : label ? `${prefix}-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+/** Generates an instance-specific, hydration-stable ID unless one is supplied. */
+function useInputId(id, _label, prefix) {
+	const generatedId = (0, react.useId)();
+	return id !== null && id !== void 0 ? id : `${prefix}-${generatedId}`;
 }
 //#endregion
 //#region src/core/input.tsx
@@ -1370,6 +1409,7 @@ const Textarea = (0, react.forwardRef)((_ref, ref) => {
 				ref,
 				id: textareaId,
 				rows,
+				required,
 				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles$1[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
 				"aria-invalid": hasError,
 				"aria-describedby": getDescribedBy(textareaId, error, hint)
@@ -2192,6 +2232,7 @@ function NumberInput({ value: controlledValue, defaultValue, onChange, nullable,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "text",
+								role: "spinbutton",
 								inputMode: "decimal",
 								id: inputId,
 								value: displayValue,
@@ -2205,6 +2246,10 @@ function NumberInput({ value: controlledValue, defaultValue, onChange, nullable,
 								"aria-label": (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref2 !== void 0 ? _ref2 : resolvedLabels.input,
 								"aria-invalid": hasError,
 								"aria-required": required,
+								"aria-valuenow": value !== null && value !== void 0 ? value : void 0,
+								"aria-valuemin": min,
+								"aria-valuemax": max,
+								"aria-valuetext": value === null ? "" : void 0,
 								"aria-describedby": getDescribedBy(inputId, effectiveError, hint),
 								min,
 								max,
@@ -2271,13 +2316,16 @@ function getSliderState(value, min, max, step) {
 	};
 }
 /** Renders the slider component. */
-function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, max = 100, step = 1, label, showValue = false, formatValue, disabled = false, className, "aria-label": ariaLabel }) {
+function Slider({ value: controlledValue, defaultValue = 0, onChange, onValueCommit, min = 0, max = 100, step = 1, label, showValue = false, formatValue, disabled = false, className, "aria-label": ariaLabel }) {
 	var _ref;
 	const [localValue, setLocalValue] = (0, react.useState)(defaultValue);
+	const pendingValue = (0, react.useRef)(null);
+	const pointerStart = (0, react.useRef)(null);
 	const sliderState = getSliderState(controlledValue !== null && controlledValue !== void 0 ? controlledValue : localValue, min, max, step);
 	const handleChange = (0, react.useCallback)((e) => {
 		const next = getSliderState(parseFloat(e.target.value), min, max, step).value;
 		if (controlledValue === void 0) setLocalValue(next);
+		pendingValue.current = next;
 		onChange === null || onChange === void 0 || onChange(next);
 	}, [
 		controlledValue,
@@ -2286,6 +2334,12 @@ function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, m
 		step,
 		onChange
 	]);
+	const commit = () => {
+		const next = pendingValue.current;
+		pendingValue.current = null;
+		pointerStart.current = null;
+		if (!disabled && next !== null) onValueCommit === null || onValueCommit === void 0 || onValueCommit(next);
+	};
 	const displayValue = formatValue ? formatValue(sliderState.value) : String(sliderState.value);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("flex flex-col gap-1.5", className),
@@ -2307,6 +2361,34 @@ function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, m
 			step: sliderState.step,
 			value: sliderState.value,
 			onChange: handleChange,
+			onPointerDown: (event) => {
+				var _event$currentTarget$, _event$currentTarget;
+				pointerStart.current = sliderState.value;
+				(_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+			},
+			onPointerUp: commit,
+			onPointerCancel: () => {
+				const previous = pointerStart.current;
+				pendingValue.current = null;
+				pointerStart.current = null;
+				if (previous !== null && !disabled) {
+					if (controlledValue === void 0) setLocalValue(previous);
+					onChange === null || onChange === void 0 || onChange(previous);
+				}
+			},
+			onKeyUp: (event) => {
+				if ([
+					"ArrowLeft",
+					"ArrowRight",
+					"ArrowUp",
+					"ArrowDown",
+					"Home",
+					"End",
+					"PageUp",
+					"PageDown"
+				].includes(event.key)) commit();
+			},
+			onBlur: commit,
 			disabled,
 			"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Slider",
 			"aria-valuemin": sliderState.min,
@@ -2812,6 +2894,12 @@ function IconPicker({ value, onChange, icons = DEFAULT_ICONS, label, required, e
 }
 IconPicker.displayName = "IconPicker";
 //#endregion
+//#region src/lib/is-composing-key.ts
+/** Safari may report the composition-ending key with keyCode 229. */
+function isComposingKey(event) {
+	return event.nativeEvent.isComposing || event.keyCode === 229;
+}
+//#endregion
 //#region src/core/tag-input.tsx
 const DEFAULT_DELIMITERS = [
 	",",
@@ -2823,7 +2911,7 @@ function splitByDelimiters(text, delimiters) {
 	return text.split(new RegExp(pattern)).map((s) => s.trim()).filter(Boolean);
 }
 const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add tag...", label, required, error, hint, maxTags, disabled = false, className, id, "aria-label": ariaLabel, suggestions, delimiters = DEFAULT_DELIMITERS, allowDuplicates = false }, ref) => {
-	var _useInputId, _ref, _ref2, _ref3, _ref4;
+	var _useInputId, _ref, _ref2, _ref3;
 	const [tags, setTags] = useControlledState([], value, onChange);
 	const fallbackId = (0, react.useId)().replace(/:/g, "");
 	const tagInputId = (_useInputId = useInputId(id, label, "tag-input")) !== null && _useInputId !== void 0 ? _useInputId : `tag-input-${fallbackId}`;
@@ -2832,8 +2920,8 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 	const [inputValue, setInputValue] = (0, react.useState)("");
 	const [highlightIndex, setHighlightIndex] = (0, react.useState)(-1);
 	const [showSuggestions, setShowSuggestions] = (0, react.useState)(false);
-	const innerRef = (0, react.useRef)(null);
-	const inputRef = (_ref = ref) !== null && _ref !== void 0 ? _ref : innerRef;
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => inputRef.current);
 	const listboxRef = (0, react.useRef)(null);
 	const listboxId = (0, react.useId)();
 	const undoStack = (0, react.useRef)([]);
@@ -2856,11 +2944,12 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		setTags(next);
 	}, [tags, setTags]);
 	const filtered = suggestions && inputValue.trim() ? suggestions.filter((s) => s.toLowerCase().includes(inputValue.trim().toLowerCase()) && (allowDuplicates || !tags.includes(s))) : [];
-	const isOpen = showSuggestions && filtered.length > 0;
+	const isOpen = !disabled && showSuggestions && filtered.length > 0;
 	(0, react.useEffect)(() => {
 		setHighlightIndex(-1);
 	}, [inputValue]);
 	const addTag = (0, react.useCallback)((tag) => {
+		if (disabled) return;
 		const trimmed = tag.trim();
 		if (!trimmed) return;
 		if (!allowDuplicates && tags.includes(trimmed)) return;
@@ -2873,13 +2962,20 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		tags,
 		setTags,
 		maxTags,
-		allowDuplicates
+		allowDuplicates,
+		disabled
 	]);
 	const removeTag = (0, react.useCallback)((index) => {
+		if (disabled) return;
 		pushUndo([...tags]);
 		setTags(tags.filter((_, i) => i !== index));
-	}, [tags, setTags]);
+	}, [
+		tags,
+		setTags,
+		disabled
+	]);
 	const handleTagKeyDown = (0, react.useCallback)((e, index) => {
+		if (disabled || isComposingKey(e)) return;
 		if (e.key === "Backspace" || e.key === "Delete") {
 			e.preventDefault();
 			const nextTags = tags.filter((_, i) => i !== index);
@@ -2926,10 +3022,12 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		setTags,
 		undo,
 		redo,
-		inputRef
+		inputRef,
+		disabled
 	]);
 	const handleInputKeyDown = (0, react.useCallback)((e) => {
 		var _inputRef$current5;
+		if (disabled || isComposingKey(e)) return;
 		if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
 			e.preventDefault();
 			undo();
@@ -2981,9 +3079,11 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		filtered,
 		undo,
 		redo,
-		inputRef
+		inputRef,
+		disabled
 	]);
 	const handlePaste = (0, react.useCallback)((e) => {
+		if (disabled) return;
 		const parts = splitByDelimiters(e.clipboardData.getData("text/plain"), delimiters);
 		if (parts.length < 2) return;
 		e.preventDefault();
@@ -3004,7 +3104,8 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		setTags,
 		maxTags,
 		delimiters,
-		allowDuplicates
+		allowDuplicates,
+		disabled
 	]);
 	(0, react.useEffect)(() => {
 		if (highlightIndex >= 0 && listboxRef.current) {
@@ -3019,7 +3120,8 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 		"data-opt-id": "3TDWF",
 		"data-opt-slug": "tag-input.TagInput",
 		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: tagInputId,
 				className: "text-sm font-medium text-text-primary",
 				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredMark, {})]
 			}),
@@ -3030,7 +3132,7 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 					return (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.focus();
 				},
 				role: "group",
-				"aria-label": (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref2 !== void 0 ? _ref2 : "Tag input",
+				"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Tag input",
 				"aria-required": required,
 				"aria-invalid": hasError,
 				"aria-describedby": describedBy,
@@ -3040,6 +3142,7 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 						"aria-label": "Selected tags",
 						className: "contents",
 						children: tags.map((tag, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+							disabled,
 							render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { ref: (el) => {
 								if (el) tagRefs.current.set(i, el);
 								else tagRefs.current.delete(i);
@@ -3072,6 +3175,7 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: inputRef,
+					id: tagInputId,
 					type: "text",
 					value: inputValue,
 					onChange: (e) => {
@@ -3087,7 +3191,7 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 					placeholder: tags.length === 0 ? placeholder : atLimit ? "" : "",
 					disabled: disabled || atLimit,
 					className: cn("min-w-[60px] flex-1 border-none bg-transparent text-sm outline-transparent", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE, "placeholder:text-text-tertiary"),
-					"aria-label": (_ref3 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref3 !== void 0 ? _ref3 : "Tag input",
+					"aria-label": (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref2 !== void 0 ? _ref2 : "Tag input",
 					role: suggestions ? "combobox" : void 0,
 					"aria-describedby": describedBy,
 					"aria-expanded": suggestions ? isOpen : void 0,
@@ -3100,7 +3204,7 @@ const TagInput = (0, react.forwardRef)(({ value, onChange, placeholder = "Add ta
 				ref: listboxRef,
 				id: listboxId,
 				role: "listbox",
-				"aria-label": (_ref4 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref4 !== void 0 ? _ref4 : "Tag suggestions",
+				"aria-label": (_ref3 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref3 !== void 0 ? _ref3 : "Tag suggestions",
 				className: "border-border bg-surface absolute top-full z-50 mt-1 max-h-48 w-full overflow-auto rounded-lg border shadow-md",
 				children: filtered.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 					id: `${listboxId}-${i}`,
@@ -3726,30 +3830,22 @@ const resizeStyles = {
 };
 /** Renders the form textarea component. */
 function FormTextarea(_ref3) {
-	var _ref4;
 	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
-	const form = useRequiredFormContext("FormTextarea");
-	const value = (_ref4 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
-	const error = form === null || form === void 0 ? void 0 : form.getError(name);
-	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
-	const hasError = Boolean(error && touched);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", _objectSpread2(_objectSpread2({
+	useRequiredFormContext("FormTextarea");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormTextarea, _objectSpread2(_objectSpread2({
 		name,
-		value,
-		onChange: (e) => form === null || form === void 0 ? void 0 : form.setValue(name, e.target.value),
-		className: cn("border-border bg-surface flex w-full rounded-lg border px-4 py-3", "text-text-primary placeholder:text-text-tertiary focus-visible:ring-ring focus-visible:ring-offset-ring-offset text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_FOCUS_VISIBLE, resizeStyles[resize], hasError && "border-danger", className),
-		rows,
-		"aria-invalid": hasError || void 0
+		className: cn("border-border bg-surface flex w-full rounded-lg border px-4 py-3", "text-text-primary placeholder:text-text-tertiary focus-visible:ring-ring focus-visible:ring-offset-ring-offset text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_FOCUS_VISIBLE, resizeStyles[resize], "aria-[invalid=true]:border-danger", className),
+		rows
 	}, props), {}, {
 		"data-opt-id": "Q8G2A",
 		"data-opt-slug": "form.FormTextarea"
 	}));
 }
 /** Renders the form select component. */
-function FormSelect({ name, children, className, placeholder, minWidth = 140, "aria-label": ariaLabel }) {
-	var _ref5;
+function FormSelect({ name, id, children, className, placeholder, minWidth = 140, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }) {
+	var _ref4;
 	const form = useRequiredFormContext("FormSelect");
-	const value = (_ref5 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref5 !== void 0 ? _ref5 : "";
+	const value = (_ref4 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
 	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
 	const hasError = Boolean(error && touched);
@@ -3763,7 +3859,10 @@ function FormSelect({ name, children, className, placeholder, minWidth = 140, "a
 		"data-opt-id": "A2XF7",
 		"data-opt-slug": "form.FormSelect",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectTrigger, {
+			id,
 			"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+			"aria-describedby": ariaDescribedBy,
+			onBlur: () => form.setFieldTouched(name, true),
 			"aria-invalid": hasError || void 0,
 			className: cn("inline-flex cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed", hasError && "border-danger", className),
 			style: { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth },
@@ -3772,16 +3871,16 @@ function FormSelect({ name, children, className, placeholder, minWidth = 140, "a
 	});
 }
 /** Renders the form select popover component. */
-function FormSelectPopover(_ref6) {
-	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4$1);
+function FormSelectPopover(_ref5) {
+	let { className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded4$1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectPopover, _objectSpread2(_objectSpread2({ className: cn(OPT_SURFACE_POPOVER, OPT_ANIMATE_ENTER_EXIT, "z-[120]", className) }, props), {}, {
 		"data-opt-id": "CQSPJ",
 		"data-opt-slug": "form.FormSelectPopover"
 	}));
 }
 /** Renders the form select item component. */
-function FormSelectItem(_ref7) {
-	let { className } = _ref7, props = _objectWithoutProperties(_ref7, _excluded5);
+function FormSelectItem(_ref6) {
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectItem, _objectSpread2(_objectSpread2({ className: cn("flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed", OPT_ITEM_BASE, OPT_ACTIVE_ITEM, className) }, props), {}, {
 		"data-opt-id": "J3970",
 		"data-opt-slug": "form.FormSelectItem"
@@ -3802,8 +3901,8 @@ const switchSizeStyles = {
 	}
 };
 /** Renders the form switch component. */
-function FormSwitch(_ref8) {
-	let { className, size = "md", name } = _ref8, props = _objectWithoutProperties(_ref8, _excluded6);
+function FormSwitch(_ref7) {
+	let { className, size = "md", name } = _ref7, props = _objectWithoutProperties(_ref7, _excluded6);
 	const styles = switchSizeStyles[size];
 	const form = useRequiredFormContext("FormSwitch");
 	const checked = Boolean((0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name));
@@ -3818,25 +3917,25 @@ function FormSwitch(_ref8) {
 	}));
 }
 /** Renders the form label component. */
-function FormLabel(_ref9) {
-	let { className } = _ref9, props = _objectWithoutProperties(_ref9, _excluded7);
+function FormLabel(_ref8) {
+	let { className } = _ref8, props = _objectWithoutProperties(_ref8, _excluded7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormLabel, _objectSpread2(_objectSpread2({ className: cn(labelClass, className) }, props), {}, {
 		"data-opt-id": "JHRKM",
 		"data-opt-slug": "form.FormLabel"
 	}));
 }
 /** Renders the form error component. */
-function FormError(_ref10) {
-	let { className } = _ref10, props = _objectWithoutProperties(_ref10, _excluded8);
+function FormError(_ref9) {
+	let { className } = _ref9, props = _objectWithoutProperties(_ref9, _excluded8);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormError, _objectSpread2(_objectSpread2({ className: cn(errorClass, className) }, props), {}, {
 		"data-opt-id": "E9NM4",
 		"data-opt-slug": "form.FormError"
 	}));
 }
 /** Renders the form submit component. */
-function FormSubmit(_ref11) {
+function FormSubmit(_ref10) {
 	var _form$isSubmitting;
-	let { className, disabled, children } = _ref11, props = _objectWithoutProperties(_ref11, _excluded9);
+	let { className, disabled, children } = _ref10, props = _objectWithoutProperties(_ref10, _excluded9);
 	const form = (0, _reopt_ai_opt_ui_primitives.useFormContext)();
 	const isSubmitting = (_form$isSubmitting = form === null || form === void 0 ? void 0 : form.isSubmitting()) !== null && _form$isSubmitting !== void 0 ? _form$isSubmitting : false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormSubmit, _objectSpread2(_objectSpread2({
@@ -3856,99 +3955,99 @@ function FormProvider(props) {
 	}));
 }
 /** Renders the form group component. */
-function FormGroup(_ref12) {
-	let { className } = _ref12, props = _objectWithoutProperties(_ref12, _excluded10);
+function FormGroup(_ref11) {
+	let { className } = _ref11, props = _objectWithoutProperties(_ref11, _excluded10);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormGroup, _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "89E8Q",
 		"data-opt-slug": "form.FormGroup"
 	}));
 }
 /** Renders the form group label component. */
-function FormGroupLabel(_ref13) {
-	let { className } = _ref13, props = _objectWithoutProperties(_ref13, _excluded11);
+function FormGroupLabel(_ref12) {
+	let { className } = _ref12, props = _objectWithoutProperties(_ref12, _excluded11);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormGroupLabel, _objectSpread2(_objectSpread2({ className: cn(labelClass, "font-semibold", className) }, props), {}, {
 		"data-opt-id": "W95BH",
 		"data-opt-slug": "form.FormGroupLabel"
 	}));
 }
 /** Renders the form description component. */
-function FormDescription(_ref14) {
-	let { className } = _ref14, props = _objectWithoutProperties(_ref14, _excluded12);
+function FormDescription(_ref13) {
+	let { className } = _ref13, props = _objectWithoutProperties(_ref13, _excluded12);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormDescription, _objectSpread2(_objectSpread2({ className: cn(descriptionClass, className) }, props), {}, {
 		"data-opt-id": "RFB40",
 		"data-opt-slug": "form.FormDescription"
 	}));
 }
 /** Renders the form field component. */
-function FormField(_ref15) {
-	let { className } = _ref15, props = _objectWithoutProperties(_ref15, _excluded13);
+function FormField(_ref14) {
+	let { className } = _ref14, props = _objectWithoutProperties(_ref14, _excluded13);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormField, _objectSpread2(_objectSpread2({ className: cn("gap-element flex flex-col", className) }, props), {}, {
 		"data-opt-id": "C68GP",
 		"data-opt-slug": "form.FormField"
 	}));
 }
 /** Renders the form control component. */
-function FormControl(_ref16) {
-	let { className } = _ref16, props = _objectWithoutProperties(_ref16, _excluded14);
+function FormControl(_ref15) {
+	let { className } = _ref15, props = _objectWithoutProperties(_ref15, _excluded14);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormControl, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
 		"data-opt-id": "XNF0F",
 		"data-opt-slug": "form.FormControl"
 	}));
 }
 /** Renders the form push component. */
-function FormPush(_ref17) {
-	let { className } = _ref17, props = _objectWithoutProperties(_ref17, _excluded15);
+function FormPush(_ref16) {
+	let { className } = _ref16, props = _objectWithoutProperties(_ref16, _excluded15);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormPush, _objectSpread2(_objectSpread2({ className: cn(OPT_BUTTON_SECONDARY, className) }, props), {}, {
 		"data-opt-id": "5SV8S",
 		"data-opt-slug": "form.FormPush"
 	}));
 }
 /** Renders the form remove component. */
-function FormRemove(_ref18) {
-	let { className } = _ref18, props = _objectWithoutProperties(_ref18, _excluded16);
+function FormRemove(_ref17) {
+	let { className } = _ref17, props = _objectWithoutProperties(_ref17, _excluded16);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormRemove, _objectSpread2(_objectSpread2({ className: cn("text-danger-fg hover:text-danger focus-visible:ring-ring focus-visible:ring-offset-ring-offset inline-flex items-center text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_FOCUS_VISIBLE, className) }, props), {}, {
 		"data-opt-id": "FEW6V",
 		"data-opt-slug": "form.FormRemove"
 	}));
 }
 /** Renders the form reset component. */
-function FormReset(_ref19) {
-	let { className } = _ref19, props = _objectWithoutProperties(_ref19, _excluded17);
+function FormReset(_ref18) {
+	let { className } = _ref18, props = _objectWithoutProperties(_ref18, _excluded17);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormReset, _objectSpread2(_objectSpread2({ className: cn(OPT_BUTTON_SECONDARY, className) }, props), {}, {
 		"data-opt-id": "M3FVB",
 		"data-opt-slug": "form.FormReset"
 	}));
 }
 /** Renders the form checkbox component. */
-function FormCheckbox(_ref20) {
-	let { className } = _ref20, props = _objectWithoutProperties(_ref20, _excluded18);
+function FormCheckbox(_ref19) {
+	let { className } = _ref19, props = _objectWithoutProperties(_ref19, _excluded18);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormCheckbox, _objectSpread2(_objectSpread2({ className: cn(checkboxClass, className) }, props), {}, {
 		"data-opt-id": "3BZS1",
 		"data-opt-slug": "form.FormCheckbox"
 	}));
 }
 /** Renders the form radio group component. */
-function FormRadioGroup(_ref21) {
-	let { className } = _ref21, props = _objectWithoutProperties(_ref21, _excluded19);
+function FormRadioGroup(_ref20) {
+	let { className } = _ref20, props = _objectWithoutProperties(_ref20, _excluded19);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormRadioGroup, _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "J8XRP",
 		"data-opt-slug": "form.FormRadioGroup"
 	}));
 }
 /** Renders the form radio component. */
-function FormRadio(_ref22) {
-	let { className } = _ref22, props = _objectWithoutProperties(_ref22, _excluded20);
+function FormRadio(_ref21) {
+	let { className } = _ref21, props = _objectWithoutProperties(_ref21, _excluded20);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormRadio, _objectSpread2(_objectSpread2({ className: cn(radioClass, className) }, props), {}, {
 		"data-opt-id": "YTN4Q",
 		"data-opt-slug": "form.FormRadio"
 	}));
 }
 /** Renders the form number input component. */
-function FormNumberInput(_ref23) {
-	var _ref24;
-	let { name } = _ref23, props = _objectWithoutProperties(_ref23, _excluded21);
+function FormNumberInput(_ref22) {
+	var _ref23;
+	let { name } = _ref22, props = _objectWithoutProperties(_ref22, _excluded21);
 	const form = useRequiredFormContext("FormNumberInput");
-	const value = (_ref24 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref24 !== void 0 ? _ref24 : 0;
+	const value = (_ref23 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref23 !== void 0 ? _ref23 : 0;
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
 	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, _objectSpread2(_objectSpread2({
@@ -3961,11 +4060,11 @@ function FormNumberInput(_ref23) {
 	}));
 }
 /** Renders the form slider component. */
-function FormSlider(_ref25) {
-	var _ref26;
-	let { name } = _ref25, props = _objectWithoutProperties(_ref25, _excluded22);
+function FormSlider(_ref24) {
+	var _ref25;
+	let { name } = _ref24, props = _objectWithoutProperties(_ref24, _excluded22);
 	const form = useRequiredFormContext("FormSlider");
-	const value = (_ref26 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref26 !== void 0 ? _ref26 : 0;
+	const value = (_ref25 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref25 !== void 0 ? _ref25 : 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, _objectSpread2(_objectSpread2({
 		value,
 		onChange: (v) => form.setValue(name, v)
@@ -3975,11 +4074,11 @@ function FormSlider(_ref25) {
 	}));
 }
 /** Renders the form star rating component. */
-function FormStarRating(_ref27) {
-	var _ref28;
-	let { name } = _ref27, props = _objectWithoutProperties(_ref27, _excluded23);
+function FormStarRating(_ref26) {
+	var _ref27;
+	let { name } = _ref26, props = _objectWithoutProperties(_ref26, _excluded23);
 	const form = useRequiredFormContext("FormStarRating");
-	const value = (_ref28 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref28 !== void 0 ? _ref28 : 0;
+	const value = (_ref27 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref27 !== void 0 ? _ref27 : 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StarRating, _objectSpread2(_objectSpread2({
 		value,
 		onChange: (v) => form.setValue(name, v)
@@ -3989,11 +4088,11 @@ function FormStarRating(_ref27) {
 	}));
 }
 /** Renders the form color picker component. */
-function FormColorPicker(_ref29) {
-	var _ref30;
-	let { name } = _ref29, props = _objectWithoutProperties(_ref29, _excluded24);
+function FormColorPicker(_ref28) {
+	var _ref29;
+	let { name } = _ref28, props = _objectWithoutProperties(_ref28, _excluded24);
 	const form = useRequiredFormContext("FormColorPicker");
-	const value = (_ref30 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref30 !== void 0 ? _ref30 : "#000000";
+	const value = (_ref29 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref29 !== void 0 ? _ref29 : "#000000";
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
 	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, _objectSpread2(_objectSpread2({
@@ -4006,11 +4105,11 @@ function FormColorPicker(_ref29) {
 	}));
 }
 /** Renders the form icon picker component. */
-function FormIconPicker(_ref31) {
-	var _ref32;
-	let { name } = _ref31, props = _objectWithoutProperties(_ref31, _excluded25);
+function FormIconPicker(_ref30) {
+	var _ref31;
+	let { name } = _ref30, props = _objectWithoutProperties(_ref30, _excluded25);
 	const form = useRequiredFormContext("FormIconPicker");
-	const value = (_ref32 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref32 !== void 0 ? _ref32 : "";
+	const value = (_ref31 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref31 !== void 0 ? _ref31 : "";
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
 	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPicker, _objectSpread2(_objectSpread2({
@@ -4023,11 +4122,11 @@ function FormIconPicker(_ref31) {
 	}));
 }
 /** Renders the form tag input component. */
-function FormTagInput(_ref33) {
-	var _ref34;
-	let { name } = _ref33, props = _objectWithoutProperties(_ref33, _excluded26);
+function FormTagInput(_ref32) {
+	var _ref33;
+	let { name } = _ref32, props = _objectWithoutProperties(_ref32, _excluded26);
 	const form = useRequiredFormContext("FormTagInput");
-	const value = (_ref34 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref34 !== void 0 ? _ref34 : [];
+	const value = (_ref33 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref33 !== void 0 ? _ref33 : [];
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
 	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagInput, _objectSpread2(_objectSpread2({
@@ -4040,11 +4139,11 @@ function FormTagInput(_ref33) {
 	}));
 }
 /** Renders the form date range picker component. */
-function FormDateRangePicker(_ref35) {
-	var _ref36;
-	let { name } = _ref35, props = _objectWithoutProperties(_ref35, _excluded27);
+function FormDateRangePicker(_ref34) {
+	var _ref35;
+	let { name } = _ref34, props = _objectWithoutProperties(_ref34, _excluded27);
 	const form = useRequiredFormContext("FormDateRangePicker");
-	const value = (_ref36 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref36 !== void 0 ? _ref36 : {
+	const value = (_ref35 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref35 !== void 0 ? _ref35 : {
 		start: null,
 		end: null
 	};
@@ -5865,6 +5964,18 @@ Object.defineProperty(exports, "Textarea", {
 		return Textarea;
 	}
 });
+Object.defineProperty(exports, "Toggle", {
+	enumerable: true,
+	get: function() {
+		return Toggle;
+	}
+});
+Object.defineProperty(exports, "ToggleGroup", {
+	enumerable: true,
+	get: function() {
+		return ToggleGroup;
+	}
+});
 Object.defineProperty(exports, "ToolbarButton", {
 	enumerable: true,
 	get: function() {
@@ -5967,6 +6078,12 @@ Object.defineProperty(exports, "getIconRegistryEntry", {
 		return getIconRegistryEntry;
 	}
 });
+Object.defineProperty(exports, "isComposingKey", {
+	enumerable: true,
+	get: function() {
+		return isComposingKey;
+	}
+});
 Object.defineProperty(exports, "koBreadcrumbLabels", {
 	enumerable: true,
 	get: function() {