@datum-cloud/datum-ui 0.6.0-alpha.b8a44ac → 0.6.1

package/dist/form/stepper/index.mjs

@@ -6,7 +6,6 @@ import { t as defineStepper } from "../../stepper-DvIOp0hh.mjs";
 import { CheckIcon } from "lucide-react";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { z } from "zod";
 //#region src/components/features/form/components/stepper/form-stepper.tsx
 const FormStepperContext = React$1.createContext(null);
 function useFormStepperContext() {
@@ -15,39 +14,6 @@ function useFormStepperContext() {
 	return context;
 }
 /**
-* Recursively unwrap ZodIntersection (from .and()) to extract the base ZodObject.
-*
-* Zod v4 schema types use `def.type` as a string discriminant:
-* - "intersection" (from .and()): merge left + right base objects
-* - "object": return directly
-*
-* Note: In Zod v4, .superRefine() and .refine() return `this` (no wrapper),
-* so only ZodIntersection needs unwrapping.
-*/
-function getBaseObject(schema) {
-	if (schema.def.type === "intersection") {
-		const intersectionDef = schema.def;
-		const left = getBaseObject(intersectionDef.left);
-		const right = getBaseObject(intersectionDef.right);
-		return left.merge(right);
-	}
-	if (schema.def.type !== "object") return z.object({});
-	return schema;
-}
-/**
-* Merge multiple zod schemas into one ZodObject for HTML constraint generation.
-* Handles ZodIntersection (.and()) by unwrapping to base ZodObject shapes.
-* Per-step validation still uses the original schemas with all refinements intact.
-*/
-function mergeSchemas(steps) {
-	if (steps.length === 0) throw new Error("Form.Stepper requires at least one step");
-	return steps.reduce((acc, step, index) => {
-		const base = getBaseObject(step.schema);
-		if (index === 0) return base;
-		return acc.merge(base);
-	}, {});
-}
-/**
 * Convert StepConfig[] to Stepperize step format
 */
 function toStepperizeSteps(steps) {
@@ -89,7 +55,7 @@ function toStepperizeSteps(steps) {
 * </Form.Stepper>
 * ```
 */
-function FormStepper({ steps, children, onComplete, onStepChange, initialStep, className, defaultValues, id, formComponent }) {
+function FormStepper({ steps, children, onComplete, onStepChange, initialStep, className, defaultValues, id, formComponent, mode = "onSubmit" }) {
 	const stepperDef = React$1.useMemo(() => {
 		return defineStepper(...toStepperizeSteps(steps));
 	}, [steps]);
@@ -111,19 +77,19 @@ function FormStepper({ steps, children, onComplete, onStepChange, initialStep, c
 			defaultValues,
 			id,
 			formComponent,
+			mode,
 			children
 		})
 	});
 }
 FormStepper.displayName = "Form.Stepper";
-function FormStepperContent({ steps, stepperDef, children, onComplete, onStepChange, className, defaultValues, id, formComponent }) {
+function FormStepperContent({ steps, stepperDef, children, onComplete, onStepChange, className, defaultValues, id, formComponent, mode }) {
 	const { useStepper } = stepperDef;
 	const stepper = useStepper();
 	return /* @__PURE__ */ jsx(StepForm, {
 		steps,
 		stepper,
 		currentStepConfig: React$1.useMemo(() => steps.find((s) => s.id === stepper.state.current.data.id) ?? steps[0], [steps, stepper.state.current.data.id]),
-		combinedSchema: React$1.useMemo(() => mergeSchemas(steps), [steps]),
 		storedValues: React$1.useMemo(() => {
 			const allMetadata = steps.reduce((acc, step) => ({
 				...acc,
@@ -144,15 +110,20 @@ function FormStepperContent({ steps, stepperDef, children, onComplete, onStepCha
 		className,
 		id,
 		formComponent,
+		mode,
 		children
 	}, stepper.state.current.data.id);
 }
-function StepForm({ steps, stepper, currentStepConfig, combinedSchema: _combinedSchema, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form" }) {
+function StepForm({ steps, stepper, currentStepConfig, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form", mode }) {
 	const adapter = useAdapter();
 	const [isSubmitting, setIsSubmitting] = React$1.useState(false);
+	const [isSubmitted, setIsSubmitted] = React$1.useState(false);
+	const [submitCount, setSubmitCount] = React$1.useState(0);
 	const formRef = React$1.useRef(null);
 	const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
 	const handleStepSubmit = React$1.useCallback(async (data) => {
+		setIsSubmitted(true);
+		setSubmitCount((prev) => prev + 1);
 		stepper.metadata.set(stepper.state.current.data.id, data);
 		if (stepper.state.isLast) {
 			setIsSubmitting(true);
@@ -183,7 +154,7 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema: _combined
 	const instance = adapter.useCreateForm({
 		schema: currentStepConfig.schema,
 		defaultValues: storedValues,
-		mode: "onSubmit",
+		mode,
 		id: `${id ?? "stepper"}-${currentStepConfig.id}`,
 		onSubmit: handleStepSubmit,
 		formRef
@@ -253,16 +224,23 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema: _combined
 		isSubmitting,
 		isDirty: instance.formState.isDirty,
 		isValid: instance.formState.isValid,
-		isSubmitted: instance.formState.isSubmitted,
-		submitCount: instance.formState.submitCount,
+		isSubmitted,
+		submitCount,
 		dirtyFields: instance.formState.dirtyFields,
 		touchedFields: instance.formState.touchedFields,
+		mode,
+		displayTouchedFields: instance.touchedFields,
+		markFieldTouched: instance.markFieldTouched,
+		markAllFieldsTouched: instance.markAllFieldsTouched,
 		submit: () => formRef.current?.requestSubmit(),
 		reset: () => instance.reset(),
 		formId: instance.id
 	}), [
 		instance,
 		isSubmitting,
+		isSubmitted,
+		submitCount,
+		mode,
 		instance.formState
 	]);
 	const renderProps = {

package/dist/{form-mlNLKaB5.mjs → form-B3rQ4CH9.mjs}

@@ -10,17 +10,18 @@ import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u
 import { t as Tooltip } from "./tooltip-Cruvl5F6.mjs";
 import { t as Switch } from "./switch-DQJQhPIQ.mjs";
 import { t as Textarea } from "./textarea-BwD-MmTV.mjs";
-import { t as Autocomplete } from "./autocomplete-V5-qslzS.mjs";
-import { t as CalendarDatePicker } from "./calendar-date-picker-DWK94_DC.mjs";
+import { t as Autocomplete } from "./autocomplete-CkYJueBL.mjs";
+import { t as CalendarDatePicker } from "./calendar-date-picker-CDT-8Ha8.mjs";
 import { t as toast } from "./toast-BWnN5fax.mjs";
+import { Autosearch } from "./autosearch/index.mjs";
 import { n as useFormContext$1, t as FormProvider } from "./form-context-Ccxm-wqL.mjs";
-import { t as Combobox } from "./combobox-cKTFK4uN.mjs";
+import { t as Combobox } from "./combobox-B-C9lJeD.mjs";
 import { t as useCopyToClipboard } from "./use-copy-to-clipboard-uNeeVHC4.mjs";
-import { t as DateTimePicker } from "./date-time-picker-Dy2jrJoN.mjs";
+import { t as DateTimePicker } from "./date-time-picker-BomrW07W.mjs";
 import { n as useAdapter } from "./adapter-context-rWveHhDd.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { t as TimePicker } from "./time-picker-BoF7pZZ2.mjs";
-import { t as Transfer } from "./transfer-B2n8pgEQ.mjs";
+import { t as Transfer } from "./transfer-46C-rFFW.mjs";
 import { CheckIcon, CircleHelp, CopyIcon } from "lucide-react";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -94,7 +95,10 @@ function FormAutocomplete({ disabled, className, ...props }) {
 		name: fieldState?.name,
 		id,
 		value,
-		onValueChange: (val) => fieldState?.change(val),
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
 		disabled: isDisabled,
 		triggerClassName: cn(hasErrors && "border-destructive", props.triggerClassName),
 		className
@@ -104,23 +108,54 @@ FormAutocomplete.displayName = "Form.Autocomplete";
 //#endregion
 //#region src/components/features/form/components/form-autosearch.tsx
 /**
-* Form.Autosearch - Alias to Form.Autocomplete with search-first focus
+* Form.Autosearch - Search-first input with dropdown results
 *
-* This is a convenience wrapper around Form.Autocomplete that emphasizes
-* the search functionality. It's functionally identical to Form.Autocomplete.
+* Automatically wired to the parent Form.Field context.
+* Shows a text input that triggers search and displays results in a popover.
+* Different from Form.Autocomplete which shows all options upfront.
 *
 * @example Basic usage
 * ```tsx
-* <Form.Field name="search" label="Search">
+* <Form.Field name="userId" label="User" required>
+*   <Form.Autosearch
+*     options={users}
+*     onSearch={handleSearch}
+*     loading={isSearching}
+*     placeholder="Search users..."
+*   />
+* </Form.Field>
+* ```
+*
+* @example With debounce control
+* ```tsx
+* <Form.Field name="email" label="Email">
 *   <Form.Autosearch
-*     options={options}
-*     placeholder="Type to search..."
+*     options={searchResults}
+*     onSearch={debouncedSearch}
+*     searchDebounceMs={500}
+*     placeholder="Type email to search..."
 *   />
 * </Form.Field>
 * ```
 */
-function FormAutosearch(props) {
-	return /* @__PURE__ */ jsx(FormAutocomplete, { ...props });
+function FormAutosearch({ disabled, className, inputClassName, ...props }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
+	return /* @__PURE__ */ jsx(Autosearch, {
+		...props,
+		name: fieldState?.name,
+		id,
+		value,
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
+		disabled: isDisabled,
+		inputClassName: cn(hasErrors && "border-destructive", inputClassName),
+		className
+	});
 }
 FormAutosearch.displayName = "Form.Autosearch";
 //#endregion
@@ -180,7 +215,10 @@ function FormCheckbox({ label, disabled, className }) {
 		children: [/* @__PURE__ */ jsx(Checkbox, {
 			id,
 			checked,
-			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			onCheckedChange: (value) => {
+				fieldState?.change(Boolean(value));
+				fieldState?.blur();
+			},
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
 			"aria-describedby": hasErrors ? `${id}-error` : void 0
@@ -194,12 +232,13 @@ function FormCheckbox({ label, disabled, className }) {
 FormCheckbox.displayName = "Form.Checkbox";
 //#endregion
 //#region src/components/features/form/components/form-combobox.tsx
-function FormCombobox({ options, placeholder, searchPlaceholder, emptyMessage, disabled, className, triggerClassName, contentClassName, searchable = true, showDropdownArrow = true, clearable = false, "data-testid": testId }) {
+function FormCombobox({ options, placeholder, searchPlaceholder, emptyMessage, disabled, className, triggerClassName, contentClassName, searchable = true, showDropdownArrow = true, clearable = false, "data-testid": testId, modal }) {
 	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
 	const handleChange = React$1.useCallback((value) => {
 		fieldState?.change(value ?? "");
+		fieldState?.blur();
 	}, [fieldState]);
 	return /* @__PURE__ */ jsx(Combobox, {
 		id,
@@ -213,6 +252,7 @@ function FormCombobox({ options, placeholder, searchPlaceholder, emptyMessage, d
 		searchable,
 		showDropdownArrow,
 		clearable,
+		modal,
 		className,
 		triggerClassName: cn(hasErrors && "border-destructive", triggerClassName),
 		contentClassName,
@@ -329,7 +369,7 @@ function FormCustom({ children }) {
 FormCustom.displayName = "Form.Custom";
 //#endregion
 //#region src/components/features/form/components/form-date-picker.tsx
-function FormDatePicker({ placeholder, disabled, className, triggerClassName, numberOfMonths = 1, minDate: minDateProp, maxDate: maxDateProp, disableFuture, disablePast }) {
+function FormDatePicker({ placeholder, disabled, className, triggerClassName, numberOfMonths = 1, minDate: minDateProp, maxDate: maxDateProp, disableFuture, disablePast, modal }) {
 	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
@@ -364,6 +404,7 @@ function FormDatePicker({ placeholder, disabled, className, triggerClassName, nu
 		onDateSelect: React$1.useCallback((range) => {
 			if (!range) {
 				fieldState?.change(void 0);
+				fieldState?.blur();
 				return;
 			}
 			if (numberOfMonths === 1) fieldState?.change(range.from.toISOString());
@@ -371,6 +412,7 @@ function FormDatePicker({ placeholder, disabled, className, triggerClassName, nu
 				from: range.from.toISOString(),
 				to: range.to?.toISOString()
 			});
+			fieldState?.blur();
 		}, [fieldState, numberOfMonths]),
 		numberOfMonths,
 		placeholder,
@@ -380,6 +422,7 @@ function FormDatePicker({ placeholder, disabled, className, triggerClassName, nu
 		disableFuture,
 		disablePast,
 		variant: "outline",
+		modal,
 		className: cn(className),
 		triggerClassName: cn(triggerClassName),
 		"aria-invalid": hasErrors || void 0,
@@ -389,7 +432,7 @@ function FormDatePicker({ placeholder, disabled, className, triggerClassName, nu
 FormDatePicker.displayName = "Form.DatePicker";
 //#endregion
 //#region src/components/features/form/components/form-date-time-picker.tsx
-function FormDateTimePicker({ minDate: minDateProp, maxDate: maxDateProp, disabledDates, timezone, showTimezoneIndicator, placeholder, disabled, className }) {
+function FormDateTimePicker({ minDate: minDateProp, maxDate: maxDateProp, disabledDates, timezone, showTimezoneIndicator, placeholder, disabled, className, modal }) {
 	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
@@ -404,6 +447,7 @@ function FormDateTimePicker({ minDate: minDateProp, maxDate: maxDateProp, disabl
 		value: currentValue,
 		onChange: React$1.useCallback((value) => {
 			fieldState?.change(value);
+			fieldState?.blur();
 		}, [fieldState]),
 		minDate,
 		maxDate,
@@ -412,6 +456,7 @@ function FormDateTimePicker({ minDate: minDateProp, maxDate: maxDateProp, disabl
 		showTimezoneIndicator,
 		placeholder,
 		disabled: isDisabled,
+		modal,
 		className: cn(className),
 		"aria-invalid": hasErrors || void 0,
 		"aria-describedby": hasErrors ? `${id}-error` : void 0
@@ -661,10 +706,33 @@ function FieldLabel({ htmlFor, label, hasErrors, required, tooltip, className })
 */
 function FormField({ name, children, label, description, tooltip, required = false, disabled = false, className, labelClassName }) {
 	const adapter = useAdapter();
-	const { fields, isSubmitting, form } = useFormContext$1();
+	const { fields, isSubmitting, form, mode, displayTouchedFields, markFieldTouched } = useFormContext$1();
 	const fieldState = adapter.useField(name);
-	const errors = fieldState.errors;
+	const isDisplayTouched = displayTouchedFields.includes(name);
+	const rawErrors = fieldState.errors;
+	const errors = isDisplayTouched ? rawErrors : [];
 	const hasErrors = errors.length > 0;
+	const hasFocusedRef = React$1.useRef(false);
+	React$1.useEffect(() => {
+		hasFocusedRef.current = false;
+	}, [name]);
+	const handleFocus = React$1.useCallback((e) => {
+		if (e.target.type !== "hidden") hasFocusedRef.current = true;
+	}, []);
+	const handleChange = React$1.useCallback(() => {
+		if (mode === "onChange" && hasFocusedRef.current) markFieldTouched(name);
+	}, [
+		mode,
+		name,
+		markFieldTouched
+	]);
+	const handleBlur = React$1.useCallback(() => {
+		if ((mode === "onChange" || mode === "onBlur") && hasFocusedRef.current) markFieldTouched(name);
+	}, [
+		mode,
+		name,
+		markFieldTouched
+	]);
 	const fieldId = fieldState.id;
 	const descriptionId = description ? `${fieldId}-description` : void 0;
 	const errorId = hasErrors ? `${fieldId}-error` : void 0;
@@ -711,6 +779,9 @@ function FormField({ name, children, label, description, tooltip, required = fal
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("flex flex-col space-y-2", className),
+			onFocusCapture: handleFocus,
+			onChange: handleChange,
+			onBlur: handleBlur,
 			children: [
 				label && /* @__PURE__ */ jsx(FieldLabel, {
 					htmlFor: fieldId,
@@ -866,7 +937,10 @@ function FormRadioGroup({ orientation = "vertical", disabled, className, childre
 	const hasErrors = errors && errors.length > 0;
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		value: fieldState?.value != null ? String(fieldState.value) : void 0,
-		onValueChange: (val) => fieldState?.change(val),
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
 		disabled: isDisabled,
 		"aria-invalid": hasErrors || void 0,
 		"aria-describedby": hasErrors ? `${id}-error` : void 0,
@@ -931,7 +1005,7 @@ FormRadioItem.displayName = "Form.RadioItem";
 * </Form.Root>
 * ```
 */
-function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onBlur", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
+function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onChange", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
 	const adapter = useAdapter();
 	const [internalIsSubmitting, setInternalIsSubmitting] = React$1.useState(false);
 	const isSubmitting = externalIsSubmitting ?? internalIsSubmitting;
@@ -991,6 +1065,10 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 		submitCount,
 		dirtyFields: formState.dirtyFields,
 		touchedFields: formState.touchedFields,
+		mode,
+		displayTouchedFields: instance.touchedFields,
+		markFieldTouched: instance.markFieldTouched,
+		markAllFieldsTouched: instance.markAllFieldsTouched,
 		submit: () => formRef.current?.requestSubmit(),
 		reset: () => instance.reset(),
 		formId: instance.id
@@ -999,31 +1077,26 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 		isSubmitting,
 		formState,
 		isSubmitted,
-		submitCount
-	]);
-	const isRenderFunction = typeof children === "function";
-	const renderProps = React$1.useMemo(() => ({
-		form: instance,
-		fields: instance.fields,
-		isSubmitting,
-		isDirty: formState.isDirty,
-		isValid: formState.isValid,
-		isSubmitted,
 		submitCount,
-		dirtyFields: formState.dirtyFields,
-		touchedFields: formState.touchedFields,
-		submit: () => formRef.current?.requestSubmit(),
-		reset: () => instance.reset()
-	}), [
-		instance,
-		isSubmitting,
-		formState,
-		isSubmitted,
-		submitCount
+		mode
 	]);
+	const isRenderFunction = typeof children === "function";
 	const renderChildren = () => {
-		if (isRenderFunction) return children(renderProps);
-		return children;
+		if (!isRenderFunction) return children;
+		return children({
+			form: instance,
+			fields: instance.fields,
+			isSubmitting,
+			isDirty: formState.isDirty,
+			isValid: formState.isValid,
+			isSubmitted,
+			submitCount,
+			dirtyFields: formState.dirtyFields,
+			touchedFields: formState.touchedFields,
+			mode,
+			submit: () => formRef.current?.requestSubmit(),
+			reset: () => instance.reset()
+		});
 	};
 	return /* @__PURE__ */ jsx(FormProvider, {
 		value: contextValue,
@@ -1038,7 +1111,9 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 				autoComplete: "off",
 				noValidate: true,
 				onSubmit: (e) => {
+					const submitter = e.nativeEvent.submitter;
 					e.stopPropagation();
+					if (submitter && !submitter.hidden) instance.markAllFieldsTouched();
 					telemetry?.onSubmit?.({
 						formName: name ?? "",
 						formId: id
@@ -1153,7 +1228,10 @@ function FormSwitch({ label, disabled, className }) {
 		children: [/* @__PURE__ */ jsx(Switch, {
 			id,
 			checked,
-			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			onCheckedChange: (value) => {
+				fieldState?.change(Boolean(value));
+				fieldState?.blur();
+			},
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
 			"aria-describedby": hasErrors ? `${id}-error` : void 0
@@ -1210,6 +1288,7 @@ function FormTimePicker({ min, max, step, placeholder, disabled, className }) {
 		value: fieldState?.value ?? "",
 		onChange: React$1.useCallback((value) => {
 			fieldState?.change(value || void 0);
+			fieldState?.blur();
 		}, [fieldState]),
 		min,
 		max,
@@ -1250,6 +1329,7 @@ function FormTransfer({ disabled, minItems, maxItems, ...props }) {
 	const value = Array.isArray(fieldState?.value) ? fieldState.value : [];
 	const handleChange = React$1.useCallback((newValue) => {
 		fieldState?.change(newValue);
+		fieldState?.blur();
 	}, [fieldState]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		"aria-invalid": hasErrors || void 0,
@@ -1261,7 +1341,7 @@ function FormTransfer({ disabled, minItems, maxItems, ...props }) {
 			disabled: isDisabled
 		})
 	}), (minItems != null || maxItems != null) && /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-muted-foreground mt-2",
+		className: "text-ring text-xs text-wrap mt-2",
 		children: minItems != null && maxItems != null ? `Select between ${minItems} and ${maxItems} items` : minItems != null ? `Select at least ${minItems} items` : `Select up to ${maxItems} items`
 	})] });
 }
@@ -1348,6 +1428,10 @@ FormWhen.displayName = "Form.When";
 * Hook to access and control a specific field.
 * Delegates to the active adapter's useField implementation.
 *
+* Note: `meta.disabled` is always `false` because this hook operates
+* independently of Form.Field. If you need disabled state, read it
+* from your component props or from the Form.Field context via `useFieldContext()`.
+*
 * @example
 * ```tsx
 * function MyCustomInput({ name }: { name: string }) {

package/dist/index.mjs

@@ -39,9 +39,9 @@ import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragrap
 import { t as VisuallyHidden } from "./visuallyhidden-BLUsJpYH.mjs";
 import { n as NavMenu, t as AppNavigation } from "./app-navigation-84ro28PU.mjs";
 import { t as LoaderOverlay } from "./loader-overlay-BTFdkp7W.mjs";
-import { t as Autocomplete } from "./autocomplete-V5-qslzS.mjs";
+import { t as Autocomplete } from "./autocomplete-CkYJueBL.mjs";
 import { n as avatarStackVariants, t as AvatarStack } from "./avatar-stack-oVr8tsU7.mjs";
-import { t as CalendarDatePicker } from "./calendar-date-picker-DWK94_DC.mjs";
+import { t as CalendarDatePicker } from "./calendar-date-picker-CDT-8Ha8.mjs";
 import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider } from "./themes-DG1md8FI.mjs";
 import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "./types-BZNk3q65.mjs";
 import { t as toast } from "./toast-BWnN5fax.mjs";
@@ -49,7 +49,7 @@ import { n as Toaster, t as useToast } from "./toast-DpxlFNNx.mjs";
 import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "./dropdown-DZiAt-jS.mjs";
 import { i as FileInputButton, n as DropzoneContent, r as DropzoneEmptyState, t as Dropzone } from "./dropzone-ogtpQ4fy.mjs";
 import { t as EmptyContent } from "./empty-content-C63GPJ5d.mjs";
-import { A as FormCheckbox, C as FormDialog, D as FormCustom, E as FormDatePicker, M as FormAutosearch, N as FormAutocomplete, O as FormCopyBox, S as FormError, T as FormDateTimePicker, _ as FormRadioGroup, a as useField, b as FormFieldArray, c as useWatchAll, d as FormTextarea, f as FormSwitch, g as FormRoot, h as FormSelectItem, i as useFieldContext, j as FormButton, k as FormCombobox, l as FormTransfer, m as FormSelect, n as useFormState, o as FormWhen, p as FormSubmit, r as useFormContext, s as useWatch, t as Form, u as FormTimePicker, v as FormRadioItem, w as FormDescription, x as FormField, y as FormInput } from "./form-mlNLKaB5.mjs";
+import { A as FormCheckbox, C as FormDialog, D as FormCustom, E as FormDatePicker, M as FormAutosearch, N as FormAutocomplete, O as FormCopyBox, S as FormError, T as FormDateTimePicker, _ as FormRadioGroup, a as useField, b as FormFieldArray, c as useWatchAll, d as FormTextarea, f as FormSwitch, g as FormRoot, h as FormSelectItem, i as useFieldContext, j as FormButton, k as FormCombobox, l as FormTransfer, m as FormSelect, n as useFormState, o as FormWhen, p as FormSubmit, r as useFormContext, s as useWatch, t as Form, u as FormTimePicker, v as FormRadioItem, w as FormDescription, x as FormField, y as FormInput } from "./form-B3rQ4CH9.mjs";
 import { t as useCopyToClipboard } from "./use-copy-to-clipboard-uNeeVHC4.mjs";
 import { n as useAdapter, t as FormAdapterProvider } from "./adapter-context-rWveHhDd.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";

package/dist/transfer/index.mjs

@@ -1,2 +1,2 @@
-import { t as Transfer } from "../transfer-B2n8pgEQ.mjs";
+import { t as Transfer } from "../transfer-46C-rFFW.mjs";
 export { Transfer };

package/dist/{transfer-B2n8pgEQ.mjs → transfer-46C-rFFW.mjs}

@@ -203,22 +203,26 @@ function Transfer({ items, value, onChange, itemKey, itemLabel, itemGroup, searc
 		itemLabel,
 		itemGroup
 	});
-	const handleSelect = (key) => {
+	const handleSelect = React$1.useCallback((key) => {
 		if (value.includes(key)) return;
 		onChange([...value, key]);
-	};
-	const handleDeselect = (key) => {
+	}, [value, onChange]);
+	const handleDeselect = React$1.useCallback((key) => {
 		onChange(value.filter((k) => k !== key));
-	};
-	const handleSelectAll = () => {
+	}, [value, onChange]);
+	const handleSelectAll = React$1.useCallback(() => {
 		const sourceKeys = state.filteredSourceItems.map((item) => item.key);
 		const existing = new Set(value);
 		const newKeys = sourceKeys.filter((k) => !existing.has(k));
 		onChange([...value, ...newKeys]);
-	};
-	const handleClearAll = () => {
+	}, [
+		state.filteredSourceItems,
+		value,
+		onChange
+	]);
+	const handleClearAll = React$1.useCallback(() => {
 		onChange([]);
-	};
+	}, [onChange]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-[400px]", className),
 		children: [/* @__PURE__ */ jsx("div", {

package/dist/{get-field-constraints-BicgDkfH.mjs → use-display-touched-I39aXEBD.mjs}

@@ -1,3 +1,4 @@
+import * as React$1 from "react";
 import "zod";
 //#region src/components/features/form/utils/zod-helpers.ts
 /**
@@ -48,4 +49,35 @@ function isRequired(schema) {
 	return true;
 }
 //#endregion
-export { getObjectShape as n, getFieldConstraints as t };
+//#region src/components/features/form/hooks/use-display-touched.ts
+/**
+* Shared display-level touched tracking, independent of adapter-specific blur tracking.
+*
+* "Display-touched" controls whether a field's errors are shown in the UI.
+* This is separate from the adapter's `isTouched` (which tracks focusout events).
+*
+* Used by both RHF and Conform adapters to provide consistent error display
+* behaviour across validation modes (onChange, onBlur, onSubmit).
+*/
+function useDisplayTouched(schema) {
+	const [touchedSet, setTouchedSet] = React$1.useState(/* @__PURE__ */ new Set());
+	const markFieldTouched = React$1.useCallback((fieldName) => {
+		setTouchedSet((prev) => {
+			if (prev.has(fieldName)) return prev;
+			const next = new Set(prev);
+			next.add(fieldName);
+			return next;
+		});
+	}, []);
+	const markAllFieldsTouched = React$1.useCallback(() => {
+		const allFieldNames = Object.keys(getFieldConstraints(schema));
+		setTouchedSet(new Set(allFieldNames));
+	}, [schema]);
+	return {
+		displayTouchedFields: React$1.useMemo(() => Array.from(touchedSet), [touchedSet]),
+		markFieldTouched,
+		markAllFieldsTouched
+	};
+}
+//#endregion
+export { getFieldConstraints as n, getObjectShape as r, useDisplayTouched as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "0.6.0-alpha.b8a44ac",
+  "version": "0.6.1",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -204,6 +204,11 @@
       "types": "./dist/components/features/autocomplete/index.d.ts",
       "default": "./dist/autocomplete/index.mjs"
     },
+    "./autosearch": {
+      "source": "./src/components/features/autosearch/index.ts",
+      "types": "./dist/components/features/autosearch/index.d.ts",
+      "default": "./dist/autosearch/index.mjs"
+    },
     "./combobox": {
       "source": "./src/components/features/combobox/index.ts",
       "types": "./dist/components/features/combobox/index.d.ts",
@@ -358,7 +363,7 @@
     "@conform-to/zod": ">=1",
     "@dnd-kit/core": ">=6",
     "@dnd-kit/sortable": ">=8",
-    "@hookform/resolvers": ">=5",
+    "@hookform/resolvers": ">=5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": ">=4",
     "@tanstack/react-table": ">=8",
@@ -495,7 +500,7 @@
     "@radix-ui/react-tabs": "^1",
     "@radix-ui/react-tooltip": "^1",
     "@radix-ui/react-visually-hidden": "^1",
-    "class-variance-authority": "^0.7",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1",
     "tailwind-merge": "^3.5.0",