@povio/ui 3.3.0 → 3.4.0-rc.10

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';
@@ -22,6 +22,7 @@ interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, O
     hideInnerLabels?: boolean;
     isDirty?: boolean;
     isClearable?: boolean;
+    isClearableIfDisabled?: boolean;
     autoFocusOnMount?: boolean;
     onChange?: (value: NumberRangeValue) => void;
     onMinChange?: (value: number | null) => void;

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";
@@ -8,13 +9,12 @@ import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { NumberRangeField } from "./NumberRangeField.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { useLocale } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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,
@@ -31,7 +31,7 @@ var NumberRangeInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, isClearable: isClearableProps, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, isClearable: isClearableProps, isClearableIfDisabled, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
 	const isClearable = isClearableProps ?? ui.input.isClearable;
 	const as = asProp ?? ui.input.as;
 	const variant = variantProps ?? ui.input.variant;
@@ -108,6 +108,7 @@ var NumberRangeInputBase = (props) => {
 		hideInnerLabels,
 		isDirty,
 		isClearable,
+		isClearableIfDisabled,
 		autoFocusOnMount,
 		isDisabled,
 		isRequired,
@@ -183,7 +184,7 @@ var NumberRangeInputInner = (t0) => {
 			labelPlacement: "content-wrapper",
 			children: (t2) => {
 				const { id, ...dataAttributeProps } = t2;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsx(FormFieldLabel, {
@@ -203,7 +204,7 @@ var NumberRangeInputInner = (t0) => {
 								className: clsx("w-full min-w-0 bg-transparent outline-none", props.minInputClassName),
 								...dataAttributeProps,
 								"data-rac": true
-							}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+							}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
 								onClear: _temp,
 								show: staticValue.min !== null,
 								renderStatic: true
@@ -233,7 +234,7 @@ var NumberRangeInputInner = (t0) => {
 								className: clsx("w-full min-w-0 bg-transparent outline-none", props.maxInputClassName),
 								...dataAttributeProps,
 								"data-rac": true
-							}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+							}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
 								onClear: _temp2,
 								show: staticValue.max !== null,
 								renderStatic: true
@@ -269,30 +270,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 +307,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/PasswordInput/PasswordInput.js

@@ -1,10 +1,9 @@
-import { VisibilityIcon } from "../../../../assets/icons/Visibility.js";
-import { VisibilityOffIcon } from "../../../../assets/icons/VisibilityOff.js";
 import "../../../../config/i18n.js";
 import { TextInput } from "../TextInput/TextInput.js";
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Input/PasswordInput/PasswordInput.tsx
 var PasswordInput = (props) => {
@@ -12,7 +11,7 @@ var PasswordInput = (props) => {
 	const { t } = useTranslation("ui");
 	const [isRevealed, setIsRevealed] = useState(false);
 	const t0 = isRevealed ? "text" : "password";
-	const t1 = isRevealed ? VisibilityIcon : VisibilityOffIcon;
+	const t1 = isRevealed ? Eye : EyeOff;
 	let t2;
 	if ($0[0] !== isRevealed) {
 		t2 = ($) => isRevealed ? $.ui.password.hide : $.ui.password.reveal;

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

@@ -1,13 +1,14 @@
 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';
 interface TextAreaBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTextAreaProps, "value" | "defaultValue" | "onChange" | "disabled" | "required" | "className" | keyof AriaTextFieldProps>, Omit<AriaTextFieldProps<HTMLTextAreaElement>, "label"> {
     ref?: Ref<HTMLTextAreaElement>;
     isClearable?: boolean;
+    isClearableIfDisabled?: boolean;
     isDirty?: boolean;
     inputClassName?: string;
 }

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

@@ -1,28 +1,28 @@
 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 { FormField } from "../../FormField/FormField.js";
 import { inputSideDefinition, inputSizeDefinition, useInputCva } from "../../shared/input.cva.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { textAreaWrapperDefinition } from "./TextArea.cva.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { TextArea } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Input/TextArea/TextArea.tsx
 var TextAreaBase = (props) => {
-	const $ = c(83);
+	const $ = c(84);
 	const ui = UIConfig.useConfig();
 	const inputCva = useInputCva();
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
 	const textAreaWrapperCva = UIOverrides.useCva("textArea.wrapperCva", textAreaWrapperDefinition);
-	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, isClearable: isClearableProp, ...rest } = props;
+	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, isClearable: isClearableProp, isClearableIfDisabled, ...rest } = props;
 	const as = asProp ?? ui.input.as;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
@@ -83,7 +83,7 @@ var TextAreaBase = (props) => {
 	let t7;
 	let t8;
 	let t9;
-	if ($[12] !== as || $[13] !== className || $[14] !== error || $[15] !== formFieldProps || $[16] !== headerClassName || $[17] !== helperText || $[18] !== inputSideCva || $[19] !== isClearable || $[20] !== isDisabled || $[21] !== isRequired || $[22] !== label || $[23] !== labelProps || $[24] !== rightContent || $[25] !== t2 || $[26] !== textAreaWrapperCva || $[27] !== tooltipText || $[28] !== value) {
+	if ($[12] !== as || $[13] !== className || $[14] !== error || $[15] !== formFieldProps || $[16] !== headerClassName || $[17] !== helperText || $[18] !== inputSideCva || $[19] !== isClearable || $[20] !== isClearableIfDisabled || $[21] !== isDisabled || $[22] !== isRequired || $[23] !== label || $[24] !== labelProps || $[25] !== rightContent || $[26] !== t2 || $[27] !== textAreaWrapperCva || $[28] !== tooltipText || $[29] !== value) {
 		const headerProps = {
 			label,
 			tooltipText,
@@ -95,7 +95,7 @@ var TextAreaBase = (props) => {
 			className: headerClassName,
 			labelProps
 		};
-		showClear = isClearable && value != null && value !== "" && !isDisabled;
+		showClear = isClearable && value != null && value !== "" && (!isDisabled || isClearableIfDisabled === true);
 		T1 = TooltipWrapper;
 		t11 = as;
 		t12 = error;
@@ -104,17 +104,17 @@ var TextAreaBase = (props) => {
 		t6 = formFieldProps;
 		t7 = as;
 		t8 = labelProps;
-		if ($[43] !== className) {
+		if ($[44] !== className) {
 			t9 = clsx("group w-full flex flex-col", className);
-			$[43] = className;
-			$[44] = t9;
-		} else t9 = $[44];
+			$[44] = className;
+			$[45] = t9;
+		} else t9 = $[45];
 		t10 = as === "inline" ? -1 : void 0;
-		if ($[45] !== textAreaWrapperCva) {
+		if ($[46] !== textAreaWrapperCva) {
 			t3 = textAreaWrapperCva({});
-			$[45] = textAreaWrapperCva;
-			$[46] = t3;
-		} else t3 = $[46];
+			$[46] = textAreaWrapperCva;
+			$[47] = t3;
+		} else t3 = $[47];
 		t4 = true;
 		t5 = as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 			as,
@@ -132,54 +132,55 @@ var TextAreaBase = (props) => {
 		$[17] = helperText;
 		$[18] = inputSideCva;
 		$[19] = isClearable;
-		$[20] = isDisabled;
-		$[21] = isRequired;
-		$[22] = label;
-		$[23] = labelProps;
-		$[24] = rightContent;
-		$[25] = t2;
-		$[26] = textAreaWrapperCva;
-		$[27] = tooltipText;
-		$[28] = value;
-		$[29] = T0;
-		$[30] = T1;
-		$[31] = showClear;
-		$[32] = t10;
-		$[33] = t11;
-		$[34] = t12;
-		$[35] = t13;
-		$[36] = t3;
-		$[37] = t4;
-		$[38] = t5;
-		$[39] = t6;
-		$[40] = t7;
-		$[41] = t8;
-		$[42] = t9;
+		$[20] = isClearableIfDisabled;
+		$[21] = isDisabled;
+		$[22] = isRequired;
+		$[23] = label;
+		$[24] = labelProps;
+		$[25] = rightContent;
+		$[26] = t2;
+		$[27] = textAreaWrapperCva;
+		$[28] = tooltipText;
+		$[29] = value;
+		$[30] = T0;
+		$[31] = T1;
+		$[32] = showClear;
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t12;
+		$[36] = t13;
+		$[37] = t3;
+		$[38] = t4;
+		$[39] = t5;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
 	} else {
-		T0 = $[29];
-		T1 = $[30];
-		showClear = $[31];
-		t10 = $[32];
-		t11 = $[33];
-		t12 = $[34];
-		t13 = $[35];
-		t3 = $[36];
-		t4 = $[37];
-		t5 = $[38];
-		t6 = $[39];
-		t7 = $[40];
-		t8 = $[41];
-		t9 = $[42];
+		T0 = $[30];
+		T1 = $[31];
+		showClear = $[32];
+		t10 = $[33];
+		t11 = $[34];
+		t12 = $[35];
+		t13 = $[36];
+		t3 = $[37];
+		t4 = $[38];
+		t5 = $[39];
+		t6 = $[40];
+		t7 = $[41];
+		t8 = $[42];
+		t9 = $[43];
 	}
 	const T2 = TextArea;
 	const t14 = isDirty || void 0;
 	const t15 = isRequired || void 0;
 	let t16;
-	if ($[47] !== value) {
+	if ($[48] !== value) {
 		t16 = value?.trim() === "" || value === null || value === void 0 || void 0;
-		$[47] = value;
-		$[48] = t16;
-	} else t16 = $[48];
+		$[48] = value;
+		$[49] = t16;
+	} else t16 = $[49];
 	const t17 = as === "floating" ? "" : inputProps.placeholder;
 	const t18 = inputCva({
 		variant,
@@ -188,7 +189,7 @@ var TextAreaBase = (props) => {
 		className: clsx("block h-full min-h-8", inputClassName)
 	});
 	let t19;
-	if ($[49] !== T2 || $[50] !== inputProps || $[51] !== ref || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t17 || $[56] !== t18) {
+	if ($[50] !== T2 || $[51] !== inputProps || $[52] !== ref || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t17 || $[57] !== t18) {
 		t19 = /* @__PURE__ */ jsx(T2, {
 			...inputProps,
 			"data-is-dirty": t14,
@@ -198,18 +199,18 @@ var TextAreaBase = (props) => {
 			className: t18,
 			ref
 		});
-		$[49] = T2;
-		$[50] = inputProps;
-		$[51] = ref;
-		$[52] = t14;
-		$[53] = t15;
-		$[54] = t16;
-		$[55] = t17;
-		$[56] = t18;
-		$[57] = t19;
-	} else t19 = $[57];
+		$[50] = T2;
+		$[51] = inputProps;
+		$[52] = ref;
+		$[53] = t14;
+		$[54] = t15;
+		$[55] = t16;
+		$[56] = t17;
+		$[57] = t18;
+		$[58] = t19;
+	} else t19 = $[58];
 	let t20;
-	if ($[58] !== inputSizeCva || $[59] !== onBlur || $[60] !== onChange || $[61] !== showClear) {
+	if ($[59] !== inputSizeCva || $[60] !== onBlur || $[61] !== onChange || $[62] !== showClear) {
 		t20 = showClear && /* @__PURE__ */ jsx("span", {
 			className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })),
 			children: /* @__PURE__ */ jsx(InputClear, {
@@ -220,14 +221,14 @@ var TextAreaBase = (props) => {
 				show: true
 			})
 		});
-		$[58] = inputSizeCva;
-		$[59] = onBlur;
-		$[60] = onChange;
-		$[61] = showClear;
-		$[62] = t20;
-	} else t20 = $[62];
+		$[59] = inputSizeCva;
+		$[60] = onBlur;
+		$[61] = onChange;
+		$[62] = showClear;
+		$[63] = t20;
+	} else t20 = $[63];
 	let t21;
-	if ($[63] !== t19 || $[64] !== t20 || $[65] !== t3 || $[66] !== t4 || $[67] !== t5) {
+	if ($[64] !== t19 || $[65] !== t20 || $[66] !== t3 || $[67] !== t4 || $[68] !== t5) {
 		t21 = /* @__PURE__ */ jsxs("div", {
 			className: t3,
 			"data-text-area": t4,
@@ -237,15 +238,15 @@ var TextAreaBase = (props) => {
 				t20
 			]
 		});
-		$[63] = t19;
-		$[64] = t20;
-		$[65] = t3;
-		$[66] = t4;
-		$[67] = t5;
-		$[68] = t21;
-	} else t21 = $[68];
+		$[64] = t19;
+		$[65] = t20;
+		$[66] = t3;
+		$[67] = t4;
+		$[68] = t5;
+		$[69] = t21;
+	} else t21 = $[69];
 	let t22;
-	if ($[69] !== T0 || $[70] !== t10 || $[71] !== t21 || $[72] !== t6 || $[73] !== t7 || $[74] !== t8 || $[75] !== t9) {
+	if ($[70] !== T0 || $[71] !== t10 || $[72] !== t21 || $[73] !== t6 || $[74] !== t7 || $[75] !== t8 || $[76] !== t9) {
 		t22 = /* @__PURE__ */ jsx(T0, {
 			...t6,
 			as: t7,
@@ -254,62 +255,62 @@ var TextAreaBase = (props) => {
 			tabIndex: t10,
 			children: t21
 		});
-		$[69] = T0;
-		$[70] = t10;
-		$[71] = t21;
-		$[72] = t6;
-		$[73] = t7;
-		$[74] = t8;
-		$[75] = t9;
-		$[76] = t22;
-	} else t22 = $[76];
+		$[70] = T0;
+		$[71] = t10;
+		$[72] = t21;
+		$[73] = t6;
+		$[74] = t7;
+		$[75] = t8;
+		$[76] = t9;
+		$[77] = t22;
+	} else t22 = $[77];
 	let t23;
-	if ($[77] !== T1 || $[78] !== t11 || $[79] !== t12 || $[80] !== t13 || $[81] !== t22) {
+	if ($[78] !== T1 || $[79] !== t11 || $[80] !== t12 || $[81] !== t13 || $[82] !== t22) {
 		t23 = /* @__PURE__ */ jsx(T1, {
 			as: t11,
 			error: t12,
 			triggerTabIndex: t13,
 			children: t22
 		});
-		$[77] = T1;
-		$[78] = t11;
-		$[79] = t12;
-		$[80] = t13;
-		$[81] = t22;
-		$[82] = t23;
-	} else t23 = $[82];
+		$[78] = T1;
+		$[79] = t11;
+		$[80] = t12;
+		$[81] = t13;
+		$[82] = t22;
+		$[83] = t23;
+	} else t23 = $[83];
 	return t23;
 };
 var TextArea$1 = (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, isDirty } = t2;
 				return /* @__PURE__ */ jsx(TextAreaBase, {
 					...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,
 					error: props.error ?? error?.message
 				});
 			};
@@ -320,14 +321,14 @@ var TextArea$1 = (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/Input/TextInput/TextInput.d.ts

@@ -1,9 +1,9 @@
 import { Ref } from 'react';
 import { AriaTextFieldProps } from 'react-aria';
 import { InputProps as AriaInputProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../../FormField/FormField';
 import { InputContentProps } from '../shared/InputContent';
+import { FieldValues } from '../../shared/form.binding';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
 type AllowedHTMLInputTypeAttribute = "email" | "hidden" | "tel" | "text" | "url";
@@ -18,6 +18,6 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
 export interface TextInputProps extends TextInputBaseProps {
     renderStaticInput?: boolean;
 }
-export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
+export type ControlledTextInputProps<TFieldValues extends Record<string, unknown>> = ControlProps<TextInputProps, TFieldValues>;
 export declare const TextInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};