@povio/ui 3.3.0 → 3.4.0-rc.2

package/dist/components/inputs/DateTime/shared/DateField.d.ts

@@ -15,6 +15,7 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     timeZone?: string;
     segmentGroup?: string;
     shouldAutoFixYear?: boolean;
+    preserveNullValue?: boolean;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, preserveNullValue, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/DateField.js

@@ -9,10 +9,10 @@ import { DateTime } from "luxon";
 import { useDateFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/shared/DateField.tsx
 var omitNullValue = ({ value: _value, ...props }) => props;
-var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, ...props }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, preserveNullValue = false, ...props }) => {
 	const { locale } = useLocale();
 	const previousValueRef = useRef(props.value);
-	const dateFieldProps = props.value == null ? omitNullValue(props) : props;
+	const dateFieldProps = props.value == null && !preserveNullValue ? omitNullValue(props) : props;
 	const state = useDateFieldState({
 		...dateFieldProps,
 		isDisabled,

package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -39,8 +39,7 @@ interface DatePickerInputProps extends InputVariantProps {
     timeZone?: string;
     isTimeOptional?: boolean;
     format?: string;
-    fireBlurOnChange?: boolean;
     onClear?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone: timeZoneProp, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone: timeZoneProp, isTimeOptional, format, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -17,7 +17,7 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, fireBlurOnChange, onClear: onClearProp, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();
@@ -51,22 +51,17 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 		shouldAutoFixYear: autoFixYear
 	} : void 0;
 	const clearInput = useCallback(() => {
-		dateFieldRef.current?.clearField();
-		endDateFieldRef.current?.clearField();
 		if (onClearProp) onClearProp();
 		else {
+			dateFieldRef.current?.clearField();
+			endDateFieldRef.current?.clearField();
 			fieldProps.onChange?.(null);
 			endFieldProps?.onChange?.(null);
-			if (fireBlurOnChange) {
-				fieldProps.onBlur?.(null);
-				endFieldProps?.onBlur?.(null);
-			}
 		}
 		setCanClear(false);
 	}, [
 		endFieldProps,
 		fieldProps,
-		fireBlurOnChange,
 		onClearProp
 	]);
 	useImperativeHandle(ref, () => ({
@@ -88,10 +83,6 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 			fieldProps.onChange?.(today(effectiveTimeZone));
 			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
-		if (fireBlurOnChange) {
-			fieldProps.onBlur?.(null);
-			endFieldProps?.onBlur?.(null);
-		}
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	const todayIconButton = renderDatePickerTodayIcon(todayIcon, {
@@ -159,6 +150,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 							disableManualEntry,
 							dateGranularity,
 							isTimeOptional,
+							preserveNullValue: isValueControlled && !endFieldProps,
 							format,
 							timeZone: effectiveTimeZone,
 							segmentGroup: normalizedEndFieldProps ? "start" : void 0

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -19,7 +19,6 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onPress: () => void;
     onClear?: () => void;
-    fireBlurOnChange?: boolean;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -16,8 +16,8 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
 var TimePickerInput = (t0) => {
-	const $ = c(69);
-	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props } = t0;
+	const $ = c(67);
+	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, ...props } = t0;
 	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
@@ -147,25 +147,22 @@ var TimePickerInput = (t0) => {
 		$[32] = t22;
 	} else t22 = $[32];
 	let t23;
-	if ($[33] !== canClear || $[34] !== fieldProps || $[35] !== fireBlurOnChange || $[36] !== isClearable || $[37] !== onClear || $[38] !== state) {
+	if ($[33] !== canClear || $[34] !== isClearable || $[35] !== onClear || $[36] !== state) {
 		t23 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
-				state.setValue(null);
-				onClear?.();
-				if (fireBlurOnChange) fieldProps.onBlur?.(null);
+				if (onClear) onClear();
+				else state.setValue(null);
 			},
 			show: canClear
 		});
 		$[33] = canClear;
-		$[34] = fieldProps;
-		$[35] = fireBlurOnChange;
-		$[36] = isClearable;
-		$[37] = onClear;
-		$[38] = state;
-		$[39] = t23;
-	} else t23 = $[39];
+		$[34] = isClearable;
+		$[35] = onClear;
+		$[36] = state;
+		$[37] = t23;
+	} else t23 = $[37];
 	let t24;
-	if ($[40] !== disableDropdown || $[41] !== disableManualEntry || $[42] !== isDisabled || $[43] !== onPress || $[44] !== uiConfig) {
+	if ($[38] !== disableDropdown || $[39] !== disableManualEntry || $[40] !== isDisabled || $[41] !== onPress || $[42] !== uiConfig) {
 		t24 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 			label: "",
 			color: "secondary",
@@ -175,26 +172,26 @@ var TimePickerInput = (t0) => {
 			className: "border-0!",
 			"data-static-press-action": ""
 		});
-		$[40] = disableDropdown;
-		$[41] = disableManualEntry;
-		$[42] = isDisabled;
-		$[43] = onPress;
-		$[44] = uiConfig;
-		$[45] = t24;
-	} else t24 = $[45];
+		$[38] = disableDropdown;
+		$[39] = disableManualEntry;
+		$[40] = isDisabled;
+		$[41] = onPress;
+		$[42] = uiConfig;
+		$[43] = t24;
+	} else t24 = $[43];
 	let t25;
-	if ($[46] !== t22 || $[47] !== t23 || $[48] !== t24) {
+	if ($[44] !== t22 || $[45] !== t23 || $[46] !== t24) {
 		t25 = /* @__PURE__ */ jsxs("div", {
 			className: t22,
 			children: [t23, t24]
 		});
-		$[46] = t22;
-		$[47] = t23;
-		$[48] = t24;
-		$[49] = t25;
-	} else t25 = $[49];
+		$[44] = t22;
+		$[45] = t23;
+		$[46] = t24;
+		$[47] = t25;
+	} else t25 = $[47];
 	let t26;
-	if ($[50] !== fieldProps || $[51] !== focusWithinProps || $[52] !== hoverProps || $[53] !== t10 || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== t21 || $[61] !== t25 || $[62] !== t4 || $[63] !== t5 || $[64] !== t6 || $[65] !== t7 || $[66] !== t8 || $[67] !== t9) {
+	if ($[48] !== fieldProps || $[49] !== focusWithinProps || $[50] !== hoverProps || $[51] !== t10 || $[52] !== t11 || $[53] !== t12 || $[54] !== t13 || $[55] !== t14 || $[56] !== t15 || $[57] !== t16 || $[58] !== t21 || $[59] !== t25 || $[60] !== t4 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9) {
 		t26 = /* @__PURE__ */ jsxs("div", {
 			ref: t4,
 			className: t5,
@@ -216,26 +213,26 @@ var TimePickerInput = (t0) => {
 			...hoverProps,
 			children: [t21, t25]
 		});
-		$[50] = fieldProps;
-		$[51] = focusWithinProps;
-		$[52] = hoverProps;
-		$[53] = t10;
-		$[54] = t11;
-		$[55] = t12;
-		$[56] = t13;
-		$[57] = t14;
-		$[58] = t15;
-		$[59] = t16;
-		$[60] = t21;
-		$[61] = t25;
-		$[62] = t4;
-		$[63] = t5;
-		$[64] = t6;
-		$[65] = t7;
-		$[66] = t8;
-		$[67] = t9;
-		$[68] = t26;
-	} else t26 = $[68];
+		$[48] = fieldProps;
+		$[49] = focusWithinProps;
+		$[50] = hoverProps;
+		$[51] = t10;
+		$[52] = t11;
+		$[53] = t12;
+		$[54] = t13;
+		$[55] = t14;
+		$[56] = t15;
+		$[57] = t16;
+		$[58] = t21;
+		$[59] = t25;
+		$[60] = t4;
+		$[61] = t5;
+		$[62] = t6;
+		$[63] = t7;
+		$[64] = t8;
+		$[65] = t9;
+		$[66] = t26;
+	} else t26 = $[66];
 	return t26;
 };
 function _temp(segment) {

package/dist/components/inputs/File/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { FileUploadProps } from './fileUpload.types';
 export type { DefaultFile, FileUploadBaseProps, FileUploadButtonProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState, } from './fileUpload.types';
 export declare const FileUpload: <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/FileUpload.js

@@ -1,6 +1,7 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import "../../../config/i18n.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormField } from "../FormField/FormField.js";
 import { FileUtils } from "../../../utils/file.utils.js";
 import { FileCardList } from "./shared/FileCardList.js";
@@ -14,7 +15,6 @@ import { useCallback, useState } from "react";
 import { DropZone } from "react-aria-components";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/FileUpload.tsx
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
@@ -192,32 +192,32 @@ var FileUploadBase = (props) => {
 };
 var FileUpload = (props) => {
 	const $ = c(15);
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = formControl;
+			$[1] = field;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			formControl = $[1];
+			field = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
+				const { field: field_0, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(FileUploadBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
-					isDisabled: field.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onChange: field_0.onChange,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -228,14 +228,14 @@ var FileUpload = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t0
 			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
+			$[9] = field.form;
+			$[10] = field.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/inputs/File/InputUpload.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { InputUploadProps } from './inputUpload.types';
 export type { InputUploadBaseProps, InputUploadProps } from './inputUpload.types';
 export declare const InputUpload: <TFieldValues extends FieldValues = FieldValues>(props: InputUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/InputUpload.js

@@ -1,4 +1,5 @@
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormField } from "../FormField/FormField.js";
 import { FileUtils } from "../../../utils/file.utils.js";
 import { InputUploadContent } from "./shared/InputUploadContent.js";
@@ -8,7 +9,6 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/InputUpload.tsx
 var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, size, ...rest }) => {
 	const ui = UIConfig.useConfig();
@@ -96,32 +96,32 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 };
 var InputUpload = (props) => {
 	const $ = c(15);
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = formControl;
+			$[1] = field;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			formControl = $[1];
+			field = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
+				const { field: field_0, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(InputUploadBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
-					isDisabled: field.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onChange: field_0.onChange,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -132,14 +132,14 @@ var InputUpload = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t0
 			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
+			$[9] = field.form;
+			$[10] = field.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/inputs/File/fileUpload.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { ButtonProps } from '../../buttons/Button/Button';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';
 import { InputUploadButtonProps } from './shared/inputUploadButton.cva';

package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import { FocusEvent, Ref } from 'react';
 import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { FormFieldProps } from '../../FormField/FormField';
 import { InputContentProps } from '../shared/InputContent';
 import { ControlProps } from '../../shared/form.types';

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,5 +1,6 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FieldController } from "../../shared/form.binding.js";
 import { FormField } from "../../FormField/FormField.js";
 import { inputBaseDefinition } from "../../shared/input.cva.js";
 import { IntlUtils } from "../../../../utils/intl.utils.js";
@@ -15,7 +16,6 @@ import { useEffect, useRef, useState } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
@@ -420,35 +420,35 @@ var NumberInput = (t0) => {
 		props = $[1];
 		renderStaticInput = $[2];
 	}
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[3] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[3] = props;
-			$[4] = formControl;
+			$[4] = field;
 			$[5] = innerProps;
 			$[6] = ref;
 		} else {
-			formControl = $[4];
+			field = $[4];
 			innerProps = $[5];
 			ref = $[6];
 		}
-		const controlWithOptions = formControl.control;
+		const controlWithOptions = field.form;
 		let t1;
 		if ($[7] !== controlWithOptions._options?.disabled || $[8] !== innerProps || $[9] !== props.error || $[10] !== props.isDisabled || $[11] !== ref || $[12] !== renderStaticInput) {
 			t1 = (t2) => {
-				const { field, fieldState: t3 } = t2;
+				const { field: field_0, fieldState: t3 } = t2;
 				const { error, isDirty } = t3;
 				return /* @__PURE__ */ jsx(NumberInputInner, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onChange: field_0.onChange,
+					onBlur: field_0.onBlur,
 					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
+					isDisabled: field_0.disabled || props.isDisabled,
 					isFormControlDisabled: !!controlWithOptions._options?.disabled,
 					error: props.error ?? error?.message,
 					renderStaticInput
@@ -463,14 +463,14 @@ var NumberInput = (t0) => {
 			$[13] = t1;
 		} else t1 = $[13];
 		let t2;
-		if ($[14] !== formControl.control || $[15] !== formControl.name || $[16] !== t1) {
-			t2 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[14] !== field.form || $[15] !== field.name || $[16] !== t1) {
+			t2 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t1
 			});
-			$[14] = formControl.control;
-			$[15] = formControl.name;
+			$[14] = field.form;
+			$[15] = field.name;
 			$[16] = t1;
 			$[17] = t2;
 		} else t2 = $[17];

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts

@@ -1,6 +1,6 @@
 import { FocusEvent, Ref } from 'react';
 import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { FormFieldProps } from '../../FormField/FormField';
 import { NumberRangeValue } from './NumberRangeField';
 import { ControlProps } from '../../shared/form.types';

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -1,5 +1,6 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FieldController } from "../../shared/form.binding.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { IntlUtils } from "../../../../utils/intl.utils.js";
@@ -14,7 +15,6 @@ import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { useLocale } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
 var EMPTY_RANGE = {
 	min: null,
@@ -269,30 +269,30 @@ var NumberRangeInput = (t0) => {
 		props = $[1];
 		renderStaticInput = $[2];
 	}
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		if ($[3] !== props) {
-			({formControl, ...innerProps} = props);
+			({field, ...innerProps} = props);
 			$[3] = props;
-			$[4] = formControl;
+			$[4] = field;
 			$[5] = innerProps;
 		} else {
-			formControl = $[4];
+			field = $[4];
 			innerProps = $[5];
 		}
-		const controlWithOptions = formControl.control;
+		const controlWithOptions = field.form;
 		let t1;
 		if ($[6] !== controlWithOptions._options?.disabled || $[7] !== innerProps || $[8] !== props.error || $[9] !== props.isDisabled || $[10] !== renderStaticInput) {
 			t1 = (t2) => {
-				const { field, fieldState: t3 } = t2;
+				const { field: field_0, fieldState: t3 } = t2;
 				const { error } = t3;
 				return /* @__PURE__ */ jsx(NumberRangeInputInner, {
 					...innerProps,
-					value: field.value ?? EMPTY_RANGE,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
+					value: field_0.value ?? EMPTY_RANGE,
+					onChange: field_0.onChange,
+					onBlur: field_0.onBlur,
+					isDisabled: field_0.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
 					isFormControlDisabled: !!controlWithOptions._options?.disabled,
 					error: props.error ?? error?.message,
 					renderStaticInput
@@ -306,14 +306,14 @@ var NumberRangeInput = (t0) => {
 			$[11] = t1;
 		} else t1 = $[11];
 		let t2;
-		if ($[12] !== formControl.control || $[13] !== formControl.name || $[14] !== t1) {
-			t2 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[12] !== field.form || $[13] !== field.name || $[14] !== t1) {
+			t2 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t1
 			});
-			$[12] = formControl.control;
-			$[13] = formControl.name;
+			$[12] = field.form;
+			$[13] = field.name;
 			$[14] = t1;
 			$[15] = t2;
 		} else t2 = $[15];

package/dist/components/inputs/Input/PasswordInput/PasswordInput.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { TextInputProps } from '../TextInput/TextInput';
 import { ControlProps } from '../../shared/form.types';
 export interface PasswordInputProps extends Omit<TextInputProps, "type" | "action" | "trailingIcon" | "unit"> {

package/dist/components/inputs/Input/TextArea/TextArea.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
 import { AriaTextFieldProps } from 'react-aria';
 import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';