@railway-ts/use-form 0.1.0

package/dist/index.js

@@ -0,0 +1,989 @@
+import { useCallback, useReducer, useMemo, useRef, useEffect } from 'react';
+import { isErr, match } from '@railway-ts/pipelines/result';
+import { validate, formatErrors } from '@railway-ts/pipelines/schema';
+
+// src/useForm.ts
+
+// src/utils.ts
+var getValueByPath = (obj, path) => {
+  if (!path) return obj;
+  const normalizedPath = path.replace(/\[(\d+)\]/g, ".$1");
+  const parts = normalizedPath.split(".").filter(Boolean);
+  let current = obj;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    current = current[part];
+  }
+  return current;
+};
+var setValueByPath = (obj, path, value) => {
+  if (!path) return value;
+  const normalizedPath = path.replace(/\[(\d+)\]/g, ".$1");
+  const parts = normalizedPath.split(".").filter(Boolean);
+  const result = Array.isArray(obj) ? [...obj] : { ...obj };
+  let currNew = Array.isArray(result) ? result : result;
+  let currOld = obj;
+  for (let i = 0; i < parts.length; i++) {
+    const keyStr = parts[i];
+    const isIndex = /^\d+$/.test(keyStr);
+    const key = isIndex ? Number(keyStr) : keyStr;
+    if (i === parts.length - 1) {
+      if (Array.isArray(currNew) && typeof key === "number") {
+        currNew[key] = value;
+      } else if (!Array.isArray(currNew) && typeof key === "string") {
+        currNew[key] = value;
+      }
+      break;
+    }
+    let nextOld = void 0;
+    if (currOld != null && typeof currOld === "object") {
+      if (Array.isArray(currOld) && typeof key === "number") {
+        nextOld = currOld[key];
+      } else if (!Array.isArray(currOld) && typeof key === "string") {
+        nextOld = currOld[key];
+      }
+    }
+    let nextNew;
+    if (nextOld == null) {
+      const nextIsIndex = /^\d+$/.test(parts[i + 1] ?? "");
+      nextNew = nextIsIndex ? [] : {};
+    } else {
+      nextNew = Array.isArray(nextOld) ? [...nextOld] : { ...nextOld };
+    }
+    if (Array.isArray(currNew) && typeof key === "number") {
+      currNew[key] = nextNew;
+    } else if (!Array.isArray(currNew) && typeof key === "string") {
+      currNew[key] = nextNew;
+    }
+    currNew = nextNew;
+    currOld = nextOld ?? (Array.isArray(nextNew) ? [] : {});
+  }
+  return result;
+};
+var isPathAffected = (path, changePath) => {
+  if (path === changePath) return true;
+  const normalizedPath = path.replace(/\[(\d+)\]/g, ".$1");
+  const normalizedChangePath = changePath.replace(/\[(\d+)\]/g, ".$1");
+  return normalizedPath === normalizedChangePath || normalizedPath.startsWith(`${normalizedChangePath}.`);
+};
+var collectFieldPaths = (obj, prefix = "") => {
+  const paths = [];
+  const isLeaf = (v) => v == null || typeof v !== "object" || v instanceof Date || v instanceof RegExp;
+  const visit = (value, path) => {
+    if (path) paths.push(path);
+    if (isLeaf(value)) return;
+    if (Array.isArray(value)) {
+      value.forEach((item, i) => visit(item, `${path}[${i}]`));
+      return;
+    }
+    const entries = Object.entries(value);
+    for (const [k, v] of entries) {
+      const childPath = path ? `${path}.${k}` : k;
+      visit(v, childPath);
+    }
+  };
+  visit(obj, prefix);
+  return paths;
+};
+
+// src/formReducer.ts
+var formReducer = (state, action, initialValues) => {
+  switch (action.type) {
+    case "SET_FIELD_VALUE": {
+      const newValues = setValueByPath(
+        state.values,
+        action.field,
+        action.value
+      );
+      const newServerErrors = { ...state.serverErrors };
+      Object.keys(newServerErrors).forEach((errorPath) => {
+        if (isPathAffected(errorPath, action.field)) {
+          delete newServerErrors[errorPath];
+        }
+      });
+      return {
+        ...state,
+        values: newValues,
+        serverErrors: newServerErrors,
+        isDirty: true
+      };
+    }
+    case "SET_VALUES": {
+      const newServerErrors = { ...state.serverErrors };
+      Object.keys(action.values).forEach((field) => {
+        Object.keys(newServerErrors).forEach((errorPath) => {
+          if (isPathAffected(errorPath, field)) {
+            delete newServerErrors[errorPath];
+          }
+        });
+      });
+      return {
+        ...state,
+        values: { ...state.values, ...action.values },
+        serverErrors: newServerErrors,
+        isDirty: true
+      };
+    }
+    case "SET_FIELD_TOUCHED":
+      return {
+        ...state,
+        touched: {
+          ...state.touched,
+          [action.field]: action.isTouched
+        }
+      };
+    case "SET_CLIENT_ERRORS":
+      return {
+        ...state,
+        clientErrors: action.errors
+      };
+    case "SET_SERVER_ERRORS":
+      return {
+        ...state,
+        serverErrors: action.errors
+      };
+    case "CLEAR_SERVER_ERRORS":
+      return {
+        ...state,
+        serverErrors: {}
+      };
+    case "SET_SUBMITTING":
+      return {
+        ...state,
+        isSubmitting: action.isSubmitting
+      };
+    case "RESET_FORM":
+      return {
+        values: initialValues,
+        touched: {},
+        clientErrors: {},
+        serverErrors: {},
+        isSubmitting: false,
+        isDirty: false
+      };
+    case "MARK_ALL_TOUCHED": {
+      const allTouched = {};
+      action.fields.forEach((path) => {
+        allTouched[path] = true;
+      });
+      return {
+        ...state,
+        touched: {
+          ...state.touched,
+          ...allTouched
+        }
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+// src/arrayHelpersFactory.ts
+var createArrayHelpers = (field, arrayValue, setFieldValue, getFieldProps, getSelectFieldProps, getSliderProps, getCheckboxProps, getSwitchProps, getFileFieldProps, getRadioGroupOptionProps) => {
+  return {
+    /**
+     * The current array of values for this field.
+     * Use this to iterate over items when rendering the form.
+     *
+     * @example
+     * // Render array items
+     * helpers.values.map((contact, index) => (
+     *   <div key={index}>
+     *     <input {...helpers.getFieldProps(index, "name")} />
+     *   </div>
+     * ))
+     */
+    values: arrayValue,
+    /**
+     * Adds a new item to the end of the array.
+     * The form state is updated immutably and all subscribed components re-render.
+     *
+     * @param value - The item to add to the array
+     *
+     * @example
+     * // Add a new contact
+     * const helpers = form.arrayHelpers("contacts");
+     * helpers.push({ name: "", email: "", phone: "" });
+     */
+    push: (value) => {
+      const newArray = [...arrayValue, value];
+      setFieldValue(field, newArray);
+    },
+    /**
+     * Removes an item at the specified index from the array.
+     * If the index is out of bounds, no action is taken.
+     * The form state is updated immutably.
+     *
+     * @param index - The zero-based index of the item to remove
+     *
+     * @example
+     * // Remove the second contact
+     * const helpers = form.arrayHelpers("contacts");
+     * helpers.remove(1);
+     */
+    remove: (index) => {
+      if (index < 0 || index >= arrayValue.length) return;
+      const newArray = [...arrayValue];
+      newArray.splice(index, 1);
+      setFieldValue(field, newArray);
+    },
+    /**
+     * Inserts an item at the specified index in the array.
+     * Items at and after the index are shifted to the right.
+     * If the index is out of bounds, it's clamped to valid range [0, length].
+     *
+     * @param index - The zero-based insertion position
+     * @param value - The item to insert
+     *
+     * @example
+     * // Insert a contact at the beginning
+     * const helpers = form.arrayHelpers("contacts");
+     * helpers.insert(0, { name: "New Contact", email: "", phone: "" });
+     */
+    insert: (index, value) => {
+      const clamped = Math.max(0, Math.min(index, arrayValue.length));
+      const newArray = [...arrayValue];
+      newArray.splice(clamped, 0, value);
+      setFieldValue(field, newArray);
+    },
+    /**
+     * Swaps the positions of two items in the array.
+     * If either index is out of bounds or they are equal, no action is taken.
+     * Useful for drag-and-drop reordering interfaces.
+     *
+     * @param indexA - The zero-based index of the first item
+     * @param indexB - The zero-based index of the second item
+     *
+     * @example
+     * // Swap first and second contacts
+     * const helpers = form.arrayHelpers("contacts");
+     * helpers.swap(0, 1);
+     *
+     * @example
+     * // Move item up in list
+     * const moveUp = (index: number) => {
+     *   if (index > 0) helpers.swap(index, index - 1);
+     * };
+     */
+    swap: (indexA, indexB) => {
+      if (indexA === indexB || indexA < 0 || indexB < 0 || indexA >= arrayValue.length || indexB >= arrayValue.length) {
+        return;
+      }
+      const newArray = [...arrayValue];
+      const a = newArray[indexA];
+      const b = newArray[indexB];
+      if (a === void 0 || b === void 0) {
+        return;
+      }
+      newArray[indexA] = b;
+      newArray[indexB] = a;
+      setFieldValue(field, newArray);
+    },
+    /**
+     * Replaces an entire item at the specified index with a new value.
+     * If the index is out of bounds, no action is taken.
+     *
+     * @param index - The zero-based index of the item to replace
+     * @param value - The new item value
+     *
+     * @example
+     * // Replace a contact entirely
+     * const helpers = form.arrayHelpers("contacts");
+     * helpers.replace(0, { name: "John Doe", email: "john@example.com", phone: "555-0100" });
+     */
+    replace: (index, value) => {
+      if (index < 0 || index >= arrayValue.length) return;
+      const newArray = [...arrayValue];
+      newArray[index] = value;
+      setFieldValue(field, newArray);
+    },
+    /**
+     * Gets props for a native text input bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <input type="text">, <input type="email">, <textarea>, etc.
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native input element
+     *
+     * @example
+     * // Text input for contact name
+     * helpers.values.map((_, index) => (
+     *   <input type="text" {...helpers.getFieldProps(index, "name")} />
+     * ))
+     */
+    getFieldProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getFieldProps(path);
+    },
+    /**
+     * Gets props for a native select element bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <select>
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native select element
+     *
+     * @example
+     * // Select for contact type
+     * <select {...helpers.getSelectFieldProps(index, "type")}>
+     *   <option value="work">Work</option>
+     *   <option value="personal">Personal</option>
+     * </select>
+     */
+    getSelectFieldProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getSelectFieldProps(path);
+    },
+    /**
+     * Gets props for a native range input bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <input type="range">
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native range input element
+     *
+     * @example
+     * // Range slider for priority
+     * <input type="range" min={0} max={10} {...helpers.getSliderProps(index, "priority")} />
+     */
+    getSliderProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getSliderProps(path);
+    },
+    /**
+     * Gets props for a native checkbox bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <input type="checkbox">
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native checkbox input
+     *
+     * @example
+     * // Checkbox for marking contact as favorite
+     * <input type="checkbox" {...helpers.getCheckboxProps(index, "isFavorite")} />
+     */
+    getCheckboxProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getCheckboxProps(path);
+    },
+    /**
+     * Gets props for a native switch (checkbox styled as switch) bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <input type="checkbox"> (styled as switch via CSS)
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native checkbox input
+     *
+     * @example
+     * // Switch for enabling/disabling a feature
+     * <label className="switch">
+     *   <input type="checkbox" {...helpers.getSwitchProps(index, "enabled")} />
+     *   <span className="slider"></span>
+     * </label>
+     */
+    getSwitchProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getSwitchProps(path);
+    },
+    /**
+     * Gets props for a native file input bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: <input type="file">
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @returns Props object to spread onto a native file input
+     *
+     * @example
+     * // File input for contact avatar
+     * <input type="file" accept="image/*" {...helpers.getFileFieldProps(index, "avatar")} />
+     */
+    getFileFieldProps: (index, subField) => {
+      const path = `${field}[${index}].${subField}`;
+      return getFileFieldProps(path);
+    },
+    /**
+     * Gets props for a radio group option bound to a field within an array item.
+     * Provides type-safe field path autocomplete for nested fields.
+     * Works with: multiple <input type="radio"> elements sharing the same name
+     *
+     * @param index - The zero-based index of the array item
+     * @param subField - The field path within the array item (type-safe and autocompleted)
+     * @param optionValue - The value this radio option represents
+     * @returns Props object to spread onto a native radio input
+     *
+     * @example
+     * // Radio group for contact method preference
+     * <label>
+     *   <input type="radio" {...helpers.getRadioGroupOptionProps(index, "preferredMethod", "email")} />
+     *   Email
+     * </label>
+     * <label>
+     *   <input type="radio" {...helpers.getRadioGroupOptionProps(index, "preferredMethod", "phone")} />
+     *   Phone
+     * </label>
+     */
+    getRadioGroupOptionProps: (index, subField, optionValue) => {
+      const path = `${field}[${index}].${subField}`;
+      return getRadioGroupOptionProps(path, optionValue);
+    }
+  };
+};
+
+// src/fieldPropsFactory.ts
+var createNativeFieldProps = (field, formValues, handleChange, handleBlur) => {
+  const raw = getValueByPath(formValues, field);
+  const value = raw == null ? "" : typeof raw === "string" || typeof raw === "number" ? raw : raw instanceof Date ? isNaN(raw.getTime()) ? "" : raw.toISOString().split("T")[0] : JSON.stringify(raw);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    value,
+    onChange: (e) => {
+      handleChange(field, e.target.value);
+    },
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createNativeSelectFieldProps = (field, formValues, handleChange, handleBlur) => {
+  const raw = getValueByPath(formValues, field);
+  const value = raw == null ? "" : typeof raw === "string" || typeof raw === "number" ? raw : JSON.stringify(raw);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    value,
+    onChange: (e) => handleChange(field, e.target.value),
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createNativeCheckboxProps = (field, formValues, handleChange, handleBlur) => {
+  const value = getValueByPath(formValues, field);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    checked: !!value,
+    onChange: (e) => handleChange(field, e.target.checked),
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createNativeSwitchProps = (field, formValues, handleChange, handleBlur) => {
+  const value = getValueByPath(formValues, field);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    checked: !!value,
+    onChange: (e) => handleChange(field, e.target.checked),
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createNativeSliderProps = (field, formValues, handleChange, handleBlur) => {
+  const raw = getValueByPath(formValues, field);
+  const toNumber = (v) => typeof v === "string" ? Number(v || 0) : typeof v === "number" ? v : 0;
+  const value = Array.isArray(raw) ? toNumber(raw[0]) : toNumber(raw);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    type: "range",
+    value,
+    onChange: (e) => handleChange(field, Number(e.target.value)),
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createCheckboxGroupOptionProps = (field, optionValue, formValues, handleChange, handleBlur) => {
+  const raw = getValueByPath(formValues, field);
+  const current = Array.isArray(raw) ? raw : [];
+  const isChecked = current.some((v) => String(v) === String(optionValue));
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}-${String(optionValue)}`,
+    name: field,
+    value: optionValue,
+    checked: isChecked,
+    onChange: (e) => {
+      if (e.target.checked) {
+        if (!current.some((v) => String(v) === String(optionValue))) {
+          handleChange(field, [...current, optionValue]);
+        }
+      } else {
+        const next = current.filter((v) => String(v) !== String(optionValue));
+        handleChange(field, next);
+      }
+    },
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createNativeFileFieldProps = (field, _formValues, handleChange, handleBlur) => {
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}`,
+    name: field,
+    onChange: (e) => {
+      const input = e.target;
+      const files = input.files;
+      if (!files || files.length === 0) {
+        handleChange(field, input.multiple ? [] : null);
+        return;
+      }
+      handleChange(field, input.multiple ? Array.from(files) : files[0]);
+    },
+    onBlur: () => handleBlur(field, true)
+  };
+};
+var createRadioGroupOptionProps = (field, optionValue, formValues, handleChange, handleBlur) => {
+  const current = getValueByPath(formValues, field);
+  const checked = String(current) === String(optionValue);
+  return {
+    id: `field-${field.replace(/[[\].]/g, "-")}-${String(optionValue)}`,
+    name: field,
+    value: optionValue,
+    checked,
+    onChange: (e) => {
+      if (e.target.checked) handleChange(field, optionValue);
+    },
+    onBlur: () => handleBlur(field, true)
+  };
+};
+
+// src/useForm.ts
+var useForm = (validator, options = {}) => {
+  const {
+    initialValues = {},
+    onSubmit,
+    validationMode
+  } = options;
+  const mode = validationMode ?? "live";
+  const validateOnChange = mode === "live";
+  const validateOnBlur = mode === "live" || mode === "blur";
+  const validateOnMount = mode === "mount";
+  const touchOnChange = mode === "live";
+  const reducerFn = useCallback(
+    (state, action) => formReducer(state, action, initialValues),
+    [initialValues]
+  );
+  const initialState = {
+    values: initialValues,
+    touched: {},
+    clientErrors: {},
+    serverErrors: {},
+    isSubmitting: false,
+    isDirty: false
+  };
+  const [formState, dispatch] = useReducer(reducerFn, initialState);
+  const errors = useMemo(() => {
+    const combined = {};
+    Object.entries(formState.serverErrors).forEach(([path, message]) => {
+      combined[path] = message;
+    });
+    Object.entries(formState.clientErrors).forEach(([path, message]) => {
+      if (!combined[path]) {
+        combined[path] = message;
+      }
+    });
+    return combined;
+  }, [formState.clientErrors, formState.serverErrors]);
+  const isValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const validateForm = useCallback(
+    (values) => {
+      const validationResult = validate(values, validator);
+      if (isErr(validationResult)) {
+        dispatch({
+          type: "SET_CLIENT_ERRORS",
+          errors: formatErrors(validationResult.error)
+        });
+      } else {
+        dispatch({
+          type: "SET_CLIENT_ERRORS",
+          errors: {}
+        });
+      }
+      return validationResult;
+    },
+    [validator]
+  );
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (validateOnMount && !didMountRef.current) {
+      didMountRef.current = true;
+      validateForm(initialValues);
+      const allFields = collectFieldPaths(
+        initialValues
+      );
+      dispatch({
+        type: "MARK_ALL_TOUCHED",
+        fields: allFields
+      });
+    }
+  }, [initialValues, validateForm, validateOnMount]);
+  const setFieldValue = useCallback(
+    (field, value, shouldValidate = validateOnChange) => {
+      const updatedValues = setValueByPath(
+        formState.values,
+        field,
+        value
+      );
+      dispatch({
+        type: "SET_FIELD_VALUE",
+        field,
+        value
+      });
+      if (touchOnChange && !formState.touched[field]) {
+        dispatch({ type: "SET_FIELD_TOUCHED", field, isTouched: true });
+      }
+      if (shouldValidate) {
+        validateForm(updatedValues);
+      }
+    },
+    [
+      formState.values,
+      formState.touched,
+      validateOnChange,
+      validateForm,
+      touchOnChange
+    ]
+  );
+  const setValues = useCallback(
+    (newValues, shouldValidate = validateOnChange) => {
+      dispatch({
+        type: "SET_VALUES",
+        values: newValues
+      });
+      if (shouldValidate) {
+        const updatedValues = { ...formState.values, ...newValues };
+        validateForm(updatedValues);
+      }
+    },
+    [formState.values, validateOnChange, validateForm]
+  );
+  const setFieldTouched = useCallback(
+    (field, isTouched = true, shouldValidate = validateOnBlur) => {
+      dispatch({
+        type: "SET_FIELD_TOUCHED",
+        field,
+        isTouched
+      });
+      if (shouldValidate) {
+        validateForm(formState.values);
+      }
+    },
+    [formState.values, validateOnBlur, validateForm]
+  );
+  const setServerErrors = useCallback(
+    (serverErrors) => {
+      dispatch({
+        type: "SET_SERVER_ERRORS",
+        errors: serverErrors
+      });
+    },
+    []
+  );
+  const clearServerErrors = useCallback(() => {
+    dispatch({
+      type: "CLEAR_SERVER_ERRORS"
+    });
+  }, []);
+  const handleSubmit = useCallback(
+    async (e) => {
+      if (e) {
+        e.preventDefault();
+      }
+      const valuePaths = collectFieldPaths(
+        formState.values
+      );
+      const allPaths = Array.from(
+        /* @__PURE__ */ new Set([
+          ...valuePaths,
+          ...Object.keys(formState.clientErrors),
+          ...Object.keys(formState.serverErrors)
+        ])
+      );
+      dispatch({
+        type: "MARK_ALL_TOUCHED",
+        fields: allPaths
+      });
+      dispatch({
+        type: "SET_SUBMITTING",
+        isSubmitting: true
+      });
+      dispatch({
+        type: "CLEAR_SERVER_ERRORS"
+      });
+      const validationResult = validate(formState.values, validator);
+      return match(validationResult, {
+        ok: async (validData) => {
+          if (onSubmit) {
+            try {
+              await onSubmit(validData);
+            } catch (error) {
+              console.error("Form submission error:", error);
+            }
+          }
+          dispatch({
+            type: "SET_SUBMITTING",
+            isSubmitting: false
+          });
+          return validData;
+        },
+        err: async (errors2) => {
+          dispatch({
+            type: "SET_CLIENT_ERRORS",
+            errors: formatErrors(errors2)
+          });
+          dispatch({
+            type: "SET_SUBMITTING",
+            isSubmitting: false
+          });
+          return Promise.resolve(errors2);
+        }
+      });
+    },
+    [
+      formState.values,
+      formState.clientErrors,
+      formState.serverErrors,
+      validator,
+      onSubmit
+    ]
+  );
+  const resetForm = useCallback(() => {
+    dispatch({
+      type: "RESET_FORM"
+    });
+    if (validateOnMount) {
+      validateForm(initialValues);
+    }
+  }, [initialValues, validateForm, validateOnMount]);
+  const getFieldProps = useCallback(
+    (field) => {
+      return createNativeFieldProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getSelectFieldProps = useCallback(
+    (field) => {
+      return createNativeSelectFieldProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getCheckboxProps = useCallback(
+    (field) => {
+      return createNativeCheckboxProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getSwitchProps = useCallback(
+    (field) => {
+      return createNativeSwitchProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getSliderProps = useCallback(
+    (field) => {
+      return createNativeSliderProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getCheckboxGroupOptionProps = useCallback(
+    (field, optionValue) => {
+      return createCheckboxGroupOptionProps(
+        field,
+        optionValue,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getFileFieldProps = useCallback(
+    (field) => {
+      return createNativeFileFieldProps(
+        field,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const getRadioGroupOptionProps = useCallback(
+    (field, optionValue) => {
+      return createRadioGroupOptionProps(
+        field,
+        optionValue,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const arrayHelpersImpl = useCallback(
+    (field) => {
+      const getFieldPropsAtPath = (path) => createNativeFieldProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getSelectFieldPropsAtPath = (path) => createNativeSelectFieldProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getSliderPropsAtPath = (path) => createNativeSliderProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getCheckboxPropsAtPath = (path) => createNativeCheckboxProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getSwitchPropsAtPath = (path) => createNativeSwitchProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getFileFieldPropsAtPath = (path) => createNativeFileFieldProps(
+        path,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const getRadioGroupOptionPropsAtPath = (path, opt) => createRadioGroupOptionProps(
+        path,
+        opt,
+        formState.values,
+        setFieldValue,
+        setFieldTouched
+      );
+      const arrayValue = getValueByPath(formState.values, field) || [];
+      return createArrayHelpers(
+        field,
+        arrayValue,
+        setFieldValue,
+        getFieldPropsAtPath,
+        getSelectFieldPropsAtPath,
+        getSliderPropsAtPath,
+        getCheckboxPropsAtPath,
+        getSwitchPropsAtPath,
+        getFileFieldPropsAtPath,
+        getRadioGroupOptionPropsAtPath
+      );
+    },
+    [formState.values, setFieldValue, setFieldTouched]
+  );
+  const arrayHelpers = arrayHelpersImpl;
+  return {
+    // Form state
+    values: formState.values,
+    touched: formState.touched,
+    errors,
+    clientErrors: formState.clientErrors,
+    serverErrors: formState.serverErrors,
+    isSubmitting: formState.isSubmitting,
+    isValid,
+    isDirty: formState.isDirty,
+    // Field management
+    setFieldValue,
+    setFieldTouched,
+    setValues,
+    // Server error management
+    setServerErrors,
+    clearServerErrors,
+    // Form actions
+    handleSubmit,
+    resetForm,
+    validateForm,
+    // Native HTML field integration
+    getFieldProps,
+    getSelectFieldProps,
+    getCheckboxProps,
+    getSwitchProps,
+    getSliderProps,
+    getCheckboxGroupOptionProps,
+    getFileFieldProps,
+    getRadioGroupOptionProps,
+    // Array field helpers
+    arrayHelpers
+  };
+};
+function useDebounce(callback, delay) {
+  const timeoutRef = useRef(null);
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return useCallback(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+}
+
+// src/useAutoSubmitForm.ts
+var useFormAutoSubmission = (form, delay = 200) => {
+  const lastValidatedRef = useRef("");
+  const debouncedSubmit = useDebounce(() => {
+    if (form.isValid) form.handleSubmit();
+  }, delay);
+  useEffect(() => {
+    if (!form.isDirty) return;
+    const valuesString = JSON.stringify(form.values);
+    if (valuesString === lastValidatedRef.current) return;
+    lastValidatedRef.current = valuesString;
+    form.validateForm(form.values);
+    if (form.isValid) debouncedSubmit();
+  }, [form.values, form.isDirty, form.isValid, debouncedSubmit, form]);
+  return null;
+};
+
+export { useDebounce, useForm, useFormAutoSubmission };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map