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

package/dist/config/confirmation.context.js

@@ -24,7 +24,7 @@ var Confirmation;
 		const [state, setState] = useState(DEFAULT_STATE);
 		const { t } = useTranslation("ui");
 		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,

package/dist/config/theme.context.js

@@ -1,7 +1,6 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useEffect, useState } from "react";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;
@@ -13,108 +12,56 @@ var ThemeContext;
 		"system"
 	]);
 	const ThemeContext = createContext(null);
-	_ThemeContext.ThemeContextProvider = (t0) => {
-		const $ = c(17);
-		const { children, storageKey: t1 } = t0;
-		const storageKey = t1 === void 0 ? DEFAULT_STORAGE_KEY : t1;
-		const [systemTheme, setSystemTheme] = useState(_temp);
-		let t2;
-		if ($[0] !== storageKey) {
-			t2 = {
-				key: storageKey,
-				schema: ThemeSchema
+	_ThemeContext.ThemeContextProvider = ({ children, storageKey = DEFAULT_STORAGE_KEY }) => {
+		const [systemTheme, setSystemTheme] = useState(() => {
+			if (typeof window === "undefined") return;
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		});
+		const { value: theme, set } = useLocalStorage({
+			key: storageKey,
+			schema: ThemeSchema
+		});
+		const updateTheme = useCallback((theme_0) => {
+			set(theme_0);
+		}, [set]);
+		useEffect(() => {
+			if (typeof window === "undefined") return;
+			const onChange = (event) => {
+				setSystemTheme(event.matches ? "dark" : "light");
 			};
-			$[0] = storageKey;
-			$[1] = t2;
-		} else t2 = $[1];
-		const { value: theme, set } = useLocalStorage(t2);
-		let t3;
-		if ($[2] !== set) {
-			t3 = (theme_0) => {
-				set(theme_0);
+			const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
+			media_0.addEventListener("change", onChange);
+			return () => {
+				media_0.removeEventListener("change", onChange);
 			};
-			$[2] = set;
-			$[3] = t3;
-		} else t3 = $[3];
-		const updateTheme = t3;
-		let t4;
-		let t5;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = () => {
-				if (typeof window === "undefined") return;
-				const onChange = (event) => {
-					setSystemTheme(event.matches ? "dark" : "light");
-				};
-				const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
-				media_0.addEventListener("change", onChange);
-				return () => {
-					media_0.removeEventListener("change", onChange);
-				};
-			};
-			t5 = [];
-			$[4] = t4;
-			$[5] = t5;
-		} else {
-			t4 = $[4];
-			t5 = $[5];
-		}
-		useEffect(t4, t5);
-		let t6;
-		let t7;
-		if ($[6] !== systemTheme || $[7] !== theme) {
-			t6 = () => {
-				document.documentElement.classList.remove("dark");
-				if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
-					document.documentElement.classList.add("dark");
-					document.documentElement.style.colorScheme = "dark";
-				} else if (theme === "light") {
-					document.documentElement.classList.add("light");
-					document.documentElement.style.colorScheme = "light";
-				} else document.documentElement.style.colorScheme = "light";
-			};
-			t7 = [theme, systemTheme];
-			$[6] = systemTheme;
-			$[7] = theme;
-			$[8] = t6;
-			$[9] = t7;
-		} else {
-			t6 = $[8];
-			t7 = $[9];
-		}
-		useEffect(t6, t7);
-		const t8 = theme ?? "system";
-		let t9;
-		if ($[10] !== systemTheme || $[11] !== t8 || $[12] !== updateTheme) {
-			t9 = {
-				theme: t8,
-				systemTheme,
-				updateTheme
-			};
-			$[10] = systemTheme;
-			$[11] = t8;
-			$[12] = updateTheme;
-			$[13] = t9;
-		} else t9 = $[13];
-		const contextValue = t9;
-		let t10;
-		if ($[14] !== children || $[15] !== contextValue) {
-			t10 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
-				value: contextValue,
-				children
-			});
-			$[14] = children;
-			$[15] = contextValue;
-			$[16] = t10;
-		} else t10 = $[16];
-		return t10;
+		}, []);
+		useEffect(() => {
+			document.documentElement.classList.remove("dark");
+			if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+				document.documentElement.classList.add("dark");
+				document.documentElement.style.colorScheme = "dark";
+			} else if (theme === "light") {
+				document.documentElement.classList.add("light");
+				document.documentElement.style.colorScheme = "light";
+			} else document.documentElement.style.colorScheme = "light";
+		}, [theme, systemTheme]);
+		const contextValue = useMemo(() => ({
+			theme: theme ?? "system",
+			systemTheme,
+			updateTheme
+		}), [
+			theme,
+			systemTheme,
+			updateTheme
+		]);
+		return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+			value: contextValue,
+			children
+		});
 	};
 	_ThemeContext.useTheme = () => {
 		return use(ThemeContext);
 	};
 })(ThemeContext || (ThemeContext = {}));
-function _temp() {
-	if (typeof window === "undefined") return;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
 //#endregion
 export { ThemeContext };

package/dist/config/uiConfig.context.d.ts

@@ -26,9 +26,9 @@ export declare namespace UIConfig {
         };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
-        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel" | "fireBlurOnChange">;
-        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange" | "multiSelectAutoConfirm">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
+        checkbox: Pick<CheckboxProps, "variant">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "multiSelectAutoConfirm">;
         queryAutocomplete: {
             isInitialQueryDisabled?: boolean;
             resolveSelectedItemsWithIds?: boolean;
@@ -39,9 +39,9 @@ export declare namespace UIConfig {
             resolveSelectedItemsWithIds?: boolean;
             searchDebounceDelay?: number;
         };
-        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
+        toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;

package/dist/config/uiConfig.context.js

@@ -3,7 +3,6 @@ import { ClockIcon } from "../assets/icons/Clock.js";
 import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 //#region src/config/uiConfig.context.tsx
@@ -29,20 +28,15 @@ var UIConfig;
 		} },
 		radioGroup: {
 			variant: "default",
-			hideLabel: false,
-			fireBlurOnChange: false
-		},
-		checkbox: {
-			variant: "default",
-			fireBlurOnChange: false
+			hideLabel: false
 		},
+		checkbox: { variant: "default" },
 		select: {
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
 			hideSearchIcon: false,
-			fireBlurOnChange: false,
 			multiSelectAutoConfirm: false
 		},
 		queryAutocomplete: {
@@ -55,10 +49,7 @@ var UIConfig;
 			resolveSelectedItemsWithIds: false,
 			searchDebounceDelay: 500
 		},
-		toggle: {
-			variant: "default",
-			fireBlurOnChange: false
-		},
+		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,
 			maxValue: 100
@@ -71,7 +62,6 @@ var UIConfig;
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,
-			fireBlurOnChange: false,
 			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
 			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
 			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
@@ -115,42 +105,15 @@ var UIConfig;
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);
-	_UIConfig.Provider = (t0) => {
-		const $ = c(9);
-		const { config: t1, children } = t0;
-		let t2;
-		if ($[0] !== t1) {
-			t2 = t1 === void 0 ? {} : t1;
-			$[0] = t1;
-			$[1] = t2;
-		} else t2 = $[1];
-		const config = t2;
+	_UIConfig.Provider = ({ config = {}, children }) => {
 		const parentConfig = use(Context) || DEFAULT_CONFIG;
-		let t3;
-		let t4;
-		if ($[2] !== config || $[3] !== parentConfig) {
-			t3 = () => ObjectUtils.deepConditionalMerge(parentConfig, config, _temp);
-			t4 = [config, parentConfig];
-			$[2] = config;
-			$[3] = parentConfig;
-			$[4] = t3;
-			$[5] = t4;
-		} else {
-			t3 = $[4];
-			t4 = $[5];
-		}
-		const value = useDeepCompareMemo(t3, t4);
-		let t5;
-		if ($[6] !== children || $[7] !== value) {
-			t5 = /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-			$[6] = children;
-			$[7] = value;
-			$[8] = t5;
-		} else t5 = $[8];
-		return t5;
+		const value = useDeepCompareMemo(() => {
+			return ObjectUtils.deepConditionalMerge(parentConfig, config, (val) => val !== null && val !== void 0);
+		}, [config, parentConfig]);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value,
+			children
+		});
 	};
 	_UIConfig.useConfig = () => {
 		const context = use(Context);
@@ -158,8 +121,5 @@ var UIConfig;
 		return context;
 	};
 })(UIConfig || (UIConfig = {}));
-function _temp(val) {
-	return val !== null && val !== void 0;
-}
 //#endregion
 export { UIConfig };

package/dist/config/uiOverrides.context.d.ts

@@ -158,7 +158,6 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
         };
         formField: {
-            cva?: GenericCvaOption;
             headerCva?: GenericCvaOption;
             errorLabelCva?: GenericCvaOption;
             helperLabelCva?: GenericCvaOption;

package/dist/helpers/dynamicColumns.d.ts

@@ -1,6 +1,6 @@
 import { CellContext, ColumnDef, ColumnMeta } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { FieldPath } from 'react-hook-form';
+import { FieldPath } from '../components/inputs/shared/form.binding';
 import { z } from 'zod';
 type NestedTypeFromKey<T, K extends string> = K extends keyof T ? T[K] : K extends `${infer First}.${infer Rest}` ? First extends keyof T ? NestedTypeFromKey<T[First], Rest> : never : never;
 type SchemaType<TSchema extends z.ZodObject<any>> = z.infer<TSchema>;

package/dist/helpers/dynamicInputs.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Control, UseFormReturn } from 'react-hook-form';
+import { FormInstance } from '../components/inputs/shared/form.binding';
 import { z } from 'zod';
 import { InputComponentProps, InputComponentType, InputDef, InputDefBaseProps, InputWrapperType } from '../components/inputs/Inputs/InputItem';
 import { ZodUtils } from '../utils/zod.utils';
@@ -47,17 +47,17 @@ type UnknownInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<T
     } & DynamicInputDefBase<InputDefBaseProps<InputComponentProps<T>>>;
 }[DefaultComponentType<TSchema["shape"][K]>];
 type RenderInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = {
-    render: (formControl: {
-        control: Control<z.infer<TSchema>>;
+    render: (field: {
+        form: FormInstance<z.infer<TSchema>>;
         name: K;
-    }, form: UseFormReturn<z.infer<TSchema>>) => ReactElement;
+    }, form: FormInstance<z.infer<TSchema>>) => ReactElement;
 } & DynamicInputDefBase<Record<string, never>>;
 type DynamicInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = ConfigInputDef<TSchema, K> | UnknownInputDef<TSchema, K> | RenderInputDef<TSchema, K>;
 type InputsConfig<TSchema extends z.ZodObject<any>> = {
-    [K in keyof z.infer<TSchema>]?: DynamicInputDef<TSchema, K> | ((formControl: {
-        control: Control<z.infer<TSchema>>;
+    [K in keyof z.infer<TSchema>]?: DynamicInputDef<TSchema, K> | ((field: {
+        form: FormInstance<z.infer<TSchema>>;
         name: K;
-    }, form: UseFormReturn<z.infer<TSchema>>) => ReactElement) | boolean;
+    }, form: FormInstance<z.infer<TSchema>>) => ReactElement) | boolean;
 };
 type GlobalProps = {
     [T in Exclude<InputComponentType, "unknown">]: InputDefBaseProps<InputComponentProps<T>>;

package/dist/hooks/useAutosave.d.ts

@@ -1,10 +1,10 @@
-import { FieldValues, UseFormReturn } from 'react-hook-form';
-export interface UseAutosaveProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown> {
-    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+import { UIForm } from './useForm';
+export interface UseAutosaveProps<TFieldValues extends Record<string, unknown>, TTransformedValues = TFieldValues, TResponse = unknown> {
+    form: UIForm<TFieldValues>;
     delay?: number;
     enabled?: boolean;
     trigger?: "change" | "blur";
     onSave: (data: Partial<TTransformedValues>) => Promise<TResponse>;
     onSaveSuccess?: () => void;
 }
-export declare function useAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): void;
+export declare function useAutosave<TFieldValues extends Record<string, unknown>, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TTransformedValues, TResponse>): void;

package/dist/hooks/useAutosave.js

@@ -1,70 +1,85 @@
 import { ObjectUtils } from "../utils/object.utils.js";
 import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useRef } from "react";
-import { useFormState, useWatch } from "react-hook-form";
 //#region src/hooks/useAutosave.ts
-function isNilOrEqual(left, right) {
-	if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) return true;
-	return isEqual(left, right);
-}
-function diffLeftOnly(left, right, shallowKeys) {
-	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return !isNilOrEqual(left, right) ? left : void 0;
-	if (Array.isArray(left)) return !isNilOrEqual(left, right) ? left : void 0;
+function diffLeftOnly(left, right) {
+	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return isEqual(left, right) ? void 0 : left;
+	if (Array.isArray(left)) return isEqual(left, right) ? void 0 : left;
 	const result = Object.entries(left).reduce((acc, [key, value]) => {
-		const shallowSubtree = shallowKeys?.[key];
-		if (shallowSubtree === true) {
-			if (!isNilOrEqual(value, right?.[key])) acc[key] = value;
-			return acc;
-		}
-		const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
+		const diff = diffLeftOnly(value, right?.[key]);
 		if (diff !== void 0 && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) acc[key] = diff;
 		return acc;
 	}, {});
 	return ObjectUtils.isEmpty(result) ? void 0 : result;
 }
+var snapshot = (value) => structuredClone(value);
+function pickChangedValues(source, changes) {
+	if (!ObjectUtils.isObject(changes) || Array.isArray(changes)) return source;
+	return Object.entries(changes).reduce((result, [key, value]) => {
+		result[key] = pickChangedValues(source?.[key], value);
+		return result;
+	}, {});
+}
 function useAutosave({ form, delay = 500, enabled = true, trigger = "change", onSave, onSaveSuccess }) {
 	const timeoutRef = useRef(void 0);
-	const previousBlurTriggerFieldsRef = useRef(void 0);
-	const { control, reset, handleSubmit } = form;
-	const { dirtyFields, touchedFields, defaultValues } = useFormState({ control });
-	const formData = useWatch({ control });
+	const savedSnapshotRef = useRef(snapshot(form.state.values));
+	const saveQueueRef = useRef(Promise.resolve());
+	const latestSaveRef = useRef({
+		onSave,
+		onSaveSuccess
+	});
+	latestSaveRef.current = {
+		onSave,
+		onSaveSuccess
+	};
 	useEffect(() => {
-		if (!enabled || Object.keys(dirtyFields).length === 0) return;
-		if (trigger === "blur") {
-			const blurTriggerFields = JSON.stringify(touchedFields);
-			if (Object.keys(touchedFields).length === 0 || previousBlurTriggerFieldsRef.current === blurTriggerFields) return;
-			previousBlurTriggerFieldsRef.current = blurTriggerFields;
-		}
-		if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		timeoutRef.current = setTimeout(() => {
-			handleSubmit(async (data) => {
-				const changedData = diffLeftOnly(Object.entries(dirtyFields).filter(([, value]) => value).reduce((acc, [key]) => {
-					acc[key] = data[key];
-					return acc;
-				}, {}), defaultValues, dirtyFields) ?? {};
-				if (Object.keys(changedData).length === 0) return;
-				try {
-					reset(void 0, { keepValues: true });
-					await onSave(changedData);
-					onSaveSuccess?.();
-				} catch {
-					reset(defaultValues);
-					return;
-				}
-			})();
-		}, delay);
+		const clearPending = () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = void 0;
+			}
+		};
+		const queueSave = () => {
+			if (!enabled) return;
+			clearPending();
+			timeoutRef.current = setTimeout(() => {
+				saveQueueRef.current = saveQueueRef.current.then(async () => {
+					const valuesAtSaveTime = snapshot(form.state.values);
+					const changedValues = diffLeftOnly(valuesAtSaveTime, savedSnapshotRef.current);
+					if (!changedValues) return;
+					let transformedValues;
+					try {
+						transformedValues = form.parseValues(valuesAtSaveTime);
+					} catch {
+						return;
+					}
+					const payload = pickChangedValues(transformedValues, changedValues);
+					if (ObjectUtils.isEmpty(payload)) return;
+					try {
+						await latestSaveRef.current.onSave(payload);
+						savedSnapshotRef.current = valuesAtSaveTime;
+						for (const name of Object.keys(payload)) form.setFieldMeta(name, (meta) => ({
+							...meta,
+							isDirty: false
+						}));
+						latestSaveRef.current.onSaveSuccess?.();
+					} catch {}
+				});
+			}, delay);
+		};
+		const unsubscribeStore = trigger === "change" ? form.store.subscribe(() => {
+			if (!isEqual(form.state.values, savedSnapshotRef.current)) queueSave();
+		}) : void 0;
+		const unsubscribeBlur = trigger === "blur" ? form.subscribeBlur(queueSave) : void 0;
 		return () => {
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+			clearPending();
+			unsubscribeStore?.unsubscribe();
+			unsubscribeBlur?.();
 		};
 	}, [
-		defaultValues,
-		dirtyFields,
-		trigger === "change" ? formData : touchedFields,
 		delay,
-		onSave,
-		handleSubmit,
 		enabled,
-		reset,
+		form,
 		trigger
 	]);
 }

package/dist/hooks/useDebounceCallback.js

@@ -1,59 +1,25 @@
-import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/hooks/useDebounceCallback.ts
-function useDebounceCallback(callback, t0) {
-	const $ = c(10);
-	let t1;
-	if ($[0] !== t0) {
-		t1 = t0 === void 0 ? {} : t0;
-		$[0] = t0;
-		$[1] = t1;
-	} else t1 = $[1];
-	const { delay: t2 } = t1;
-	const delay = t2 === void 0 ? 500 : t2;
+function useDebounceCallback(callback, { delay = 500 } = {}) {
 	const timeoutRef = useRef(null);
 	const [isDebouncing, setIsDebouncing] = useState(false);
-	let t3;
-	if ($[2] !== callback || $[3] !== delay) {
-		t3 = (...t4) => {
-			const args = t4;
+	const debouncedCallback = useCallback((...args) => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		setIsDebouncing(true);
+		timeoutRef.current = setTimeout(() => {
+			setIsDebouncing(false);
+			callback?.(...args);
+		}, delay);
+	}, [callback, delay]);
+	useEffect(() => {
+		return () => {
 			if (timeoutRef.current) clearTimeout(timeoutRef.current);
-			setIsDebouncing(true);
-			timeoutRef.current = setTimeout(() => {
-				setIsDebouncing(false);
-				callback?.(...args);
-			}, delay);
 		};
-		$[2] = callback;
-		$[3] = delay;
-		$[4] = t3;
-	} else t3 = $[4];
-	const debouncedCallback = t3;
-	let t4;
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => () => {
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		};
-		t5 = [];
-		$[5] = t4;
-		$[6] = t5;
-	} else {
-		t4 = $[5];
-		t5 = $[6];
-	}
-	useEffect(t4, t5);
-	let t6;
-	if ($[7] !== debouncedCallback || $[8] !== isDebouncing) {
-		t6 = {
-			callback: debouncedCallback,
-			isDebouncing
-		};
-		$[7] = debouncedCallback;
-		$[8] = isDebouncing;
-		$[9] = t6;
-	} else t6 = $[9];
-	return t6;
+	}, []);
+	return {
+		callback: debouncedCallback,
+		isDebouncing
+	};
 }
 //#endregion
 export { useDebounceCallback };

package/dist/hooks/useForm.d.ts

@@ -1,18 +1,42 @@
-import { BrowserNativeObject, ExtractObjects, FieldValues, NestedValue, UseFormProps as UseReactHookFormProps } from 'react-hook-form';
+import { AnyFormApi, DeepKeys, DeepValue, ReactFormExtendedApi } from '@tanstack/react-form';
 import { z } from 'zod';
-type DeepNullablePartial<T> = T extends BrowserNativeObject | NestedValue ? T : {
-    [K in keyof T]?: ExtractObjects<T[K]> extends never ? T[K] | null : DeepNullablePartial<T[K]>;
+type FormMode = "all" | "onBlur" | "onChange" | "onSubmit" | "onTouched";
+type FieldValidators = {
+    onBlur?: ({ value }: {
+        value: unknown;
+    }) => string | undefined;
+    onChange?: ({ value }: {
+        value: unknown;
+    }) => string | undefined;
 };
-type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
-type NullableDefaultValues<TFieldValues> = TFieldValues extends AsyncDefaultValues<TFieldValues> ? DeepNullablePartial<Awaited<TFieldValues>> : DeepNullablePartial<TFieldValues>;
-export type UseFormResolverProps<TFieldValues extends FieldValues, TTransformedValues = TFieldValues> = {
-    zodSchema: z.ZodType<TTransformedValues, TFieldValues>;
-    resolver?: never;
-} | {
-    zodSchema?: never;
-};
-export type UseFormProps<TFieldValues extends FieldValues, TContext, TTransformedValues = TFieldValues> = Omit<UseReactHookFormProps<TFieldValues, TContext, TTransformedValues>, "defaultValues"> & {
-    defaultValues?: NullableDefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+export type FormSubmitHandler<TValues> = (values: TValues) => void | Promise<void>;
+export type FormSubmitErrorHandler<TValues> = (errors: unknown, values: TValues) => unknown;
+type TanStackForm<TFieldValues> = ReactFormExtendedApi<TFieldValues, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, never>;
+export type UIForm<TFieldValues extends Record<string, unknown> = Record<string, unknown>> = Omit<TanStackForm<TFieldValues>, "handleSubmit"> & {
+    readonly disabled: boolean;
+    getFieldValidators: (name: DeepKeys<TFieldValues>) => FieldValidators | undefined;
+    notifyBlur: (name: DeepKeys<TFieldValues>) => void;
+    parseValues: (values: TFieldValues) => unknown;
+    subscribeBlur: (listener: (name: DeepKeys<TFieldValues>) => void) => () => void;
+    handleSubmit: (onValid: FormSubmitHandler<any>, onInvalid?: FormSubmitErrorHandler<TFieldValues>) => (event?: {
+        preventDefault?: () => void;
+        stopPropagation?: () => void;
+    }) => Promise<void>;
 };
-export declare function useForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ resolver, zodSchema, defaultValues, ...props }: UseFormProps<TFieldValues, TContext, TTransformedValues> & UseFormResolverProps<TFieldValues, TTransformedValues>): import('react-hook-form').UseFormReturn<TFieldValues, TContext, TTransformedValues>;
-export {};
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+type NullableDefaults<T> = T extends Date | File | Blob ? T : T extends Array<infer TItem> ? Array<NullableDefaults<TItem>> : T extends object ? {
+    [K in keyof T]?: NullableDefaults<T[K]> | null;
+} : T | null;
+export interface UseFormProps<TFieldValues, TTransformedValues = TFieldValues> {
+    defaultValues?: NullableDefaults<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+    disabled?: boolean;
+    mode?: FormMode;
+    onSubmitAsync?: (props: {
+        value: TFieldValues;
+    }) => Promise<unknown>;
+    zodSchema?: z.ZodType<TTransformedValues, TFieldValues>;
+}
+export declare function useForm<TFieldValues extends Record<string, unknown> = Record<string, unknown>, _TContext = unknown, TTransformedValues = TFieldValues>({ defaultValues, disabled, mode, onSubmitAsync, zodSchema, }?: UseFormProps<TFieldValues, TTransformedValues>): UIForm<TFieldValues>;
+export declare const useFormValue: <TFieldValues extends Record<string, unknown>, TSelected>(form: UIForm<TFieldValues>, selector: (values: TFieldValues) => TSelected) => TSelected;
+export declare const useFormState: <TFieldValues extends Record<string, unknown>, TSelected>(form: UIForm<TFieldValues>, selector: (state: UIForm<TFieldValues>["state"]) => TSelected) => TSelected;
+export type { AnyFormApi, DeepKeys, DeepValue };