@povio/ui 3.3.0-rc.4 → 3.4.0-rc.1

package/dist/components/inputs/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import { FocusEvent, Ref } from 'react';
 import { SliderProps as AriaSliderProps } 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';
 type SliderValue<IsRange extends boolean = false> = IsRange extends false ? number : number[];

package/dist/components/inputs/Slider/Slider.js

@@ -1,13 +1,13 @@
 import { Typography } from "../../text/Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormField } from "../FormField/FormField.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Slider, SliderThumb, SliderTrack } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Slider/Slider.tsx
 var SliderBase = (props) => {
 	const $ = c(61);
@@ -223,33 +223,33 @@ var SliderBase = (props) => {
 };
 var Slider$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 } = t2;
 				return /* @__PURE__ */ jsx(SliderBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onBlur: field.onBlur,
-					onChange: field.onChange,
-					isDisabled: field.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onBlur: field_0.onBlur,
+					onChange: field_0.onChange,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -260,14 +260,14 @@ var Slider$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/TextEditor/TextEditor.d.ts

@@ -1,6 +1,6 @@
 import { JSONContent } from '@tiptap/react';
 import { Ref } from 'react';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';
 export interface TextEditorValue {

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -1,6 +1,7 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { isEqual } from "../../../utils/isEqual.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { FormField } from "../FormField/FormField.js";
 import { inputSideDefinition } from "../shared/input.cva.js";
@@ -11,7 +12,6 @@ import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useFocusVisible, useFocusWithin, useHover, useLabel } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 import { Color } from "@tiptap/extension-color";
 import { Highlight } from "@tiptap/extension-highlight";
 import { Link } from "@tiptap/extension-link";
@@ -38,434 +38,132 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-var TextEditorBase = (t0) => {
-	const $ = c(132);
-	const { ref, as: t1, placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur } = t0;
-	const as = t1 === void 0 ? "default" : t1;
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
 	const contentRef = useRef(null);
-	let t2;
-	if ($[0] !== isDisabled) {
-		t2 = { isDisabled };
-		$[0] = isDisabled;
-		$[1] = t2;
-	} else t2 = $[1];
-	const { hoverProps, isHovered } = useHover(t2);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = { onFocusWithinChange: setIsFocused };
-		$[2] = t3;
-	} else t3 = $[2];
-	const { focusWithinProps } = useFocusWithin(t3);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
 	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
-	const t4 = isHeaderHidden || as === "filter" || as === "floating";
-	let t5;
-	if ($[3] !== error || $[4] !== errorClassName || $[5] !== headerClassName || $[6] !== helperText || $[7] !== hideLabel || $[8] !== isDisabled || $[9] !== isRequired || $[10] !== label || $[11] !== rightContent || $[12] !== t4 || $[13] !== tooltipText) {
-		t5 = {
-			error,
-			label,
-			tooltipText,
-			helperText,
-			isRequired,
-			rightContent,
-			isHeaderHidden: t4,
-			hideLabel,
-			isDisabled,
-			headerClassName,
-			errorClassName
-		};
-		$[3] = error;
-		$[4] = errorClassName;
-		$[5] = headerClassName;
-		$[6] = helperText;
-		$[7] = hideLabel;
-		$[8] = isDisabled;
-		$[9] = isRequired;
-		$[10] = label;
-		$[11] = rightContent;
-		$[12] = t4;
-		$[13] = tooltipText;
-		$[14] = t5;
-	} else t5 = $[14];
-	const formFieldProps = t5;
-	let t6;
-	if ($[15] !== label) {
-		t6 = { label };
-		$[15] = label;
-		$[16] = t6;
-	} else t6 = $[16];
-	const { labelProps, fieldProps } = useLabel(t6);
-	let t7;
-	if ($[17] !== as || $[18] !== placeholder) {
-		t7 = Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder });
-		$[17] = as;
-		$[18] = placeholder;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== t7) {
-		t8 = [...extensions, t7];
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== editorClassName) {
-		t9 = clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName);
-		$[22] = editorClassName;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] !== t9) {
-		t10 = { attributes: { class: t9 } };
-		$[24] = t9;
-		$[25] = t10;
-	} else t10 = $[25];
-	let t11;
-	if ($[26] !== onChange) {
-		t11 = (event) => {
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const editor = useEditor({
+		extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
+		editorProps: { attributes: { class: clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName) } },
+		onUpdate: (event) => {
 			onChange?.({
 				json: event.editor.getJSON(),
 				html: event.editor.getHTML()
 			});
-		};
-		$[26] = onChange;
-		$[27] = t11;
-	} else t11 = $[27];
-	const t12 = !isDisabled;
-	let t13;
-	if ($[28] !== onBlur || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t8) {
-		t13 = {
-			extensions: t8,
-			editorProps: t10,
-			onUpdate: t11,
-			immediatelyRender: false,
-			editable: t12,
-			onBlur
-		};
-		$[28] = onBlur;
-		$[29] = t10;
-		$[30] = t11;
-		$[31] = t12;
-		$[32] = t8;
-		$[33] = t13;
-	} else t13 = $[33];
-	let t14;
-	if ($[34] !== editorClassName || $[35] !== isDisabled) {
-		t14 = [isDisabled, editorClassName];
-		$[34] = editorClassName;
-		$[35] = isDisabled;
-		$[36] = t14;
-	} else t14 = $[36];
-	const editor = useEditor(t13, t14);
-	let t15;
-	if ($[37] !== editor || $[38] !== value?.json) {
-		t15 = () => {
-			const content = value?.json ?? null;
-			if (editor) {
-				if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
-			} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
-		};
-		$[37] = editor;
-		$[38] = value?.json;
-		$[39] = t15;
-	} else t15 = $[39];
-	let t16;
-	if ($[40] !== value) {
-		t16 = [value];
-		$[40] = value;
-		$[41] = t16;
-	} else t16 = $[41];
-	useEffect(t15, t16);
-	let t17;
-	let t18;
-	if ($[42] !== editor) {
-		t17 = () => {
-			if (editor && contentRef.current) {
-				editor.commands.setContent(contentRef.current);
-				contentRef.current = null;
-			}
-		};
-		t18 = [editor];
-		$[42] = editor;
-		$[43] = t17;
-		$[44] = t18;
-	} else {
-		t17 = $[43];
-		t18 = $[44];
-	}
-	useEffect(t17, t18);
-	const t19 = hideLabel || isHeaderHidden;
-	let T0;
-	let t20;
-	let t21;
-	let t22;
-	let t23;
-	let t24;
-	let t25;
-	let t26;
-	let t27;
-	let t28;
-	let t29;
-	let t30;
-	let t31;
-	let t32;
-	let t33;
-	let t34;
-	let t35;
-	let t36;
-	let t37;
-	let t38;
-	let t39;
-	let t40;
-	let t41;
-	if ($[45] !== as || $[46] !== className || $[47] !== editor || $[48] !== fieldProps || $[49] !== focusWithinProps || $[50] !== formFieldProps || $[51] !== headerClassName || $[52] !== helperText || $[53] !== hoverProps || $[54] !== inputSideCva || $[55] !== isDirty || $[56] !== isDisabled || $[57] !== isFocusVisible || $[58] !== isFocused || $[59] !== isHovered || $[60] !== isRequired || $[61] !== label || $[62] !== labelProps || $[63] !== ref || $[64] !== rightContent || $[65] !== t19 || $[66] !== tooltipText) {
-		const headerProps = {
-			label,
-			tooltipText,
-			helperText,
-			isRequired,
-			rightContent,
-			isHeaderHidden: t19,
-			isDisabled,
-			className: headerClassName,
-			labelProps
-		};
-		T0 = FormField;
-		t37 = formFieldProps;
-		t38 = ref;
-		t39 = as;
-		t40 = labelProps;
-		if ($[90] !== className) {
-			t41 = clsx("group w-full", className);
-			$[90] = className;
-			$[91] = t41;
-		} else t41 = $[91];
-		if ($[92] === Symbol.for("react.memo_cache_sentinel")) {
-			t22 = clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover");
-			$[92] = t22;
-		} else t22 = $[92];
-		t23 = true;
-		t24 = "";
-		t25 = isHovered || void 0;
-		t26 = isDisabled || void 0;
-		t27 = isDisabled || void 0;
-		t28 = isFocused || void 0;
-		t29 = isFocused && isFocusVisible || void 0;
-		t30 = !editor?.isEmpty;
-		t31 = isRequired || void 0;
-		t32 = isDirty || void 0;
-		t33 = hoverProps;
-		t34 = focusWithinProps;
-		t35 = fieldProps;
-		if ($[93] !== editor) {
-			t36 = /* @__PURE__ */ jsx(TextEditorToolbar, { editor });
-			$[93] = editor;
-			$[94] = t36;
-		} else t36 = $[94];
-		const t42 = as === "floating" && "pt-3";
-		if ($[95] !== t42) {
-			t20 = clsx("relative overflow-auto", t42);
-			$[95] = t42;
-			$[96] = t20;
-		} else t20 = $[96];
-		t21 = as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-			as,
-			...headerProps,
-			className: clsx(headerProps.className, inputSideCva({
-				size: "default",
-				type: "left"
-			}))
-		});
-		$[45] = as;
-		$[46] = className;
-		$[47] = editor;
-		$[48] = fieldProps;
-		$[49] = focusWithinProps;
-		$[50] = formFieldProps;
-		$[51] = headerClassName;
-		$[52] = helperText;
-		$[53] = hoverProps;
-		$[54] = inputSideCva;
-		$[55] = isDirty;
-		$[56] = isDisabled;
-		$[57] = isFocusVisible;
-		$[58] = isFocused;
-		$[59] = isHovered;
-		$[60] = isRequired;
-		$[61] = label;
-		$[62] = labelProps;
-		$[63] = ref;
-		$[64] = rightContent;
-		$[65] = t19;
-		$[66] = tooltipText;
-		$[67] = T0;
-		$[68] = t20;
-		$[69] = t21;
-		$[70] = t22;
-		$[71] = t23;
-		$[72] = t24;
-		$[73] = t25;
-		$[74] = t26;
-		$[75] = t27;
-		$[76] = t28;
-		$[77] = t29;
-		$[78] = t30;
-		$[79] = t31;
-		$[80] = t32;
-		$[81] = t33;
-		$[82] = t34;
-		$[83] = t35;
-		$[84] = t36;
-		$[85] = t37;
-		$[86] = t38;
-		$[87] = t39;
-		$[88] = t40;
-		$[89] = t41;
-	} else {
-		T0 = $[67];
-		t20 = $[68];
-		t21 = $[69];
-		t22 = $[70];
-		t23 = $[71];
-		t24 = $[72];
-		t25 = $[73];
-		t26 = $[74];
-		t27 = $[75];
-		t28 = $[76];
-		t29 = $[77];
-		t30 = $[78];
-		t31 = $[79];
-		t32 = $[80];
-		t33 = $[81];
-		t34 = $[82];
-		t35 = $[83];
-		t36 = $[84];
-		t37 = $[85];
-		t38 = $[86];
-		t39 = $[87];
-		t40 = $[88];
-		t41 = $[89];
-	}
-	const t42 = as === "floating" ? "" : placeholder;
-	const t43 = as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0";
-	let t44;
-	if ($[97] !== t43) {
-		t44 = clsx(t43);
-		$[97] = t43;
-		$[98] = t44;
-	} else t44 = $[98];
-	let t45;
-	if ($[99] !== editor || $[100] !== t42 || $[101] !== t44) {
-		t45 = /* @__PURE__ */ jsx(EditorContent, {
-			editor,
-			placeholder: t42,
-			className: t44
-		});
-		$[99] = editor;
-		$[100] = t42;
-		$[101] = t44;
-		$[102] = t45;
-	} else t45 = $[102];
-	let t46;
-	if ($[103] !== t20 || $[104] !== t21 || $[105] !== t45) {
-		t46 = /* @__PURE__ */ jsxs("div", {
-			className: t20,
-			children: [t21, t45]
-		});
-		$[103] = t20;
-		$[104] = t21;
-		$[105] = t45;
-		$[106] = t46;
-	} else t46 = $[106];
-	let t47;
-	if ($[107] !== t22 || $[108] !== t23 || $[109] !== t24 || $[110] !== t25 || $[111] !== t26 || $[112] !== t27 || $[113] !== t28 || $[114] !== t29 || $[115] !== t30 || $[116] !== t31 || $[117] !== t32 || $[118] !== t33 || $[119] !== t34 || $[120] !== t35 || $[121] !== t36 || $[122] !== t46) {
-		t47 = /* @__PURE__ */ jsxs("div", {
-			className: t22,
-			"data-text-editor": t23,
-			"data-rac": t24,
-			"data-hovered": t25,
-			"data-disabled": t26,
-			"data-is-disabled": t27,
-			"data-focus-within": t28,
-			"data-focus-visible": t29,
-			"data-is-filled": t30,
-			"data-is-required": t31,
-			"data-is-dirty": t32,
-			...t33,
-			...t34,
-			...t35,
-			children: [t36, t46]
-		});
-		$[107] = t22;
-		$[108] = t23;
-		$[109] = t24;
-		$[110] = t25;
-		$[111] = t26;
-		$[112] = t27;
-		$[113] = t28;
-		$[114] = t29;
-		$[115] = t30;
-		$[116] = t31;
-		$[117] = t32;
-		$[118] = t33;
-		$[119] = t34;
-		$[120] = t35;
-		$[121] = t36;
-		$[122] = t46;
-		$[123] = t47;
-	} else t47 = $[123];
-	let t48;
-	if ($[124] !== T0 || $[125] !== t37 || $[126] !== t38 || $[127] !== t39 || $[128] !== t40 || $[129] !== t41 || $[130] !== t47) {
-		t48 = /* @__PURE__ */ jsx(T0, {
-			...t37,
-			ref: t38,
-			as: t39,
-			labelProps: t40,
-			className: t41,
-			children: t47
-		});
-		$[124] = T0;
-		$[125] = t37;
-		$[126] = t38;
-		$[127] = t39;
-		$[128] = t40;
-		$[129] = t41;
-		$[130] = t47;
-		$[131] = t48;
-	} else t48 = $[131];
-	return t48;
+		},
+		immediatelyRender: false,
+		editable: !isDisabled,
+		onBlur
+	}, [isDisabled, editorClassName]);
+	useEffect(() => {
+		const content = value?.json ?? null;
+		if (editor) {
+			if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
+		} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
+	}, [value]);
+	useEffect(() => {
+		if (editor && contentRef.current) {
+			editor.commands.setContent(contentRef.current);
+			contentRef.current = null;
+		}
+	}, [editor]);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		labelProps,
+		className: clsx("group w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
+			"data-text-editor": true,
+			"data-rac": "",
+			"data-hovered": isHovered || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
+			...hoverProps,
+			...focusWithinProps,
+			...fieldProps,
+			children: [/* @__PURE__ */ jsx(TextEditorToolbar, { editor }), /* @__PURE__ */ jsxs("div", {
+				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
+				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps,
+					className: clsx(headerProps.className, inputSideCva({
+						size: "default",
+						type: "left"
+					}))
+				}), /* @__PURE__ */ jsx(EditorContent, {
+					editor,
+					placeholder: as === "floating" ? "" : placeholder,
+					className: clsx(as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0")
+				})]
+			})]
+		})
+	});
 };
 var TextEditor = (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(TextEditorBase, {
 					...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
 				});
 			};
@@ -476,14 +174,14 @@ var TextEditor = (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/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../shared/form.binding';
 import { FormFieldErrorProps } from '../FormField/FormFieldError';
 import { ControlProps } from '../shared/form.types';
 import { ToggleVariantProps } from './toggle.cva';
@@ -9,7 +9,6 @@ interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<
     children?: string;
     isDirty?: boolean;
     isRequired?: boolean;
-    fireBlurOnChange?: boolean;
 }
 export type ToggleProps = ToggleBaseProps;
 export type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<ToggleProps, TFieldValues, "isSelected">;