react-f0rm 1.2.0 → 1.4.0

package/dist/index.umd.js

@@ -309,6 +309,15 @@
   function isPromise(value) {
     return value && typeof value.then === "function";
   }
+  function extractEventValue(e, options) {
+    const target = e?.target;
+    if (!target) return e;
+    if (target.type === "file") return target.files;
+    if (target.type === "checkbox") return target.checked;
+    if (options?.valueAsNumber) return target.valueAsNumber;
+    if (options?.valueAsDate) return target.valueAsDate;
+    return target.value;
+  }
   function isEqual(a, b) {
     if (Object.is(a, b)) return true;
     if (a instanceof Date && b instanceof Date)
@@ -361,6 +370,11 @@
     const cache = valuesCaches.get(form);
     if (cache) cache.version++;
   }
+  const errorsCaches = /* @__PURE__ */ new WeakMap();
+  function bumpErrorsVersion(form) {
+    const cache = errorsCaches.get(form);
+    if (cache) cache.version++;
+  }
   const dirtyBaselines = /* @__PURE__ */ new WeakMap();
   function getDirtyBaseline(form, key, segments) {
     const baselines = dirtyBaselines.get(form);
@@ -430,17 +444,64 @@
     }
     return entries;
   }
+  function computeErrorsViews(form) {
+    const cached = errorsCaches.get(form);
+    if (cached && cached.version === 0) return;
+    const result = {};
+    const tree = {};
+    for (const [key, list] of form.errors) {
+      const segments = JSON.parse(key);
+      result[segments.join(".")] = list;
+      let node = tree;
+      for (let i = 0; i < segments.length - 1; i++) {
+        const segment = segments[i];
+        const slot = node[segment];
+        const container = slot && !(Array.isArray(slot) && slot.length > 0 && isFieldError(slot[0])) ? slot : typeof segments[i + 1] === "number" ? [] : {};
+        node[segment] = container;
+        node = container;
+      }
+      node[segments[segments.length - 1]] = list;
+    }
+    if (cached) {
+      cached.result = result;
+      cached.tree = tree;
+      cached.version = 0;
+    } else {
+      errorsCaches.set(form, { version: 0, result, tree });
+    }
+  }
+  function getErrorsRecord(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).result;
+  }
+  function getErrorsTree(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).tree;
+  }
+  function fieldPathToDottedKey(name) {
+    return create$1(name).value.join(".");
+  }
+  function dottedKeyToFieldPath(key) {
+    const segments = key.split(".");
+    const numeric = (segment) => /^(0|[1-9]\d*)$/.test(segment);
+    return segments.map(
+      (segment, i) => i > 0 && numeric(segment) ? `[${segment}]` : `${i > 0 ? "." : ""}${segment}`
+    ).join("");
+  }
   function getFirstError({ errors }) {
     return errors.values().next().value?.[0]?.message;
   }
-  function setError(form, name, error) {
-    setErrorByPath(form, create$1(name), error);
+  function setError(form, name, error, options) {
+    setErrorByPath(form, create$1(name), error, options);
   }
-  function setErrorByPath({ emitter, errors }, path, error) {
+  function setErrorByPath(form, path, error, options) {
+    const { emitter, errors } = form;
     const list = normalizeErrors(error);
     if (list) errors.set(path.key, list);
     else errors.delete(path.key);
+    bumpErrorsVersion(form);
     emit(emitter, "errors", path);
+    if (options?.shouldFocus) emit(emitter, "focusError", path.key);
   }
   function normalizeErrors(error) {
     if (typeof error === "string") {
@@ -462,11 +523,13 @@
     const { emitter, errors } = form;
     if (name === void 0) {
       errors.clear();
+      bumpErrorsVersion(form);
       emit(emitter, "errors");
       return;
     }
     const paths = typeof name === "string" || isSegmentsPath(name) ? [create$1(name)] : name.map((one) => create$1(one));
     for (const { key } of paths) errors.delete(key);
+    bumpErrorsVersion(form);
     for (const path of paths) emit(emitter, "errors", path);
   }
   function setServerErrors(form, errors, options) {
@@ -482,10 +545,151 @@
       );
     }
   }
+  function clearServerErrors(form) {
+    let changed = false;
+    for (const [key, errors] of form.errors) {
+      const kept = errors.filter((error) => error.type !== "server");
+      if (kept.length === 0) {
+        form.errors.delete(key);
+        changed = true;
+      } else if (kept.length !== errors.length) {
+        form.errors.set(key, kept);
+        changed = true;
+      }
+    }
+    if (changed) {
+      bumpErrorsVersion(form);
+      emit(form.emitter, "errors");
+    }
+  }
   function hasErrors({ errors }) {
     return errors.size > 0;
   }
 
+  function hasStandardProps(schema) {
+    return !!schema && typeof schema === "object" && typeof schema["~standard"]?.validate === "function";
+  }
+  function toFieldError(issue) {
+    return { type: "standard", message: issue?.message || "Validation failed" };
+  }
+  function schemaToFieldValidator(schema) {
+    return async (value) => {
+      const result = await schema["~standard"].validate(value);
+      if (!result.issues?.length) return void 0;
+      return result.issues.map(toFieldError);
+    };
+  }
+  function schemaToFormValidator(schema) {
+    return async (values) => {
+      const result = await schema["~standard"].validate(values);
+      const { issues } = result;
+      if (!issues?.length) {
+        return {
+          [VALIDATION_OUTCOME]: true,
+          values: "value" in result ? result.value : void 0
+        };
+      }
+      const errors = {};
+      for (const issue of issues) {
+        const segments = toPathSegments(issue);
+        if (segments.length) {
+          assignAtPath(errors, segments, toFieldError(issue));
+        } else {
+          const slot = errors[FORM_ERROR] ??= [];
+          if (Array.isArray(slot)) slot.push(toFieldError(issue));
+        }
+      }
+      return { [VALIDATION_OUTCOME]: true, errors: pruneEmpty(errors) || {} };
+    };
+  }
+  function toPathSegments(issue) {
+    const path = issue.path || [];
+    const segments = [];
+    for (const segment of path) {
+      const key = typeof segment === "object" && segment !== null ? segment.key : segment;
+      segments.push(String(key));
+    }
+    return segments;
+  }
+  function assignAtPath(root, segments, error) {
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const segment = segments[i];
+      let next = node[segment];
+      if (next === void 0) {
+        next = node[segment] = {};
+      }
+      if (!isBranch(next)) return;
+      node = next;
+    }
+    const leaf = segments[segments.length - 1];
+    const slot = node[leaf];
+    if (slot === void 0) node[leaf] = [error];
+    else if (Array.isArray(slot)) slot.push(error);
+  }
+  function isBranch(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+  }
+  function pruneEmpty(node) {
+    let hasLeaf = false;
+    const result = {};
+    Object.entries(node).forEach(([key, value]) => {
+      if (isBranch(value)) {
+        const pruned = pruneEmpty(value);
+        if (pruned) {
+          result[key] = pruned;
+          hasLeaf = true;
+        }
+      } else {
+        result[key] = value;
+        hasLeaf = true;
+      }
+    });
+    return hasLeaf ? result : void 0;
+  }
+
+  function isFieldDirtyByPath(form, path) {
+    const live = form.values.get(path.key);
+    return form.values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live;
+  }
+  function isDirty(form) {
+    let dirty = false;
+    forEachDirtyField(form, () => {
+      dirty = true;
+    });
+    return dirty;
+  }
+  function forEachDirtyField(form, fn) {
+    for (const [key, value] of form.values) {
+      const path = JSON.parse(key);
+      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
+    }
+  }
+  function computeDirtyFields(form) {
+    const dirtyFields = {};
+    forEachDirtyField(form, (key) => {
+      dirtyFields[key] = true;
+    });
+    return dirtyFields;
+  }
+  function sameDirtyKeys(a, b) {
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length) return false;
+    return aKeys.every((key) => b[key] === true);
+  }
+  function getDirtyFields(form) {
+    let cache = dirtyFieldsCaches.get(form);
+    if (!cache) {
+      cache = { version: 0, result: computeDirtyFields(form) };
+      dirtyFieldsCaches.set(form, cache);
+    } else if (cache.version > 0) {
+      const result = computeDirtyFields(form);
+      if (!sameDirtyKeys(cache.result, result)) cache.result = result;
+      cache.version = 0;
+    }
+    return cache.result;
+  }
+
   function setTouched(form, name) {
     setTouchedByPath(form, create$1(name));
   }
@@ -553,11 +757,12 @@
   }
   function setValueByPath(form, path, value, options) {
     const { emitter, values, deleted } = form;
-    values.set(path.key, value);
+    const next = typeof value === "function" ? value(getValueByPath(form, path)) : value;
+    values.set(path.key, next);
     pruneDescendantKeys(values, path);
     reviveBranch(deleted, path);
     pruneDirtyBaselines(form, path);
-    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, next);
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
     if (options?.shouldTouch) setTouchedByPath(form, path);
@@ -578,15 +783,14 @@
   }
   function getFieldState(form, name) {
     const path = create$1(name);
-    const { values, touched, validating } = form;
-    const live = values.get(path.key);
+    const { touched, validating } = form;
     return {
       value: getValueByPath(form, path),
       error: getErrorByPath(form, path),
       errors: getFieldErrorsByPath(form, path),
-      // Same rule as getDirtyFields, committed baselines included: the field
+      // The shared per-field rule (committed baselines included): the field
       // is dirty while its live value differs from its effective baseline.
-      isDirty: values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live,
+      isDirty: isFieldDirtyByPath(form, path),
       isTouched: touched.has(path.key),
       isValidating: validating.has(path.key)
     };
@@ -603,7 +807,7 @@
       if (!hasLiveBranch(values, segments)) deleted.add(key);
     }
     if (!options?.keepTouched) touched.delete(key);
-    if (!options?.keepError) errors.delete(key);
+    if (!options?.keepError && errors.delete(key)) bumpErrorsVersion(form);
     validating.delete(key);
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
@@ -691,7 +895,8 @@
     validating.clear();
     if (!options?.keepIsSubmitting) form.isSubmitting = false;
     if (!options?.keepSubmitCount) form.submitCount = 0;
-    if (!options?.keepIsSubmitted) form.isSubmitSuccessful = void 0;
+    if (!options?.keepIsSubmitted) form.isSubmitted = false;
+    if (!options?.keepIsSubmitSuccessful) form.isSubmitSuccessful = void 0;
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
     for (const { segments, value } of keptValues) {
@@ -724,50 +929,13 @@
       emit(emitter, "touched", path);
     }
     if (!options?.keepErrors && errors.delete(path.key)) {
+      bumpErrorsVersion(form);
       emit(emitter, "errors", path);
     }
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
   }
 
-  function isDirty(form) {
-    let dirty = false;
-    forEachDirtyField(form, () => {
-      dirty = true;
-    });
-    return dirty;
-  }
-  function forEachDirtyField(form, fn) {
-    for (const [key, value] of form.values) {
-      const path = JSON.parse(key);
-      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
-    }
-  }
-  function computeDirtyFields(form) {
-    const dirtyFields = {};
-    forEachDirtyField(form, (key) => {
-      dirtyFields[key] = true;
-    });
-    return dirtyFields;
-  }
-  function sameDirtyKeys(a, b) {
-    const aKeys = Object.keys(a);
-    if (aKeys.length !== Object.keys(b).length) return false;
-    return aKeys.every((key) => b[key] === true);
-  }
-  function getDirtyFields(form) {
-    let cache = dirtyFieldsCaches.get(form);
-    if (!cache) {
-      cache = { version: 0, result: computeDirtyFields(form) };
-      dirtyFieldsCaches.set(form, cache);
-    } else if (cache.version > 0) {
-      const result = computeDirtyFields(form);
-      if (!sameDirtyKeys(cache.result, result)) cache.result = result;
-      cache.version = 0;
-    }
-    return cache.result;
-  }
-
   function unsetValidatingByPath({ emitter, validating }, path) {
     validating.delete(path.key);
     emit(emitter, "validating", path);
@@ -808,6 +976,25 @@
       errorSource = "sync";
       return true;
     };
+    const collectSyncErrors = () => {
+      const sync = registration.sync();
+      if (!sync) return null;
+      const errors = sync(getValueByPath(form, path), { form, path });
+      if (errors === void 0) return null;
+      const list = Array.isArray(errors) ? errors : [errors];
+      return list.length ? list : null;
+    };
+    const land = (result) => {
+      if (registration.asyncAlways?.()) {
+        const gate = collectSyncErrors();
+        const own = result === void 0 ? [] : Array.isArray(result) ? result : [result];
+        setErrorByPath(form, path, [...gate ?? [], ...own]);
+        errorSource = hasErrors2(result) ? "validator" : gate ? "sync" : null;
+      } else {
+        setErrorByPath(form, path, result);
+        errorSource = hasErrors2(result) ? "validator" : null;
+      }
+    };
     const supersede = () => {
       if (timer !== null) {
         clearTimeout(timer);
@@ -837,8 +1024,7 @@
         throw e;
       }
       if (!isPromise(result)) {
-        setErrorByPath(form, path, result);
-        errorSource = hasErrors2(result) ? "validator" : null;
+        land(result);
         unmark();
         return;
       }
@@ -846,8 +1032,7 @@
       result.then(
         (error) => {
           if (lock === round) {
-            setErrorByPath(form, path, error);
-            errorSource = hasErrors2(error) ? "validator" : null;
+            land(error);
           }
         }
       ).catch(() => {
@@ -860,7 +1045,7 @@
     };
     const run = () => {
       timer = null;
-      if (runSync()) {
+      if (runSync() && !registration.asyncAlways?.()) {
         supersede();
         unmark();
         return;
@@ -868,7 +1053,7 @@
       runValidator();
     };
     const kick = () => {
-      if (runSync()) {
+      if (runSync() && !registration.asyncAlways?.()) {
         supersede();
         unmark();
         return;
@@ -954,7 +1139,7 @@
     if (stored) footprint.set(path.key, stored);
   }
   function applyValidateResult(form, result) {
-    const footprint = form.validateDeps ? getFormErrorFootprint(form) : void 0;
+    const footprint = form.validateDeps || form.validateMode !== "onSubmit" ? getFormErrorFootprint(form) : void 0;
     if (footprint) {
       clearFormValidateErrors(form, footprint);
       footprint.clear();
@@ -990,6 +1175,7 @@
       const stored = form.errors.get(key);
       if (stored !== written) continue;
       form.errors.delete(key);
+      bumpErrorsVersion(form);
       emit(form.emitter, "errors", create$1(JSON.parse(key)));
     }
   }
@@ -1183,6 +1369,10 @@
     if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onChange")
       form.validators.get(path.key)?.();
     revalidateFormOnChange(form, path, mode);
+    if (form.validateMode === "onChange" && form.validate) {
+      runFormValidate(form).catch(() => {
+      });
+    }
     revalidateDependentsOnChange(form, path, mode);
   }
   function userChangeByPath(form, path, value) {
@@ -1197,71 +1387,399 @@
     const mode = entry.mode ?? form.mode;
     if (mode === "onBlur" || mode === "onTouched" || mode === "all" || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onBlur")
       form.validators.get(path.key)?.();
+    if (form.validateMode === "onBlur" && form.validate) {
+      runFormValidate(form).catch(() => {
+      });
+    }
   }
 
-  function setIsSubmitting(form, value) {
-    form.isSubmitting = value;
-    emit(form.emitter, "submitting");
-  }
-  function incrementSubmitCount(form) {
-    form.submitCount++;
-    emit(form.emitter, "submitCount");
+  function removeFieldForUnmount(form, path) {
+    const { key } = path;
+    const snapshot = {
+      present: form.values.has(key),
+      value: form.values.get(key),
+      touched: form.touched.has(key),
+      errors: form.errors.get(key)
+    };
+    removeFieldByPath(form, path);
+    return snapshot;
   }
-  function setSubmitSuccessful(form, value) {
-    form.isSubmitSuccessful = value;
-    emit(form.emitter, "submitSuccessful");
+  function restoreRemovedField(form, path, snapshot) {
+    const { key } = path;
+    if (snapshot.present) {
+      setValueByPath(form, path, snapshot.value, { shouldDirty: false });
+    } else {
+      form.deleted.delete(key);
+      bumpValuesVersion(form);
+      emit(form.emitter, "change", path);
+    }
+    if (snapshot.touched) setTouchedByPath(form, path);
+    if (snapshot.errors) setErrorByPath(form, path, snapshot.errors);
   }
-  function setDisabled(form, value) {
-    form.disabled = value;
-    emit(form.emitter, "disabled");
+
+  function hasRuleConstraints(rules) {
+    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0 || rules.validate !== void 0;
   }
-  function nameToPath(name) {
-    if (name.startsWith("[")) {
-      try {
-        const segments = JSON.parse(name);
-        if (Array.isArray(segments)) return segments.join(".");
-      } catch {
-      }
+  function defaultMessage(type, bound) {
+    switch (type) {
+      case "required":
+        return "This field is required";
+      case "min":
+        return `Must be at least ${bound}`;
+      case "max":
+        return `Must be at most ${bound}`;
+      case "minLength":
+        return `Must be at least ${bound} characters`;
+      case "maxLength":
+        return `Must be at most ${bound} characters`;
+      case "pattern":
+        return "Invalid format";
+      default:
+        return "Invalid value";
     }
-    return name;
   }
-  function getNativeErrors(formEl) {
-    const errors = [];
-    const { elements } = formEl;
-    for (let i = 0; i < elements.length; i++) {
-      const el = elements[i];
-      if (el.name && typeof el.checkValidity === "function" && !el.checkValidity()) {
+  function rulesToValidator(rules) {
+    return (value, meta) => {
+      if (rules.required) {
+        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
+          return [
+            {
+              type: "required",
+              message: typeof rules.required === "string" ? rules.required : defaultMessage("required")
+            }
+          ];
+        }
+      }
+      const errors = [];
+      const message = (type, bound) => rules.messages?.[type] ?? defaultMessage(type, bound);
+      if (rules.min !== void 0) {
+        const n = Number(value);
+        if (!Number.isNaN(n) && n < rules.min) {
+          errors.push({ type: "min", message: message("min", rules.min) });
+        }
+      }
+      if (rules.max !== void 0) {
+        const n = Number(value);
+        if (!Number.isNaN(n) && n > rules.max) {
+          errors.push({ type: "max", message: message("max", rules.max) });
+        }
+      }
+      const isSized = typeof value === "string" || Array.isArray(value);
+      if (rules.minLength !== void 0 && isSized && value.length < rules.minLength) {
         errors.push({
-          path: nameToPath(el.name),
-          type: "native",
-          message: el.validationMessage
+          type: "minLength",
+          message: message("minLength", rules.minLength)
         });
       }
-    }
-    return errors;
+      if (rules.maxLength !== void 0 && isSized && value.length > rules.maxLength) {
+        errors.push({
+          type: "maxLength",
+          message: message("maxLength", rules.maxLength)
+        });
+      }
+      if (rules.pattern && !rules.pattern.value.test(value)) {
+        errors.push({
+          type: "pattern",
+          // pattern.message is type-required but JS consumers may omit it.
+          message: rules.messages?.pattern ?? rules.pattern.message ?? defaultMessage("pattern")
+        });
+      }
+      if (rules.validate !== void 0) {
+        const fns = typeof rules.validate === "function" ? { validate: rules.validate } : rules.validate;
+        for (const [type, fn] of Object.entries(fns)) {
+          const result = fn(value, meta);
+          if (result === void 0) continue;
+          for (const entry of Array.isArray(result) ? result : [result]) {
+            errors.push(
+              typeof entry === "string" ? { type, message: entry } : { ...entry, type }
+            );
+          }
+        }
+      }
+      return errors.length ? errors : void 0;
+    };
   }
-  function handleSubmit(form, options) {
+  function rulesToConstraintAttrs(rules) {
+    const attrs = {};
+    if (rules.required) attrs.required = true;
+    if (rules.min !== void 0) attrs.min = rules.min;
+    if (rules.max !== void 0) attrs.max = rules.max;
+    if (rules.minLength !== void 0) attrs.minLength = rules.minLength;
+    if (rules.maxLength !== void 0) attrs.maxLength = rules.maxLength;
+    if (rules.pattern) attrs.pattern = rules.pattern.value.source;
+    return attrs;
+  }
+
+  function registerField(form, name, options) {
+    const path = create$1(name);
     const {
-      onSubmit,
-      onValidSubmit,
-      onInvalidSubmit,
-      onAction,
-      shouldFocusError = true
+      mode,
+      shouldUnregister,
+      eventToValue,
+      valueAsNumber,
+      valueAsDate,
+      rules
     } = options ?? {};
-    return async (e) => {
-      if (e && typeof e.preventDefault === "function") {
-        e.preventDefault();
+    const toValue = eventToValue ?? ((e) => {
+      const target = e?.target;
+      if (!target) return e;
+      if (target.type === "file") return target.files;
+      if (target.type === "checkbox") return target.checked;
+      if (valueAsNumber) return target.valueAsNumber;
+      if (valueAsDate) return target.valueAsDate;
+      return target.value;
+    });
+    let el = null;
+    let modeToken = null;
+    let disposeValidator = null;
+    let snapshot = null;
+    let offFocus = null;
+    let offBulkSync = null;
+    const syncDom = () => {
+      if (!el || el.type === "file") return;
+      const next = getValueByPath(form, path);
+      const asString = next == null ? "" : String(next);
+      if (el.value !== asString) el.value = asString;
+    };
+    const attach = (node) => {
+      if (snapshot) {
+        restoreRemovedField(form, path, snapshot);
+        snapshot = null;
       }
-      const formEl = e?.currentTarget;
-      setIsSubmitting(form, true);
-      incrementSubmitCount(form);
-      const values = getValues(form);
-      if (formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
-        formEl.reportValidity();
-        if (shouldFocusError && typeof formEl.querySelector === "function") {
-          const invalid = formEl.querySelector(":invalid");
-          if (invalid && typeof invalid.focus === "function") invalid.focus();
-        }
+      el = node;
+      if (node.type !== "file" && getValueByPath(form, path) === void 0) {
+        seedValueByPath(
+          form,
+          path,
+          node.type === "checkbox" ? node.checked : node.value
+        );
+        emitChangeByPath(form, path);
+      }
+      modeToken = registerFieldMode(form, path, mode).token;
+      if (rules && hasRuleConstraints(rules)) {
+        const sync = rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0;
+        const rest = rules.required !== void 0 ? { ...rules, required: void 0 } : rules;
+        disposeValidator = registerValidatorByPath(form, path, {
+          validate: () => hasRuleConstraints(rest) ? rulesToValidator(rest) : void 0,
+          debounce: () => 0,
+          sync: () => sync
+        });
+      }
+      offFocus = on(
+        form.emitter,
+        "focusError",
+        (key, options2) => {
+          if (key !== path.key || !el || typeof el.focus !== "function") return;
+          el.focus();
+          if (options2?.shouldSelect && typeof el.select === "function") {
+            el.select();
+          }
+        }
+      );
+      offBulkSync = on(form.emitter, "change", (changed) => {
+        if (changed) return;
+        syncDom();
+      });
+    };
+    const detach = () => {
+      if (modeToken) {
+        unregisterFieldMode(form, path, modeToken);
+        modeToken = null;
+      }
+      if (disposeValidator) {
+        disposeValidator();
+        disposeValidator = null;
+      }
+      if (offFocus) {
+        offFocus();
+        offFocus = null;
+      }
+      if (offBulkSync) {
+        offBulkSync();
+        offBulkSync = null;
+      }
+      el = null;
+      if ((shouldUnregister ?? form.shouldUnregister) !== false) {
+        snapshot = removeFieldForUnmount(form, path);
+      }
+    };
+    return {
+      name: path.key,
+      onChange: (e) => changeValueByPath(form, path, toValue(e)),
+      onBlur: () => userBlur(form, path),
+      ref: (node) => {
+        if (node) attach(node);
+        else detach();
+      }
+    };
+  }
+
+  function readArray(form, path) {
+    const value = getValueByPath(form, path);
+    return Array.isArray(value) ? value : [];
+  }
+  function appendValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [...arr, value]);
+  }
+  function prependValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [value, ...arr]);
+  }
+  function insertValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index > arr.length) return false;
+    setValueByPath(form, path, [
+      ...arr.slice(0, index),
+      value,
+      ...arr.slice(index)
+    ]);
+    return true;
+  }
+  function removeValueByPath(form, path, indices) {
+    const arr = readArray(form, path);
+    const drop = /* @__PURE__ */ new Set();
+    for (const index of Array.isArray(indices) ? indices : [indices]) {
+      if (index >= 0 && index < arr.length) drop.add(index);
+    }
+    if (drop.size === 0) return [];
+    const dropped = [...drop].sort((a, b) => b - a);
+    setValueByPath(
+      form,
+      path,
+      arr.filter((_, i) => !drop.has(i))
+    );
+    return dropped;
+  }
+  function moveValueByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function swapValuesByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    [next[from], next[to]] = [next[to], next[from]];
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function replaceValuesByPath(form, path, values) {
+    setValueByPath(form, path, [...values]);
+  }
+  function updateValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index >= arr.length) return false;
+    const next = [...arr];
+    next[index] = value;
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function appendValue(form, name, value) {
+    appendValueByPath(form, create$1(name), value);
+  }
+  function prependValue(form, name, value) {
+    prependValueByPath(form, create$1(name), value);
+  }
+  function insertValue(form, name, index, value) {
+    return insertValueByPath(form, create$1(name), index, value);
+  }
+  function removeValue(form, name, indices) {
+    return removeValueByPath(form, create$1(name), indices);
+  }
+  function moveValue(form, name, from, to) {
+    return moveValueByPath(form, create$1(name), from, to);
+  }
+  function swapValues(form, name, from, to) {
+    return swapValuesByPath(form, create$1(name), from, to);
+  }
+  function replaceValues(form, name, values) {
+    replaceValuesByPath(form, create$1(name), values);
+  }
+  function updateValue(form, name, index, value) {
+    return updateValueByPath(form, create$1(name), index, value);
+  }
+
+  function setIsSubmitting(form, value) {
+    form.isSubmitting = value;
+    emit(form.emitter, "submitting");
+  }
+  function incrementSubmitCount(form) {
+    form.submitCount++;
+    emit(form.emitter, "submitCount");
+  }
+  function setSubmitSuccessful(form, value) {
+    form.isSubmitSuccessful = value;
+    emit(form.emitter, "submitSuccessful");
+  }
+  function setDisabled(form, value) {
+    form.disabled = value;
+    emit(form.emitter, "disabled");
+  }
+  function setStatus(form, value) {
+    form.status = value;
+    emit(form.emitter, "status");
+  }
+  function nameToPath(name) {
+    if (name.startsWith("[")) {
+      try {
+        const segments = JSON.parse(name);
+        if (Array.isArray(segments)) return segments.join(".");
+      } catch {
+      }
+    }
+    return name;
+  }
+  function getNativeErrors(formEl) {
+    const errors = [];
+    const { elements } = formEl;
+    for (let i = 0; i < elements.length; i++) {
+      const el = elements[i];
+      if (el.name && typeof el.checkValidity === "function" && !el.checkValidity()) {
+        errors.push({
+          path: nameToPath(el.name),
+          type: "native",
+          message: el.validationMessage
+        });
+      }
+    }
+    return errors;
+  }
+  function handleSubmit(form, options) {
+    const {
+      onSubmit,
+      onValidSubmit,
+      onInvalidSubmit,
+      onAction,
+      shouldFocusError = true,
+      shouldUseNativeValidation = form.shouldUseNativeValidation
+    } = options ?? {};
+    return async (e) => {
+      if (e && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+      const formEl = e?.currentTarget;
+      clearServerErrors(form);
+      form.isSubmitted = true;
+      setIsSubmitting(form, true);
+      incrementSubmitCount(form);
+      const values = getValues(form);
+      if (shouldUseNativeValidation && formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
+        formEl.reportValidity();
+        if (shouldFocusError && typeof formEl.querySelector === "function") {
+          const invalid = formEl.querySelector(":invalid");
+          if (invalid && typeof invalid.focus === "function") invalid.focus();
+        }
         setIsSubmitting(form, false);
         setSubmitSuccessful(form, false);
         if (onInvalidSubmit) onInvalidSubmit(getNativeErrors(formEl), values);
@@ -1282,7 +1800,14 @@
         const submitted = getValues(form);
         if (onSubmit) await onSubmit(submitted, e);
         if (onValidSubmit) await onValidSubmit(submitted, e);
-        if (onAction) await onAction(submitted, e);
+        if (onAction) {
+          const result = await onAction(submitted, e);
+          if (result && typeof result === "object" && result.errors !== void 0 && typeof result.errors === "object") {
+            setServerErrors(form, result.errors);
+            setSubmitSuccessful(form, false);
+            return;
+          }
+        }
         setSubmitSuccessful(form, true);
       } catch {
         setSubmitSuccessful(form, false);
@@ -1303,12 +1828,21 @@
     _setMaxListeners(emitter, 0);
     let source = options?.initialValues ?? {};
     if (typeof source === "function") source = source();
+    const validateOption = options?.validate;
+    const wrappedValidate = validateOption && hasStandardProps(validateOption) ? schemaToFormValidator(
+      validateOption
+    ) : validateOption;
     const form = {
       emitter,
       ...options,
+      validate: wrappedValidate,
       mode: options?.mode ?? "onSubmit",
       reValidateMode: options?.reValidateMode ?? "onChange",
+      validateMode: options?.validateMode ?? "onSubmit",
       disabled: options?.disabled ?? false,
+      validateOnMount: options?.validateOnMount ?? false,
+      asyncAlways: options?.asyncAlways ?? false,
+      shouldUseNativeValidation: options?.shouldUseNativeValidation ?? true,
       validateDeps: options?.validateDeps ? new Set(options.validateDeps.map((dep) => create$1(dep).key)) : void 0,
       initialValues: {},
       values: /* @__PURE__ */ new Map(),
@@ -1319,18 +1853,21 @@
       validating: /* @__PURE__ */ new Set(),
       parsedValues: void 0,
       isSubmitting: false,
+      isSubmitted: false,
       submitCount: 0,
       isSubmitSuccessful: void 0,
-      isLoading: false
+      isLoading: false,
+      status: void 0,
+      register: (name, registerOptions) => registerField(form, name, registerOptions)
     };
     if (isPromise(source)) {
       form.isLoading = true;
       emit(emitter, "loading");
       Promise.resolve(source).then(
         (resolved) => {
+          setInitialValues(form, resolved ?? {});
           form.isLoading = false;
           emit(emitter, "loading");
-          setInitialValues(form, resolved ?? {});
         },
         (error) => {
           form.isLoading = false;
@@ -1343,270 +1880,46 @@
     return form;
   }
 
-  function defaultMessage(type, bound) {
-    switch (type) {
-      case "required":
-        return "This field is required";
-      case "min":
-        return `Must be at least ${bound}`;
-      case "max":
-        return `Must be at most ${bound}`;
-      case "minLength":
-        return `Must be at least ${bound} characters`;
-      case "maxLength":
-        return `Must be at most ${bound} characters`;
-      case "pattern":
-        return "Invalid format";
-      default:
-        return "Invalid value";
-    }
-  }
-  function rulesToValidator(rules) {
-    return (value) => {
-      if (rules.required) {
-        if (value === "" || value === void 0 || value === null) {
-          return [
-            {
-              type: "required",
-              message: typeof rules.required === "string" ? rules.required : defaultMessage("required")
-            }
-          ];
-        }
-      }
-      const errors = [];
-      const message = (type, bound) => rules.messages?.[type] ?? defaultMessage(type, bound);
-      if (rules.min !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n < rules.min) {
-          errors.push({ type: "min", message: message("min", rules.min) });
-        }
-      }
-      if (rules.max !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n > rules.max) {
-          errors.push({ type: "max", message: message("max", rules.max) });
-        }
-      }
-      if (rules.minLength !== void 0 && typeof value === "string" && value.length < rules.minLength) {
-        errors.push({
-          type: "minLength",
-          message: message("minLength", rules.minLength)
-        });
-      }
-      if (rules.maxLength !== void 0 && typeof value === "string" && value.length > rules.maxLength) {
-        errors.push({
-          type: "maxLength",
-          message: message("maxLength", rules.maxLength)
-        });
-      }
-      if (rules.pattern && !rules.pattern.value.test(value)) {
-        errors.push({
-          type: "pattern",
-          // pattern.message is type-required but JS consumers may omit it.
-          message: rules.messages?.pattern ?? rules.pattern.message ?? defaultMessage("pattern")
-        });
-      }
-      return errors.length ? errors : void 0;
-    };
-  }
-
-  var shim = {exports: {}};
-
-  var useSyncExternalStoreShim_production = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.production.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredUseSyncExternalStoreShim_production;
-
-  function requireUseSyncExternalStoreShim_production () {
-  	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
-  	hasRequiredUseSyncExternalStoreShim_production = 1;
-  	var React$1 = React;
-  	function is(x, y) {
-  	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-  	}
-  	var objectIs = "function" === typeof Object.is ? Object.is : is,
-  	  useState = React$1.useState,
-  	  useEffect = React$1.useEffect,
-  	  useLayoutEffect = React$1.useLayoutEffect,
-  	  useDebugValue = React$1.useDebugValue;
-  	function useSyncExternalStore$2(subscribe, getSnapshot) {
-  	  var value = getSnapshot(),
-  	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
-  	    inst = _useState[0].inst,
-  	    forceUpdate = _useState[1];
-  	  useLayoutEffect(
-  	    function () {
-  	      inst.value = value;
-  	      inst.getSnapshot = getSnapshot;
-  	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	    },
-  	    [subscribe, value, getSnapshot]
-  	  );
-  	  useEffect(
-  	    function () {
-  	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	      return subscribe(function () {
-  	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	      });
-  	    },
-  	    [subscribe]
-  	  );
-  	  useDebugValue(value);
-  	  return value;
-  	}
-  	function checkIfSnapshotChanged(inst) {
-  	  var latestGetSnapshot = inst.getSnapshot;
-  	  inst = inst.value;
-  	  try {
-  	    var nextValue = latestGetSnapshot();
-  	    return !objectIs(inst, nextValue);
-  	  } catch (error) {
-  	    return true;
-  	  }
-  	}
-  	function useSyncExternalStore$1(subscribe, getSnapshot) {
-  	  return getSnapshot();
-  	}
-  	var shim =
-  	  "undefined" === typeof window ||
-  	  "undefined" === typeof window.document ||
-  	  "undefined" === typeof window.document.createElement
-  	    ? useSyncExternalStore$1
-  	    : useSyncExternalStore$2;
-  	useSyncExternalStoreShim_production.useSyncExternalStore =
-  	  void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-  	return useSyncExternalStoreShim_production;
+  function errorIdFromKey(key) {
+    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
+    return id || "field";
   }
-
-  var useSyncExternalStoreShim_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.development.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredUseSyncExternalStoreShim_development;
-
-  function requireUseSyncExternalStoreShim_development () {
-  	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-  	hasRequiredUseSyncExternalStoreShim_development = 1;
-  	"production" !== process.env.NODE_ENV &&
-  	  (function () {
-  	    function is(x, y) {
-  	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-  	    }
-  	    function useSyncExternalStore$2(subscribe, getSnapshot) {
-  	      didWarnOld18Alpha ||
-  	        void 0 === React$1.startTransition ||
-  	        ((didWarnOld18Alpha = true),
-  	        console.error(
-  	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-  	        ));
-  	      var value = getSnapshot();
-  	      if (!didWarnUncachedGetSnapshot) {
-  	        var cachedValue = getSnapshot();
-  	        objectIs(value, cachedValue) ||
-  	          (console.error(
-  	            "The result of getSnapshot should be cached to avoid an infinite loop"
-  	          ),
-  	          (didWarnUncachedGetSnapshot = true));
-  	      }
-  	      cachedValue = useState({
-  	        inst: { value: value, getSnapshot: getSnapshot }
-  	      });
-  	      var inst = cachedValue[0].inst,
-  	        forceUpdate = cachedValue[1];
-  	      useLayoutEffect(
-  	        function () {
-  	          inst.value = value;
-  	          inst.getSnapshot = getSnapshot;
-  	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	        },
-  	        [subscribe, value, getSnapshot]
-  	      );
-  	      useEffect(
-  	        function () {
-  	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	          return subscribe(function () {
-  	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	          });
-  	        },
-  	        [subscribe]
-  	      );
-  	      useDebugValue(value);
-  	      return value;
-  	    }
-  	    function checkIfSnapshotChanged(inst) {
-  	      var latestGetSnapshot = inst.getSnapshot;
-  	      inst = inst.value;
-  	      try {
-  	        var nextValue = latestGetSnapshot();
-  	        return !objectIs(inst, nextValue);
-  	      } catch (error) {
-  	        return true;
-  	      }
-  	    }
-  	    function useSyncExternalStore$1(subscribe, getSnapshot) {
-  	      return getSnapshot();
-  	    }
-  	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-  	      "function" ===
-  	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-  	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-  	    var React$1 = React,
-  	      objectIs = "function" === typeof Object.is ? Object.is : is,
-  	      useState = React$1.useState,
-  	      useEffect = React$1.useEffect,
-  	      useLayoutEffect = React$1.useLayoutEffect,
-  	      useDebugValue = React$1.useDebugValue,
-  	      didWarnOld18Alpha = false,
-  	      didWarnUncachedGetSnapshot = false,
-  	      shim =
-  	        "undefined" === typeof window ||
-  	        "undefined" === typeof window.document ||
-  	        "undefined" === typeof window.document.createElement
-  	          ? useSyncExternalStore$1
-  	          : useSyncExternalStore$2;
-  	    useSyncExternalStoreShim_development.useSyncExternalStore =
-  	      void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-  	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-  	      "function" ===
-  	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-  	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  	  })();
-  	return useSyncExternalStoreShim_development;
+  function fieldErrorId(name) {
+    return errorIdFromKey(create$1(name).key);
   }
 
-  var hasRequiredShim;
-
-  function requireShim () {
-  	if (hasRequiredShim) return shim.exports;
-  	hasRequiredShim = 1;
-
-  	if (process.env.NODE_ENV === 'production') {
-  	  shim.exports = requireUseSyncExternalStoreShim_production();
-  	} else {
-  	  shim.exports = requireUseSyncExternalStoreShim_development();
-  	}
-  	return shim.exports;
+  const fieldDisabledRegistry = /* @__PURE__ */ new WeakMap();
+  function registerFieldDisabled(form, path, disabled) {
+    if (disabled === void 0) return null;
+    let registry = fieldDisabledRegistry.get(form);
+    if (!registry) {
+      registry = /* @__PURE__ */ new Map();
+      fieldDisabledRegistry.set(form, registry);
+    }
+    const token = {};
+    registry.set(path.key, { disabled, token });
+    emit(form.emitter, "disabled", path);
+    return { token };
+  }
+  function unregisterFieldDisabled(form, path, token) {
+    const registry = fieldDisabledRegistry.get(form);
+    const entry = registry?.get(path.key);
+    if (registry && entry && entry.token === token) {
+      registry.delete(path.key);
+      emit(form.emitter, "disabled", path);
+    }
+  }
+  function hasDisabledAncestor(form, path) {
+    const registry = fieldDisabledRegistry.get(form);
+    if (!registry?.size) return false;
+    const segments = path.value;
+    for (let i = 1; i < segments.length; i++) {
+      const prefix = JSON.stringify(segments.slice(0, i));
+      if (registry.get(prefix)?.disabled) return true;
+    }
+    return false;
   }
 
-  var shimExports = requireShim();
-
   function isDescendant(key, ancestorKey) {
     return key.startsWith(`${ancestorKey.slice(0, -1)},`);
   }
@@ -1636,6 +1949,41 @@
     });
     return unsubscribes.length === 1 ? unsubscribes[0] : () => unsubscribes.forEach((unsubscribe) => unsubscribe());
   }
+  function watch(form, event, getter, isEqual) {
+    const cache = { hasValue: false };
+    const consumers = /* @__PURE__ */ new Set();
+    const wake = () => {
+      if (isEqual && cache.hasValue) {
+        const next = getter();
+        if (isEqual(cache.value, next)) return;
+        cache.value = next;
+      } else {
+        cache.value = getter();
+        cache.hasValue = true;
+      }
+      consumers.forEach((invalidate) => invalidate());
+    };
+    const off = on(form.emitter, event, wake);
+    return {
+      getSnapshot: () => {
+        if (!cache.hasValue) {
+          cache.value = getter();
+          cache.hasValue = true;
+        }
+        return cache.value;
+      },
+      subscribe: (invalidate) => {
+        consumers.add(invalidate);
+        return () => {
+          consumers.delete(invalidate);
+        };
+      },
+      dispose: () => {
+        off();
+        consumers.clear();
+      }
+    };
+  }
 
   function useForm(options) {
     const [form] = React.useState(() => {
@@ -1677,6 +2025,19 @@
       seeded.source = values;
       setInitialValues(form, values);
     }, [form, values]);
+    React.useEffect(() => {
+      if (!form.validateOnMount || !form.validate) return;
+      const run = () => {
+        void runFormValidate(form).catch(() => void 0);
+      };
+      if (!form.isLoading) {
+        run();
+        return;
+      }
+      return on(form.emitter, "loading", () => {
+        run();
+      });
+    }, [form]);
     return form;
   }
   function useWatchCore(subscribeFactory, getter, isEqual2) {
@@ -1713,7 +2074,7 @@
       },
       [subscribeFactory, cache]
     );
-    return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   }
   function useWatch(formOrEmitter, event, getter, isEqual2) {
     const emitter = "emitter" in formOrEmitter ? formOrEmitter.emitter : formOrEmitter;
@@ -1723,18 +2084,33 @@
     );
     return useWatchCore(subscribeFactory, getter, isEqual2);
   }
-  function useValue(form, name) {
-    return useValueByPath(form, create$1(name));
+  function useValue(form, name, options) {
+    return useValueByPath(form, create$1(name), options);
   }
-  function useValueByPath(form, path) {
+  function useValueByPath(form, path, options) {
     const { emitter } = form;
     const { key } = path;
+    const scope = options?.exact === false ? "branch" : "leaf";
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, "leaf", invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are `key` on purpose: useValue creates a fresh Path per render, so the object must stay out of the deps while the key string pins the subscription
-      [emitter, key]
+      (invalidate) => onPathEvent(
+        emitter,
+        "change",
+        create$1(JSON.parse(key)),
+        scope,
+        invalidate
+      ),
+      [emitter, key, scope]
     );
-    return useWatchCore(subscribeFactory, getValueByPath.bind(null, form, path));
+    return useWatchCore(subscribeFactory, () => {
+      if (options?.exact === false) {
+        return get(getValues(form), path.value);
+      }
+      const value = getValueByPath(form, path);
+      return value === void 0 ? options?.defaultValue : value;
+    });
+  }
+  function useValues(form) {
+    return useWatch(form, "change", () => getValues(form));
   }
   function useTouched(form, name) {
     return useTouchedByPath(form, create$1(name));
@@ -1781,6 +2157,24 @@
   function useIsDirty(form) {
     return useWatch(form, "change", isDirty.bind(null, form));
   }
+  function useIsFieldDirty(form, name) {
+    return useIsFieldDirtyByPath(form, create$1(name));
+  }
+  function useIsFieldDirtyByPath(form, path) {
+    const { emitter } = form;
+    const { key } = path;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => onPathEvent(
+        emitter,
+        "change",
+        create$1(JSON.parse(key)),
+        "leaf",
+        invalidate
+      ),
+      [emitter, key]
+    );
+    return useWatchCore(subscribeFactory, () => isFieldDirtyByPath(form, path));
+  }
   function useDirtyFields(form) {
     return useWatch(form, "change", getDirtyFields.bind(null, form));
   }
@@ -1806,7 +2200,9 @@
       touchedFields: getTouchedFields(form),
       hasErrors: hasErrors(form),
       isValid: !hasErrors(form),
+      errors: getErrorsRecord(form),
       isSubmitting: form.isSubmitting,
+      isSubmitted: form.isSubmitted,
       isValidating: form.validating.size > 0,
       isSubmitSuccessful: form.isSubmitSuccessful,
       submitCount: form.submitCount,
@@ -1816,7 +2212,7 @@
   }
   function isSameFormState(a, b) {
     const sameTouched = a.touchedFields.length === b.touchedFields.length && a.touchedFields.every((path, i) => path === b.touchedFields[i]);
-    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.isSubmitting === b.isSubmitting && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
+    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.errors === b.errors && a.isSubmitting === b.isSubmitting && a.isSubmitted === b.isSubmitted && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
   }
   function useFormState(form) {
     const getter = React.useCallback(() => getFormState(form), [form]);
@@ -1833,9 +2229,29 @@
     );
     return useWatchCore(subscribeFactory, getter, isSameFormState);
   }
+  function useStore(form, selector, isEqual2) {
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const offs = FORM_STATE_EVENTS.map(
+          (event) => on(form.emitter, event, invalidate)
+        );
+        return () => {
+          for (const off of offs) off();
+        };
+      },
+      [form.emitter]
+    );
+    return useWatchCore(subscribeFactory, selector, isEqual2);
+  }
   function useHasErrors(form) {
     return useWatch(form, "errors", hasErrors.bind(null, form));
   }
+  function useErrors(form) {
+    return useWatch(form, "errors", () => getErrorsRecord(form));
+  }
+  function useErrorsTree(form) {
+    return useWatch(form, "errors", () => getErrorsTree(form));
+  }
   function useIsValid(form) {
     return useWatch(form, "errors", () => !hasErrors(form));
   }
@@ -1845,6 +2261,9 @@
   function useIsLoading(form) {
     return useWatch(form, "loading", () => form.isLoading);
   }
+  function useStatus(form) {
+    return useWatch(form, "status", () => form.status);
+  }
   function useCanSubmit(form) {
     const { emitter } = form;
     const subscribeFactory = React.useCallback(
@@ -1884,8 +2303,8 @@
   }
 
   function usePath(name) {
-    const path = React.useMemo(() => create$1(normalizePath(name)), [name]);
-    return React.useMemo(() => path, [path.key]);
+    const key = React.useMemo(() => create$1(normalizePath(name)).key, [name]);
+    return React.useMemo(() => create$1(JSON.parse(key)), [key]);
   }
 
   function useStage(value) {
@@ -1900,32 +2319,73 @@
       [ref]
     );
   }
+  function useUnmountRestore(teardown, restore) {
+    const removedRef = React.useRef(false);
+    const teardownRef = useStage(teardown);
+    const restoreRef = useStage(restore);
+    React.useEffect(() => {
+      const teardownOnce = teardownRef.current;
+      const restoreOnce = restoreRef.current;
+      if (removedRef.current) {
+        removedRef.current = false;
+        restoreOnce();
+      }
+      return () => {
+        removedRef.current = true;
+        teardownOnce();
+      };
+    }, [removedRef, teardownRef, restoreRef]);
+  }
 
   function useValidate(validate, path, formProp, options) {
     const contextForm = React.useContext(FormContext);
     const form = formProp || contextForm;
     if (!form) throw new Error("no form provided");
-    const validateRef = React.useRef(validate);
-    validateRef.current = validate;
+    const validateOption = validate;
+    const validateRef = React.useRef(void 0);
+    validateRef.current = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
     const debounceRef = React.useRef(options?.debounce ?? 0);
     debounceRef.current = options?.debounce ?? 0;
     const syncRef = React.useRef(options?.sync);
     syncRef.current = options?.sync;
-    React.useEffect(
-      () => registerValidatorByPath(form, path, {
+    const asyncAlwaysRef = React.useRef(options?.asyncAlways ?? false);
+    asyncAlwaysRef.current = options?.asyncAlways ?? false;
+    const validateOnMountRef = React.useRef(options?.validateOnMount);
+    validateOnMountRef.current = options?.validateOnMount;
+    React.useEffect(() => {
+      const spath = create$1(JSON.parse(path.key));
+      const dispose = registerValidatorByPath(form, spath, {
         validate: () => validateRef.current,
         debounce: () => debounceRef.current,
-        sync: () => syncRef.current
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are `path.key` on purpose: usePath returns a stable Path per key, so re-subscribing on key (not object identity) is enough
-      [form, path.key]
-    );
+        sync: () => syncRef.current,
+        asyncAlways: () => asyncAlwaysRef.current
+      });
+      const validateOnMount = validateOnMountRef.current ?? form.validateOnMount;
+      if (!validateOnMount || !validateRef.current && !syncRef.current) {
+        return dispose;
+      }
+      let disposed = false;
+      const kick = () => {
+        if (disposed) return;
+        form.validators.get(path.key)?.();
+      };
+      if (!form.isLoading) {
+        kick();
+      } else {
+        const off = on(form.emitter, "loading", () => {
+          off();
+          kick();
+        });
+      }
+      return () => {
+        disposed = true;
+        dispose();
+      };
+    }, [form, path.key]);
     return useStageFn(() => form.validators.get(path.key)?.());
   }
 
-  function hasRuleConstraints(rules) {
-    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0;
-  }
+  const uncontrolledSyncRegistry = /* @__PURE__ */ new WeakMap();
   function combineRulesAndValidate(rules, validate) {
     if (!rules || !hasRuleConstraints(rules)) return validate;
     const ruleValidator = rulesToValidator(rules);
@@ -1942,22 +2402,59 @@
       return isPromise(result) ? result.then(merge) : merge(result);
     };
   }
-  function useDelayedErrors(errors, delay) {
-    const [shown, setShown] = React.useState(errors);
-    React.useEffect(() => {
-      if (delay === void 0) return;
-      if (errors.length === 0) {
-        setShown(errors);
-        return;
-      }
-      if (shown.length > 0) {
-        setShown(errors);
-        return;
-      }
-      const timer = setTimeout(() => setShown(errors), delay);
-      return () => clearTimeout(timer);
-    }, [errors, delay, shown]);
-    return delay === void 0 ? errors : shown;
+  const NO_DELAYED_ERRORS = [];
+  function useDelayedErrors(form, path, delay) {
+    const pendingRef = React.useRef(false);
+    const prevRef = React.useRef(false);
+    const timerRef = React.useRef(null);
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const spath = create$1(JSON.parse(path.key));
+        const clearTimer = () => {
+          if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+          }
+        };
+        pendingRef.current = false;
+        prevRef.current = false;
+        clearTimer();
+        const startWindow = () => {
+          clearTimer();
+          pendingRef.current = true;
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            pendingRef.current = false;
+            invalidate();
+          }, delay);
+        };
+        const off = onKeyEvent(form.emitter, "errors", spath.key, () => {
+          const has = getFieldErrorsByPath(form, spath).length > 0;
+          const was = prevRef.current;
+          prevRef.current = has;
+          if (delay !== void 0) {
+            if (!has) {
+              if (pendingRef.current) {
+                clearTimer();
+                pendingRef.current = false;
+              }
+            } else if (!was || pendingRef.current) {
+              startWindow();
+            }
+          }
+          invalidate();
+        });
+        return () => {
+          off();
+          clearTimer();
+        };
+      },
+      [form, path.key, delay]
+    );
+    return useWatchCore(
+      subscribeFactory,
+      () => delay === void 0 || !pendingRef.current ? getFieldErrorsByPath(form, path) : NO_DELAYED_ERRORS
+    );
   }
   function useFieldValue(form, path, uncontrolled) {
     const snapshotRef = React.useRef({
@@ -1987,10 +2484,16 @@
     rules,
     validateDebounce,
     validateDeps,
+    validateOnMount,
     delayError,
     disabled,
     uncontrolled,
-    mode: modeOption
+    asyncAlways,
+    mode: modeOption,
+    eventToValue,
+    valueAsNumber,
+    valueAsDate,
+    type
   }, Context) {
     const contextForm = React.useContext(Context);
     const form = f1 || contextForm;
@@ -2008,29 +2511,79 @@
       emitChangeByPath(form, path);
     });
     const restRules = rules ? { ...rules, required: void 0 } : void 0;
-    useValidate(combineRulesAndValidate(restRules, validate), path, form, {
+    const validateOption = validate;
+    const validateWrapped = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
+    useValidate(combineRulesAndValidate(restRules, validateWrapped), path, form, {
       debounce: validateDebounce,
+      validateOnMount,
+      asyncAlways: asyncAlways ?? form.asyncAlways,
       sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
     });
-    const liveErrors = useFieldErrorsByPath(form, path);
-    const errors = useDelayedErrors(liveErrors, delayError);
+    const errors = useDelayedErrors(form, path, delayError);
     const errorObject = errors[0];
     const error = errorObject?.message;
     const value = useFieldValue(form, path, !!uncontrolled);
-    const formDisabled = useWatch(form, "disabled", () => form.disabled);
+    const isDirty = useWatchCore(
+      React.useCallback(
+        (invalidate) => uncontrolled ? () => {
+        } : onPathEvent(
+          form.emitter,
+          "change",
+          create$1(JSON.parse(path.key)),
+          "leaf",
+          invalidate
+        ),
+        [form.emitter, path.key, uncontrolled]
+      ),
+      () => isFieldDirtyByPath(form, path)
+    );
+    const validating = useWatchCore(
+      React.useCallback(
+        (invalidate) => onKeyEvent(form.emitter, "validating", path.key, invalidate),
+        [form.emitter, path.key]
+      ),
+      () => form.validating.has(path.key)
+    );
+    const mergedDisabled = useWatchCore(
+      React.useCallback(
+        (invalidate) => onPathEvent(
+          form.emitter,
+          "disabled",
+          create$1(JSON.parse(path.key)),
+          "branch",
+          invalidate
+        ),
+        [form.emitter, path.key]
+      ),
+      () => form.disabled || disabled === true || disabled !== false && hasDisabledAncestor(form, path)
+    );
+    const disabledTokenRef = React.useRef(null);
+    React.useEffect(() => {
+      const spath = create$1(JSON.parse(path.key));
+      const registration = registerFieldDisabled(form, spath, disabled);
+      if (registration) disabledTokenRef.current = registration.token;
+      return () => {
+        if (disabledTokenRef.current !== null) {
+          unregisterFieldDisabled(form, spath, disabledTokenRef.current);
+          disabledTokenRef.current = null;
+        }
+      };
+    }, [form, path.key, disabled]);
     const onChange = useStageFn((v) => userChangeByPath(form, path, v));
     const onBlur = useStageFn(() => userBlur(form, path));
     React.useEffect(() => {
-      const { token, displaced } = registerFieldMode(form, path, modeOption);
-      return () => unregisterFieldMode(form, path, token);
+      const spath = create$1(JSON.parse(path.key));
+      const { token, displaced } = registerFieldMode(form, spath, modeOption);
+      return () => unregisterFieldMode(form, spath, token);
     }, [form, path.key, modeOption]);
     const depsKey = validateDeps?.length ? validateDeps.join("\n") : void 0;
+    const validateDepsRef = useStage(validateDeps);
     React.useEffect(() => {
       if (!depsKey) return;
-      const depKeys = validateDeps.map((dep) => create$1(dep).key);
+      const depKeys = validateDepsRef.current.map((dep) => create$1(dep).key);
       registerFieldValidateDeps(form, path.key, depKeys);
       return () => unregisterFieldValidateDeps(form, path.key, depKeys);
-    }, [form, path.key, depsKey]);
+    }, [form, path.key, depsKey, validateDepsRef]);
     const elementRef = React.useRef(null);
     const focusRef = React.useCallback((el) => {
       elementRef.current = el;
@@ -2051,25 +2604,68 @@
       ),
       [form, path.key]
     );
-    React.useEffect(
-      () => () => {
-        if ((shouldUnregister ?? form.shouldUnregister) !== false) {
-          removeFieldByPath(form, path);
+    React.useEffect(() => {
+      const spath = create$1(JSON.parse(path.key));
+      let entry = uncontrolledSyncRegistry.get(form);
+      if (!entry) {
+        const cells = /* @__PURE__ */ new Map();
+        const off = on(form.emitter, "change", (changed) => {
+          if (changed) return;
+          for (const read of cells.values()) {
+            const { el, path: path2 } = read();
+            if (!el || el.type === "file") continue;
+            const next = getValueByPath(form, path2);
+            const asString = next == null ? "" : String(next);
+            if (el.value !== asString) el.value = asString;
+          }
+        });
+        entry = { cells, off };
+        uncontrolledSyncRegistry.set(form, entry);
+      }
+      entry.cells.set(path.key, () => ({ el: elementRef.current, path: spath }));
+      return () => {
+        entry.cells.delete(path.key);
+        if (entry.cells.size === 0) {
+          entry.off();
+          uncontrolledSyncRegistry.delete(form);
         }
-      },
-      [path, form, shouldUnregister]
-    );
+      };
+    }, [form, path.key, uncontrolled]);
+    const removalSnapshotRef = React.useRef(null);
+    const teardownOnUnmount = useStageFn(() => {
+      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
+      removalSnapshotRef.current = removeFieldForUnmount(form, path);
+    });
+    const restoreAfterStrictMode = useStageFn(() => {
+      const snapshot = removalSnapshotRef.current;
+      removalSnapshotRef.current = null;
+      if (snapshot) restoreRemovedField(form, path, snapshot);
+    });
+    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    const extract = eventToValue ?? ((e) => extractEventValue(e, { valueAsNumber, valueAsDate }));
+    const inputProps = {
+      name: path.key,
+      ref: focusRef,
+      onChange: (e) => onChange(extract(e)),
+      onBlur,
+      disabled: mergedDisabled,
+      ...type === "checkbox" ? { checked: !!value } : type === "file" ? {} : uncontrolled ? { defaultValue: value } : { value: value ?? "" },
+      ...error ? { "aria-invalid": true, "aria-describedby": errorIdFromKey(path.key) } : {}
+    };
     return {
       form,
       value,
       error,
       errorObject,
       errors,
+      isDirty,
+      validating,
       onChange,
       onBlur,
       name: path.key,
-      disabled: formDisabled || !!disabled,
-      focusRef
+      disabled: mergedDisabled,
+      focusRef,
+      inputProps
     };
   }
   function useField(options) {
@@ -2101,18 +2697,14 @@
     const contextForm = React.useContext(Context);
     const form = options.form || contextForm;
     if (!form) throw new Error("no form provided");
+    const keyName = options.keyName ?? "id";
+    const { rules, shouldUnregister } = options;
     const path = usePath(options.name);
     const idsRef = React.useRef([]);
     const getArray = React.useCallback(
       () => getValueByPath(form, path) || [],
       [form, path]
     );
-    const setArray = React.useCallback(
-      (arr) => {
-        setValueByPath(form, path, arr);
-      },
-      [form, path]
-    );
     const computeFields = React.useCallback(() => {
       const arr = getArray();
       while (idsRef.current.length < arr.length) {
@@ -2121,8 +2713,12 @@
       while (idsRef.current.length > arr.length) {
         idsRef.current.pop();
       }
-      return idsRef.current.map((id, index) => ({ id, index }));
-    }, [getArray, form]);
+      return idsRef.current.map((id, index) => ({
+        id,
+        index,
+        [keyName]: id
+      }));
+    }, [getArray, form, keyName]);
     const [fields, syncFields] = React.useReducer(
       computeFields,
       void 0,
@@ -2140,57 +2736,59 @@
         if (registry?.get(path.key) === idsRef.current) registry.delete(path.key);
       };
     }, [form, path.key]);
+    const removalSnapshotRef = React.useRef(null);
+    const teardownOnUnmount = useStageFn(() => {
+      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
+      removalSnapshotRef.current = removeFieldForUnmount(form, path);
+    });
+    const restoreAfterStrictMode = useStageFn(() => {
+      const snapshot = removalSnapshotRef.current;
+      removalSnapshotRef.current = null;
+      if (snapshot) restoreRemovedField(form, path, snapshot);
+    });
+    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    useValidate(
+      rules ? rulesToValidator({ ...rules, required: void 0 }) : void 0,
+      path,
+      form,
+      {
+        sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
+      }
+    );
     const append = useStageFn((value) => {
-      const arr = getArray();
       idsRef.current.push(generateId(form));
-      setArray([...arr, value]);
+      appendValueByPath(form, path, value);
     });
     const prepend = useStageFn((value) => {
-      const arr = getArray();
       idsRef.current.unshift(generateId(form));
-      setArray([value, ...arr]);
+      prependValueByPath(form, path, value);
     });
     const insert = useStageFn((index, value) => {
-      const arr = getArray();
+      if (!insertValueByPath(form, path, index, value)) return;
       idsRef.current.splice(index, 0, generateId(form));
-      const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
-      setArray(newArr);
     });
-    const remove = useStageFn((index) => {
-      const arr = getArray();
-      idsRef.current.splice(index, 1);
-      const newArr = arr.filter((_, i) => i !== index);
-      setArray(newArr);
+    const remove = useStageFn((indices) => {
+      const dropped = removeValueByPath(form, path, indices);
+      for (const index of dropped) idsRef.current.splice(index, 1);
     });
     const swap = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!swapValuesByPath(form, path, from, to)) return;
       [idsRef.current[from], idsRef.current[to]] = [
         idsRef.current[to],
         idsRef.current[from]
       ];
-      const newArr = [...arr];
-      [newArr[from], newArr[to]] = [newArr[to], newArr[from]];
-      setArray(newArr);
     });
     const move = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!moveValueByPath(form, path, from, to)) return;
       const [id] = idsRef.current.splice(from, 1);
       idsRef.current.splice(to, 0, id);
-      const newArr = [...arr];
-      const [item] = newArr.splice(from, 1);
-      newArr.splice(to, 0, item);
-      setArray(newArr);
     });
     const replace = useStageFn((values) => {
       idsRef.current = values.map(() => generateId(form));
-      setArray([...values]);
+      replaceValuesByPath(form, path, values);
     });
     const update = useStageFn((index, value) => {
-      const arr = getArray();
-      if (index < 0 || index >= arr.length) return;
-      const newArr = [...arr];
-      newArr[index] = value;
-      setArray(newArr);
+      updateValueByPath(form, path, index, value);
     });
     return { fields, append, prepend, insert, remove, swap, move, replace, update };
   }
@@ -2276,7 +2874,10 @@
       return useFieldCore(options, Context);
     }
     function useFieldArray(options) {
-      return useFieldArrayCore(options, Context);
+      return useFieldArrayCore(
+        options,
+        Context
+      );
     }
     function useFieldArrayItem(options) {
       return useFieldArrayItemCore(options, Context);
@@ -2298,6 +2899,65 @@
     return group;
   }
 
+  function useTransform(form, name, options = {}) {
+    const path = usePath(name);
+    const { toDisplay, fromDisplay, asyncDebounceMs } = options;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => onPathEvent(
+        form.emitter,
+        "change",
+        create$1(JSON.parse(path.key)),
+        "leaf",
+        invalidate
+      ),
+      [form.emitter, path.key]
+    );
+    const raw = useWatchCore(subscribeFactory, () => getValueByPath(form, path));
+    const value = toDisplay ? toDisplay(raw) : raw;
+    const timerRef = React.useRef(null);
+    const seqRef = React.useRef(0);
+    const fromDisplayRef = React.useRef(fromDisplay);
+    fromDisplayRef.current = fromDisplay;
+    const debounceRef = React.useRef(asyncDebounceMs ?? 0);
+    debounceRef.current = asyncDebounceMs ?? 0;
+    React.useEffect(
+      () => () => {
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+      },
+      []
+    );
+    const onChange = React.useCallback(
+      (display) => {
+        const run = () => {
+          const seq = ++seqRef.current;
+          const transform = fromDisplayRef.current;
+          const commit = (next) => userChangeByPath(form, path, next);
+          if (!transform) {
+            commit(display);
+            return;
+          }
+          const result = transform(display);
+          if (isPromise(result)) {
+            result.then((next) => {
+              if (seqRef.current === seq) commit(next);
+            });
+          } else if (seqRef.current === seq) {
+            commit(result);
+          }
+        };
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = null;
+        if (debounceRef.current > 0) {
+          timerRef.current = setTimeout(run, debounceRef.current);
+        } else {
+          run();
+        }
+      },
+      [form, path]
+    );
+    return { value, onChange };
+  }
+
   function appendFormDataValue(fd, key, value) {
     if (value == null) return;
     if (Array.isArray(value)) {
@@ -2339,24 +2999,41 @@
     initialValues,
     values,
     shouldUnregister,
+    validateOnMount,
+    disabled,
+    asyncAlways,
     onSubmit,
     onValidSubmit,
     onInvalidSubmit,
     action,
     shouldFocusError,
+    shouldUseNativeValidation,
     ...props
   }) {
-    const f2 = useForm({ initialValues, values, shouldUnregister });
+    const f2 = useForm({
+      initialValues,
+      values,
+      shouldUnregister,
+      validateOnMount,
+      disabled,
+      asyncAlways,
+      shouldUseNativeValidation
+    });
     const form = f1 || f2;
+    React__namespace.useEffect(() => {
+      if (disabled !== void 0) setDisabled(form, disabled);
+    }, [form, disabled]);
     const submit = handleSubmit(form, {
       onSubmit,
       onValidSubmit,
       onInvalidSubmit,
       shouldFocusError,
-      onAction: action ? (values2) => action(formDataFromValues(values2)) : void 0
+      shouldUseNativeValidation,
+      onAction: typeof action === "function" ? (values2) => action(formDataFromValues(values2)) : void 0
     });
     const { Provider } = context ?? FormContext;
-    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: submit }));
+    const nativeAction = typeof action === "string" ? action : void 0;
+    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, action: nativeAction, noValidate: true, onSubmit: submit }));
   }
 
   function FormField({ children, ...options }) {
@@ -2371,19 +3048,12 @@
       ref.current = value;
     }
   }
-  function errorIdFromKey(key) {
-    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
-    return id || "field";
-  }
   function ariaProps(error, fieldKey, props) {
     return {
       "aria-invalid": error ? true : props["aria-invalid"],
       "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"]
     };
   }
-  function fieldErrorId(name) {
-    return errorIdFromKey(create$1(name).key);
-  }
   const Field = React__namespace.forwardRef(
     ({
       validate,
@@ -2398,6 +3068,10 @@
       shouldUnregister,
       rules,
       validateDebounce,
+      validateOnMount,
+      valueAsNumber,
+      valueAsDate,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2406,6 +3080,10 @@
     }, ref) => {
       const innerRef = React__namespace.useRef(null);
       const [nativeInvalidCount, setNativeInvalidCount] = React__namespace.useState(0);
+      const contextForm = React__namespace.useContext(FormContext);
+      const resolvedForm = formProp ?? contextForm;
+      const validateOption = validate;
+      const validateWrapped = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
       const {
         value,
         onChange,
@@ -2421,22 +3099,26 @@
         shouldUnregister,
         rules,
         validateDebounce,
+        validateOnMount,
         delayError,
         disabled,
+        asyncAlways,
         mode,
         // File inputs cannot be value-controlled at all — force the
         // uncontrolled path so no `value` prop ever reaches the element.
         uncontrolled: uncontrolled || props.type === "file",
         validate: (...params) => {
-          const el = innerRef.current;
-          if (el && typeof el.checkValidity === "function") {
-            el.setCustomValidity("");
-            if (el.checkValidity() === false) {
-              setNativeInvalidCount((count) => count + 1);
-              return void 0;
+          if (resolvedForm?.shouldUseNativeValidation !== false) {
+            const el = innerRef.current;
+            if (el && typeof el.checkValidity === "function") {
+              el.setCustomValidity("");
+              if (el.checkValidity() === false) {
+                setNativeInvalidCount((count) => count + 1);
+                return void 0;
+              }
             }
           }
-          if (validate) return validate(...params);
+          if (validateWrapped) return validateWrapped(...params);
         }
       });
       const mergedRef = React__namespace.useCallback(
@@ -2462,12 +3144,14 @@
         if (nativeInvalidCount > 0) innerRef.current?.reportValidity();
       }, [nativeInvalidCount]);
       const isFile = props.type === "file";
-      const toValue = eventToValue ?? (isFile ? (e) => e.target.files : (e) => e.target.value);
+      const toValue = eventToValue ?? ((e) => extractEventValue(e, { valueAsNumber, valueAsDate }));
       const valueProps = valueToProps ? valueToProps(value) : isFile ? {} : uncontrolled ? { defaultValue: value } : { value };
       const errorId = errorIdFromKey(fieldKey);
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Component,
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2490,6 +3174,8 @@
       validate,
       rules,
       validateDebounce,
+      validateOnMount,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2510,13 +3196,17 @@
         validate,
         rules,
         validateDebounce,
+        validateOnMount,
+        asyncAlways,
         delayError,
         disabled,
         mode
       });
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(
         "input",
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2545,6 +3235,8 @@
       validate,
       rules,
       validateDebounce,
+      validateOnMount,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2565,13 +3257,17 @@
         validate,
         rules,
         validateDebounce,
+        validateOnMount,
+        asyncAlways,
         delayError,
         disabled,
         mode
       });
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(
         "select",
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2600,18 +3296,25 @@
   exports.FormProvider = FormProvider;
   exports.Select = Select;
   exports.VALIDATION_OUTCOME = VALIDATION_OUTCOME;
+  exports.appendValue = appendValue;
+  exports.appendValueByPath = appendValueByPath;
   exports.changeValue = changeValue;
   exports.changeValueByPath = changeValueByPath;
   exports.clearErrors = clearErrors;
+  exports.clearServerErrors = clearServerErrors;
   exports.createForm = create;
   exports.createFormContext = createFormContext;
+  exports.dottedKeyToFieldPath = dottedKeyToFieldPath;
   exports.emitChangeByPath = emitChangeByPath;
   exports.ensureValidate = ensureValidate;
   exports.fieldErrorId = fieldErrorId;
+  exports.fieldPathToDottedKey = fieldPathToDottedKey;
   exports.getDirtyFields = getDirtyFields;
   exports.getError = getError;
   exports.getErrorByPath = getErrorByPath;
   exports.getErrors = getErrors;
+  exports.getErrorsRecord = getErrorsRecord;
+  exports.getErrorsTree = getErrorsTree;
   exports.getFieldErrors = getFieldErrors;
   exports.getFieldErrorsByPath = getFieldErrorsByPath;
   exports.getFieldState = getFieldState;
@@ -2625,17 +3328,30 @@
   exports.hasTouched = hasTouched;
   exports.hasTouchedByPath = hasTouchedByPath;
   exports.incrementSubmitCount = incrementSubmitCount;
+  exports.insertValue = insertValue;
+  exports.insertValueByPath = insertValueByPath;
   exports.isDirty = isDirty;
+  exports.isFieldDirtyByPath = isFieldDirtyByPath;
   exports.isTouched = isTouched;
+  exports.moveValue = moveValue;
+  exports.moveValueByPath = moveValueByPath;
+  exports.prependValue = prependValue;
+  exports.prependValueByPath = prependValueByPath;
+  exports.registerField = registerField;
   exports.registerFieldMode = registerFieldMode;
   exports.registerFieldValidateDeps = registerFieldValidateDeps;
   exports.registerValidatorByPath = registerValidatorByPath;
   exports.removeField = removeField;
   exports.removeFieldByPath = removeFieldByPath;
+  exports.removeValue = removeValue;
+  exports.removeValueByPath = removeValueByPath;
+  exports.replaceValues = replaceValues;
+  exports.replaceValuesByPath = replaceValuesByPath;
   exports.reset = reset;
   exports.resetField = resetField;
   exports.revalidateDependentsOnChange = revalidateDependentsOnChange;
   exports.revalidateFormOnChange = revalidateFormOnChange;
+  exports.runFormValidate = runFormValidate;
   exports.seedValueByPath = seedValueByPath;
   exports.setDisabled = setDisabled;
   exports.setError = setError;
@@ -2644,6 +3360,7 @@
   exports.setInitialValues = setInitialValues;
   exports.setIsSubmitting = setIsSubmitting;
   exports.setServerErrors = setServerErrors;
+  exports.setStatus = setStatus;
   exports.setSubmitSuccessful = setSubmitSuccessful;
   exports.setTouched = setTouched;
   exports.setTouchedByPath = setTouchedByPath;
@@ -2651,15 +3368,21 @@
   exports.setValue = setValue;
   exports.setValueByPath = setValueByPath;
   exports.subscribe = subscribe;
+  exports.swapValues = swapValues;
+  exports.swapValuesByPath = swapValuesByPath;
   exports.trigger = trigger;
   exports.unregisterFieldMode = unregisterFieldMode;
   exports.unregisterFieldValidateDeps = unregisterFieldValidateDeps;
   exports.unsetValidatingByPath = unsetValidatingByPath;
+  exports.updateValue = updateValue;
+  exports.updateValueByPath = updateValueByPath;
   exports.useCanSubmit = useCanSubmit;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;
   exports.useDirtyFields = useDirtyFields;
   exports.useError = useError;
   exports.useErrorByPath = useErrorByPath;
+  exports.useErrors = useErrors;
+  exports.useErrorsTree = useErrorsTree;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
   exports.useFieldArrayItem = useFieldArrayItem;
@@ -2672,22 +3395,29 @@
   exports.useFormState = useFormState;
   exports.useHasErrors = useHasErrors;
   exports.useIsDirty = useIsDirty;
+  exports.useIsFieldDirty = useIsFieldDirty;
+  exports.useIsFieldDirtyByPath = useIsFieldDirtyByPath;
   exports.useIsLoading = useIsLoading;
   exports.useIsSubmitSuccessful = useIsSubmitSuccessful;
   exports.useIsSubmitting = useIsSubmitting;
   exports.useIsValid = useIsValid;
   exports.useIsValidating = useIsValidating;
+  exports.useStatus = useStatus;
+  exports.useStore = useStore;
   exports.useSubmitCount = useSubmitCount;
   exports.useTouched = useTouched;
   exports.useTouchedByPath = useTouchedByPath;
   exports.useTouchedFields = useTouchedFields;
+  exports.useTransform = useTransform;
   exports.useValue = useValue;
   exports.useValueByPath = useValueByPath;
+  exports.useValues = useValues;
   exports.useWatch = useWatch;
   exports.useWatchCore = useWatchCore;
   exports.userBlur = userBlur;
   exports.userChangeByPath = userChangeByPath;
   exports.validate = validate;
+  exports.watch = watch;
 
 }));
 //# sourceMappingURL=index.umd.js.map