react-f0rm 0.2.2 → 0.3.0

package/dist/index.umd.js

@@ -49,9 +49,56 @@
     };
   }
 
+  const pathCache = /* @__PURE__ */ new Map();
   function normalizePath(path) {
     if (Array.isArray(path)) return path;
-    return path.split(/\.|\[/).map((prop) => prop.endsWith("]") ? Number.parseInt(prop, 10) : prop);
+    const cached = pathCache.get(path);
+    if (cached) return cached;
+    const value = parsePath(path);
+    pathCache.set(path, value);
+    return value;
+  }
+  function parsePath(path) {
+    const result = [];
+    let identifier = "";
+    const flushIdentifier = () => {
+      result.push(identifier);
+      identifier = "";
+    };
+    for (let i = 0; i < path.length; i++) {
+      const char = path[i];
+      if (char === ".") {
+        if (identifier !== "") flushIdentifier();
+      } else if (char === "[") {
+        if (identifier !== "") flushIdentifier();
+        const quote = path[i + 1];
+        if (quote === '"' || quote === "'") {
+          const close = path.indexOf(quote, i + 2);
+          if (close === -1) {
+            throw new TypeError(`Unterminated quote in path: ${path}`);
+          }
+          if (path[close + 1] !== "]") {
+            throw new TypeError(
+              `Expected "]" after quoted segment in path: ${path}`
+            );
+          }
+          result.push(path.slice(i + 2, close));
+          i = close + 1;
+        } else {
+          const close = path.indexOf("]", i + 1);
+          if (close === -1) {
+            throw new TypeError(`Unterminated bracket in path: ${path}`);
+          }
+          const content = path.slice(i + 1, close);
+          result.push(/^-?\d+$/.test(content) ? Number(content) : content);
+          i = close;
+        }
+      } else {
+        identifier += char;
+      }
+    }
+    if (identifier !== "" || result.length === 0) flushIdentifier();
+    return result;
   }
   function get(values, path) {
     return path.reduce((current, p) => {
@@ -59,6 +106,24 @@
       return current[p];
     }, values);
   }
+  function unset(values, path) {
+    if (!path.length || values == null) return values;
+    const [prop, ...props] = path;
+    if (props.length) {
+      const next = unset(values[prop], props);
+      return next === values[prop] ? values : set(values, path, next);
+    }
+    if (Array.isArray(values)) {
+      if (!(prop in values)) return values;
+      const arr = values.slice();
+      delete arr[prop];
+      return arr;
+    }
+    if (typeof values !== "object" || !(prop in values)) return values;
+    const copy = { ...values };
+    delete copy[prop];
+    return copy;
+  }
   function set(values, path, value) {
     if (!path.length) return value;
     const [prop, ...props] = path;
@@ -69,6 +134,35 @@
     }
     return { ...values, [prop]: set(values && values[prop], props, value) };
   }
+  function setOwned(root, path, value, owned) {
+    if (!path.length) return value;
+    let container = root;
+    let parent = null;
+    let parentProp = "";
+    for (let i = 0; i < path.length; i++) {
+      const prop = path[i];
+      if (!owned.has(container)) {
+        let copy;
+        if (typeof prop === "number") {
+          copy = Array.isArray(container) ? container.slice() : [];
+        } else {
+          copy = { ...container };
+        }
+        owned.add(copy);
+        if (i === 0) root = copy;
+        else parent[parentProp] = copy;
+        container = copy;
+      }
+      if (i === path.length - 1) {
+        container[prop] = value;
+      } else {
+        parent = container;
+        parentProp = prop;
+        container = container[prop];
+      }
+    }
+    return root;
+  }
   function isPromise(value) {
     return value && typeof value.then === "function";
   }
@@ -82,7 +176,7 @@
           reject();
           return;
         }
-        if (isResolve()) return;
+        if (!isResolve()) return;
         off();
         resolve();
       });
@@ -95,85 +189,148 @@
   }
 
   const emit = emit$1;
+  const VALIDATION_OUTCOME = /* @__PURE__ */ Symbol("validation-outcome");
   function create(options) {
     const emitter = create$2();
     return {
       emitter,
-      revalidateOnChange: true,
       ...options,
+      mode: options?.mode ?? "onSubmit",
+      reValidateMode: options?.reValidateMode ?? "onChange",
+      disabled: options?.disabled ?? false,
       initialValues: options?.initialValues ?? {},
       values: /* @__PURE__ */ new Map(),
+      deleted: /* @__PURE__ */ new Set(),
       errors: /* @__PURE__ */ new Map(),
       touched: /* @__PURE__ */ new Set(),
       validators: /* @__PURE__ */ new Map(),
       validating: /* @__PURE__ */ new Set(),
+      parsedValues: void 0,
       isSubmitting: false,
       submitCount: 0,
       isSubmitSuccessful: void 0
     };
   }
   function getValues(form) {
-    return Array.from(form.values.keys()).reduce(
-      (v, k) => set(v, JSON.parse(k), form.values.get(k)),
-      form.initialValues
-    );
+    const { initialValues, parsedValues, values, deleted } = form;
+    const owned = /* @__PURE__ */ new Set();
+    let merged = parsedValues ?? initialValues;
+    for (const [key, value] of values) {
+      merged = setOwned(merged, JSON.parse(key), value, owned);
+    }
+    for (const key of deleted) {
+      merged = unset(merged, JSON.parse(key));
+    }
+    return merged;
   }
   function getValue(form, name) {
     return getValueByPath(form, create$1(name));
   }
-  function getValueByPath({ initialValues, values }, path) {
+  function getValueByPath({ initialValues, parsedValues, values, deleted }, path) {
     if (values.has(path.key)) return values.get(path.key);
-    return get(initialValues, path.value);
+    if (deleted.has(path.key)) return void 0;
+    return get(parsedValues ?? initialValues, path.value);
   }
-  function setValue(form, name, value) {
-    setValueByPath(form, create$1(name), value);
+  function setValue(form, name, value, options) {
+    setValueByPath(form, create$1(name), value, options);
   }
-  function setValueByPath({ emitter, values }, path, value) {
+  function setValueByPath(form, path, value, options) {
+    const { emitter, values, deleted } = form;
     values.set(path.key, value);
+    reviveBranch(deleted, path);
+    bumpDirtyVersion(form);
+    if (options?.shouldTouch) setTouchedByPath(form, path);
+    if (options?.shouldValidate) form.validators.get(path.key)?.();
     emit(emitter, "change", path);
   }
   function getError(form, name) {
     return getErrorByPath(form, create$1(name));
   }
   function getErrorByPath({ errors }, path) {
-    return errors.get(path.key);
+    return errors.get(path.key)?.[0];
+  }
+  const NO_ERRORS = [];
+  function getFieldErrors(form, name) {
+    return getFieldErrorsByPath(form, create$1(name));
+  }
+  function getFieldErrorsByPath({ errors }, path) {
+    return errors.get(path.key) ?? NO_ERRORS;
   }
   function getErrors({ errors }) {
-    return Array.from(errors.values());
+    const entries = [];
+    for (const [key, list] of errors) {
+      const path = JSON.parse(key).join(".");
+      for (const { type, message } of list) entries.push({ path, type, message });
+    }
+    return entries;
   }
   function getFirstError({ errors }) {
-    return errors.values().next().value;
+    return errors.values().next().value?.[0]?.message;
   }
-  function unsetValidatingByPath({ emitter, validating }, { key }) {
-    validating.delete(key);
-    emit(emitter, "validating");
+  function getFieldState(form, name) {
+    const path = create$1(name);
+    const { initialValues, values, touched, validating } = form;
+    const live = values.get(path.key);
+    return {
+      value: getValueByPath(form, path),
+      error: getErrorByPath(form, path),
+      errors: getFieldErrorsByPath(form, path),
+      isDirty: values.has(path.key) && get(initialValues, path.value) !== live,
+      isTouched: touched.has(path.key),
+      isValidating: validating.has(path.key)
+    };
   }
-  function setValidatingByPath({ emitter, validating }, { key }) {
-    validating.add(key);
-    emit(emitter, "validating");
+  function unsetValidatingByPath({ emitter, validating }, path) {
+    validating.delete(path.key);
+    emit(emitter, "validating", path);
+  }
+  function setValidatingByPath({ emitter, validating }, path) {
+    validating.add(path.key);
+    emit(emitter, "validating", path);
   }
   function setError(form, name, error) {
     setErrorByPath(form, create$1(name), error);
   }
   function setErrorByPath({ emitter, errors }, path, error) {
-    if (error) {
-      errors.set(path.key, error);
-    } else {
-      errors.delete(path.key);
+    const list = normalizeErrors(error);
+    if (list) errors.set(path.key, list);
+    else errors.delete(path.key);
+    emit(emitter, "errors", path);
+  }
+  function normalizeErrors(error) {
+    if (typeof error === "string") {
+      return error ? [{ type: "custom", message: error }] : void 0;
     }
-    emit(emitter, "errors");
-  }
-  function clearErrors({ emitter, errors }) {
-    errors.clear();
-    emit(emitter, "errors");
+    if (isFieldError(error)) return [error];
+    if (!error) return void 0;
+    const list = [];
+    error.forEach((item) => {
+      if (typeof item === "string" && item) {
+        list.push({ type: "custom", message: item });
+      } else if (isFieldError(item)) {
+        list.push(item);
+      }
+    });
+    return list.length ? list : void 0;
+  }
+  function clearErrors(form, name) {
+    const { emitter, errors } = form;
+    if (name === void 0) {
+      errors.clear();
+      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);
+    for (const path of paths) emit(emitter, "errors", path);
   }
   function setTouched(form, name) {
     setTouchedByPath(form, create$1(name));
   }
-  function setTouchedByPath({ emitter, touched }, { key }) {
-    if (touched.has(key)) return;
-    touched.add(key);
-    emit(emitter, "touched");
+  function setTouchedByPath({ emitter, touched }, path) {
+    if (touched.has(path.key)) return;
+    touched.add(path.key);
+    emit(emitter, "touched", path);
   }
   function hasTouched(form, name) {
     return hasTouchedByPath(form, create$1(name));
@@ -181,12 +338,53 @@
   function hasTouchedByPath({ touched }, path) {
     return touched.has(path.key);
   }
-  function isDirty({ initialValues, values }) {
+  function isDirty(form) {
+    let dirty = false;
+    forEachDirtyField(form, () => {
+      dirty = true;
+    });
+    return dirty;
+  }
+  function forEachDirtyField({ initialValues, values }, fn) {
     for (const [key, value] of values) {
       const path = JSON.parse(key);
-      if (get(initialValues, path) !== value) return true;
+      if (get(initialValues, path) !== value) fn(path.join("."));
     }
-    return false;
+  }
+  const dirtyFieldsCaches = /* @__PURE__ */ new WeakMap();
+  function bumpDirtyVersion(form) {
+    const cache = dirtyFieldsCaches.get(form);
+    if (cache) cache.version++;
+  }
+  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 getTouchedFields({ touched }) {
+    return Array.from(
+      touched,
+      (key) => JSON.parse(key).join(".")
+    );
   }
   function isTouched({ touched }) {
     return touched.size > 0;
@@ -194,38 +392,154 @@
   function removeField(form, name) {
     removeFieldByPath(form, create$1(name));
   }
-  function removeFieldByPath(form, { key }) {
-    const { emitter, values, touched, errors, validating } = form;
+  function removeFieldByPath(form, { key, value: segments }) {
+    const { emitter, values, touched, errors, validating, deleted } = form;
     values.delete(key);
     touched.delete(key);
     errors.delete(key);
     validating.delete(key);
+    if (!hasLiveBranch(values, segments)) deleted.add(key);
+    bumpDirtyVersion(form);
     emit(emitter, "change");
     emit(emitter, "touched");
     emit(emitter, "errors");
     emit(emitter, "validating");
   }
+  function hasLiveBranch(values, segments) {
+    for (let i = 1; i < segments.length; i++) {
+      if (values.has(JSON.stringify(segments.slice(0, i)))) return true;
+    }
+    const stem = `${JSON.stringify(segments).slice(0, -1)},`;
+    for (const key of values.keys()) {
+      if (key.startsWith(stem)) return true;
+    }
+    return false;
+  }
+  function reviveBranch(deleted, { key }) {
+    if (!deleted.size) return;
+    for (const tombstone of deleted) {
+      if (tombstone === key || tombstone.startsWith(`${key.slice(0, -1)},`) || key.startsWith(`${tombstone.slice(0, -1)},`)) {
+        deleted.delete(tombstone);
+      }
+    }
+  }
   function setInitialValues(form, initialValues) {
     if (form.initialValues === initialValues) return;
     form.initialValues = initialValues;
+    form.parsedValues = void 0;
     form.values.clear();
+    form.deleted.clear();
+    bumpDirtyVersion(form);
     emit(form.emitter, "change");
   }
-  function reset(form, initialValues) {
+  function reset(form, initialValues, options) {
+    const dirtyValues = options?.keepDirtyValues ? Object.keys(getDirtyFields(form)).map((key) => ({
+      key,
+      value: getValue(form, key)
+    })) : [];
     form.initialValues = initialValues;
-    clearErrors(form);
-    const { emitter, touched, values } = form;
+    form.parsedValues = void 0;
+    if (!options?.keepErrors) clearErrors(form);
+    const { emitter, touched, values, deleted, validating } = form;
     values.clear();
-    touched.clear();
+    deleted.clear();
+    if (!options?.keepTouched) touched.clear();
+    validating.clear();
+    if (!options?.keepIsSubmitting) form.isSubmitting = false;
+    if (!options?.keepSubmitCount) form.submitCount = 0;
+    if (!options?.keepIsSubmitted) form.isSubmitSuccessful = void 0;
+    bumpDirtyVersion(form);
+    for (const { key, value } of dirtyValues) {
+      setValueByPath(form, create$1(key), value);
+    }
     emit(emitter, "change");
     emit(emitter, "touched");
+    emit(emitter, "validating");
+    emit(emitter, "submitting");
+    emit(emitter, "submitCount");
+    emit(emitter, "submitSuccessful");
     emit(emitter, "reset");
   }
+  function resetField(form, name, options) {
+    const path = create$1(name);
+    const { emitter, values, touched, errors, deleted } = form;
+    values.delete(path.key);
+    if (form.parsedValues !== void 0) {
+      form.parsedValues = unset(form.parsedValues, path.value);
+      const initial = get(form.initialValues, path.value);
+      if (initial !== void 0) values.set(path.key, initial);
+    }
+    if (options && "value" in options) {
+      values.set(path.key, options.value);
+    }
+    reviveBranch(deleted, path);
+    emit(emitter, "change");
+    if (!options?.keepTouched && touched.delete(path.key)) {
+      emit(emitter, "touched", path);
+    }
+    if (!options?.keepErrors && errors.delete(path.key)) {
+      emit(emitter, "errors", path);
+    }
+    bumpDirtyVersion(form);
+  }
   function hasErrors({ errors }) {
     return errors.size > 0;
   }
-  function trigger(form) {
-    form.validators.forEach((validator) => validator());
+  async function trigger(form, name) {
+    const settle = () => waitUntil(
+      form.emitter,
+      "validating",
+      () => !form.validating.size,
+      () => false
+    );
+    if (name === void 0) {
+      form.validators.forEach((validator) => validator());
+      await settle();
+      if (form.validate) {
+        const result = await form.validate(getValues(form));
+        applyValidateResult(form, result);
+      }
+      return !hasErrors(form);
+    }
+    const keys = typeof name === "string" || isSegmentsPath(name) ? [create$1(name).key] : name.map((one) => create$1(one).key);
+    keys.forEach((key) => form.validators.get(key)?.());
+    await settle();
+    return keys.every((key) => !form.errors.has(key));
+  }
+  function isSegmentsPath(name) {
+    return name.some((part) => typeof part === "number");
+  }
+  function isFieldError(value) {
+    return !!value && typeof value === "object" && typeof value.type === "string" && typeof value.message === "string";
+  }
+  function setFormErrors(form, result, segments = []) {
+    Object.entries(result).forEach(([key, value]) => {
+      const path = [...segments, ...normalizePath(key)];
+      if (typeof value === "string") {
+        if (value) setError(form, path, value);
+      } else if (Array.isArray(value)) {
+        setError(form, path, value);
+      } else if (isFieldError(value)) {
+        setError(form, path, value);
+      } else if (value && typeof value === "object") {
+        setFormErrors(form, value, path);
+      }
+    });
+  }
+  function setParsedValues(form, values) {
+    if (values === void 0 || values === form.parsedValues) return;
+    form.parsedValues = values;
+    emit(form.emitter, "change");
+  }
+  function applyValidateResult(form, result) {
+    if (!result) return;
+    if (typeof result === "object" && VALIDATION_OUTCOME in result) {
+      const outcome = result;
+      if (outcome.errors) setFormErrors(form, outcome.errors);
+      setParsedValues(form, outcome.values);
+      return;
+    }
+    setFormErrors(form, result);
   }
   async function ensureValidate(form) {
     form.validators.forEach((validator) => validator());
@@ -239,13 +553,8 @@
     });
     if (form.validate) {
       const result = await form.validate(getValues(form));
-      const entries = result ? Object.entries(result) : [];
-      if (entries.length) {
-        entries.forEach(([field, error]) => {
-          setError(form, field, error);
-        });
-        throw new Error(getFirstError(form));
-      }
+      applyValidateResult(form, result);
+      if (hasErrors(form)) throw new Error(getFirstError(form));
     }
   }
   async function validate(form) {
@@ -263,68 +572,510 @@
     form.isSubmitSuccessful = value;
     emit(form.emitter, "submitSuccessful");
   }
+  function setDisabled(form, value) {
+    form.disabled = value;
+    emit(form.emitter, "disabled");
+  }
+  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,
+      shouldFocusError = true
+    } = options ?? {};
+    return async (e) => {
+      if (e && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+      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();
+        }
+        setIsSubmitting(form, false);
+        setSubmitSuccessful(form, false);
+        if (onInvalidSubmit) onInvalidSubmit(getNativeErrors(formEl), values);
+        return;
+      }
+      const error = await validate(form);
+      if (error) {
+        setIsSubmitting(form, false);
+        setSubmitSuccessful(form, false);
+        if (shouldFocusError) {
+          const firstKey = form.errors.keys().next().value;
+          if (firstKey !== void 0) emit(form.emitter, "focusError", firstKey);
+        }
+        if (onInvalidSubmit) onInvalidSubmit(getErrors(form), values);
+        return;
+      }
+      try {
+        const submitted = getValues(form);
+        if (onSubmit) await onSubmit(submitted, e);
+        if (onValidSubmit) await onValidSubmit(submitted, e);
+        setSubmitSuccessful(form, true);
+      } catch {
+        setSubmitSuccessful(form, false);
+      } finally {
+        setIsSubmitting(form, false);
+      }
+    };
+  }
+  function setFocus(form, name, options) {
+    const { key } = create$1(name);
+    if (options) emit(form.emitter, "focusError", key, options);
+    else emit(form.emitter, "focusError", key);
+  }
 
-  const FormContext = React.createContext(null);
-  const FormProvider = FormContext.Provider;
-  function useFormContext() {
-    const form = React.useContext(FormContext);
-    if (!form) throw new Error("no form provided");
-    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";
+    }
   }
-  const CheckboxGroupContext = React.createContext(null);
-  const CheckboxGroupProvider = CheckboxGroupContext.Provider;
-  function useCheckboxGroupContext() {
-    const group = React.useContext(CheckboxGroupContext);
-    if (!group) throw new Error("no group provided");
-    return group;
+  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 !0;
+  	  }
+  	}
+  	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;
+  }
+
+  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 = !0),
+  	        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 = !0));
+  	      }
+  	      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 !0;
+  	      }
+  	    }
+  	    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 = !1,
+  	      didWarnUncachedGetSnapshot = !1,
+  	      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;
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    shim.exports = requireUseSyncExternalStoreShim_production();
+  } else {
+    shim.exports = requireUseSyncExternalStoreShim_development();
+  }
+
+  var shimExports = shim.exports;
+
+  function isDescendant(key, ancestorKey) {
+    return key.startsWith(`${ancestorKey.slice(0, -1)},`);
+  }
+  function onPathEvent(emitter, event, path, scope, cb) {
+    const { key } = path;
+    return on(emitter, event, (changed) => {
+      if (changed === void 0 || changed.key === key || isDescendant(key, changed.key) || scope === "branch" && isDescendant(changed.key, key)) {
+        cb();
+      }
+    });
+  }
+  function onKeyEvent(emitter, event, key, cb) {
+    return on(emitter, event, (changed) => {
+      if (changed === void 0 || changed.key === key) cb();
+    });
+  }
+  function isNameList(name) {
+    return Array.isArray(name) && name.every((part) => typeof part !== "number");
+  }
+  function subscribe(form, options) {
+    const { name, event = "change", scope = "branch", callback } = options;
+    if (name === void 0) return on(form.emitter, event, callback);
+    const names = isNameList(name) ? name : [name];
+    const unsubscribes = names.map((one) => {
+      const path = create$1(one);
+      return event === "errors" || event === "touched" ? onKeyEvent(form.emitter, event, path.key, callback) : onPathEvent(form.emitter, event, path, scope, callback);
+    });
+    return unsubscribes.length === 1 ? unsubscribes[0] : () => unsubscribes.forEach((unsubscribe) => unsubscribe());
   }
 
   function useForm(options) {
-    const ref = React.useRef(null);
-    const form = ref.current = ref.current || create(options);
+    const [form] = React.useState(() => {
+      const created = create(options);
+      if (options && options.values !== void 0) {
+        setInitialValues(created, options.values);
+      }
+      return created;
+    });
     const initialValues = options && options.initialValues;
+    const values = options && options.values;
+    const seededRef = React.useRef(null);
+    if (seededRef.current === null)
+      seededRef.current = { done: false, source: void 0 };
     React.useEffect(() => {
+      const seeded = seededRef.current;
+      if (seeded.done && (seeded.source === initialValues || isEqual(seeded.source, initialValues))) {
+        return;
+      }
+      seeded.done = true;
+      seeded.source = initialValues;
       setInitialValues(form, initialValues);
-    }, [initialValues]);
+    }, [form, initialValues]);
+    const controlledRef = React.useRef(null);
+    if (controlledRef.current === null) {
+      controlledRef.current = { done: false, source: void 0 };
+    }
+    React.useEffect(() => {
+      if (values === void 0) return;
+      const seeded = controlledRef.current;
+      if (seeded.done && (seeded.source === values || isEqual(seeded.source, values))) {
+        return;
+      }
+      seeded.done = true;
+      seeded.source = values;
+      setInitialValues(form, values);
+    }, [form, values]);
     return form;
   }
+  function useWatchCore(subscribeFactory, getter) {
+    const cacheRef = React.useRef(null);
+    if (cacheRef.current === null) cacheRef.current = { hasValue: false };
+    const cache = cacheRef.current;
+    const getterRef = React.useRef(getter);
+    getterRef.current = getter;
+    const getSnapshot = React.useCallback(() => {
+      if (!cache.hasValue) {
+        cache.value = getterRef.current();
+        cache.hasValue = true;
+      }
+      return cache.value;
+    }, [cache]);
+    const subscribe = React.useCallback(
+      (notify) => {
+        cache.hasValue = false;
+        const invalidate = () => {
+          cache.hasValue = false;
+          notify();
+        };
+        return subscribeFactory(invalidate);
+      },
+      [subscribeFactory, cache]
+    );
+    return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  }
   function useWatch(emitter, event, getter) {
-    const [value, syncValue] = React.useReducer(getter, void 0, getter);
-    React.useEffect(() => on(emitter, event, syncValue), [emitter, event]);
-    return value;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => on(emitter, event, invalidate),
+      [emitter, event]
+    );
+    return useWatchCore(subscribeFactory, getter);
   }
   function useValue(form, name) {
     return useValueByPath(form, create$1(name));
   }
   function useValueByPath(form, path) {
-    return useWatch(
-      form.emitter,
-      "change",
-      getValueByPath.bind(null, form, path)
+    const { emitter } = form;
+    const { key } = path;
+    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]
     );
+    return useWatchCore(subscribeFactory, getValueByPath.bind(null, form, path));
   }
   function useTouched(form, name) {
     return useTouchedByPath(form, create$1(name));
   }
   function useTouchedByPath(form, path) {
-    return useWatch(
-      form.emitter,
-      "touched",
+    const { emitter } = form;
+    const { key } = path;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => onKeyEvent(emitter, "touched", key, invalidate),
+      [emitter, key]
+    );
+    return useWatchCore(
+      subscribeFactory,
       hasTouchedByPath.bind(null, form, path)
     );
   }
   function useError(form, name) {
-    return useErrorByPath(form, create$1(name));
+    return useErrorByPath(form, create$1(name))?.message;
   }
   function useErrorByPath(form, path) {
-    return useWatch(
-      form.emitter,
-      "errors",
-      getErrorByPath.bind(null, form, path)
+    const { emitter } = form;
+    const { key } = path;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => onKeyEvent(emitter, "errors", key, invalidate),
+      [emitter, key]
+    );
+    return useWatchCore(subscribeFactory, getErrorByPath.bind(null, form, path));
+  }
+  function useFieldErrors(form, name) {
+    return useFieldErrorsByPath(form, create$1(name));
+  }
+  function useFieldErrorsByPath(form, path) {
+    const { emitter } = form;
+    const { key } = path;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => onKeyEvent(emitter, "errors", key, invalidate),
+      [emitter, key]
+    );
+    return useWatchCore(
+      subscribeFactory,
+      getFieldErrorsByPath.bind(null, form, path)
     );
   }
   function useIsDirty(form) {
-    return useWatch(form.emitter, "touched", isDirty.bind(null, form));
+    return useWatch(form.emitter, "change", isDirty.bind(null, form));
+  }
+  function useDirtyFields(form) {
+    return useWatch(form.emitter, "change", getDirtyFields.bind(null, form));
+  }
+  function useTouchedFields(form) {
+    return useWatch(form.emitter, "touched", getTouchedFields.bind(null, form));
   }
   function useHasErrors(form) {
     return useWatch(form.emitter, "errors", hasErrors.bind(null, form));
@@ -335,6 +1086,31 @@
   function useSubmitCount(form) {
     return useWatch(form.emitter, "submitCount", () => form.submitCount);
   }
+  function isEqual(a, b) {
+    if (Object.is(a, b)) return true;
+    if (a instanceof Date && b instanceof Date)
+      return a.getTime() === b.getTime();
+    if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+    const isArray = Array.isArray(a);
+    if (isArray !== Array.isArray(b)) return false;
+    if (isArray) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (!isEqual(a[i], b[i])) return false;
+      }
+      return true;
+    }
+    const proto = Object.getPrototypeOf(a);
+    if (proto !== Object.prototype && proto !== null) return false;
+    if (Object.getPrototypeOf(b) !== proto) return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+      if (!isEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
 
   function usePath(name) {
     const path = React.useMemo(() => create$1(normalizePath(name)), [name]);
@@ -350,70 +1126,174 @@
     const ref = useStage(fn);
     return React.useCallback(
       (...params) => ref.current(...params),
-      []
+      [ref]
     );
   }
 
-  function useValidate(validate, path) {
-    const form = useFormContext();
+  function useValidate(validate, path, formProp, options) {
+    const contextForm = React.useContext(FormContext);
+    const form = formProp || contextForm;
+    if (!form) throw new Error("no form provided");
     const lockRef = React.useRef(null);
     const validateRef = React.useRef(validate);
     validateRef.current = validate;
+    const debounceRef = React.useRef(options?.debounce ?? 0);
+    debounceRef.current = options?.debounce ?? 0;
     React.useEffect(() => {
-      const validator = () => {
+      let timer = null;
+      let controller = null;
+      let marked = false;
+      const mark = () => {
+        if (marked) return;
+        marked = true;
+        setValidatingByPath(form, path);
+      };
+      const unmark = () => {
+        if (!marked) return;
+        marked = false;
+        unsetValidatingByPath(form, path);
+      };
+      const run = () => {
+        timer = null;
         const fn = validateRef.current;
-        if (!fn) return;
-        const result = fn(getValueByPath(form, path), { form, path });
+        if (!fn) {
+          unmark();
+          return;
+        }
+        controller?.abort();
+        controller = new AbortController();
+        const lock = lockRef.current = {};
+        let result;
+        try {
+          result = fn(getValueByPath(form, path), {
+            form,
+            path,
+            signal: controller.signal
+          });
+        } catch (e) {
+          unmark();
+          throw e;
+        }
         if (!isPromise(result)) {
           setErrorByPath(form, path, result);
+          unmark();
           return;
         }
-        const lock = lockRef.current = {};
-        setValidatingByPath(form, path);
-        result.then((error) => {
-          if (lock === lockRef.current) {
-            setErrorByPath(form, path, error);
+        mark();
+        result.then(
+          (error) => {
+            if (lock === lockRef.current) {
+              setErrorByPath(form, path, error);
+            }
           }
+        ).catch(() => {
         }).finally(() => {
           if (lock === lockRef.current) {
-            unsetValidatingByPath(form, path);
+            unmark();
             lockRef.current = null;
           }
         });
       };
+      const validator = () => {
+        const debounce = debounceRef.current;
+        if (debounce > 0) {
+          if (timer !== null) clearTimeout(timer);
+          else mark();
+          timer = setTimeout(run, debounce);
+          return;
+        }
+        run();
+      };
       form.validators.set(path.key, validator);
       return () => {
         form.validators.delete(path.key);
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        unmark();
+        controller?.abort();
       };
     }, [form, path.key]);
     return useStageFn(() => form.validators.get(path.key)?.());
   }
 
-  function useField({
+  function combineRulesAndValidate(rules, validate) {
+    if (!rules) return validate;
+    const ruleValidator = rulesToValidator(rules);
+    if (!validate) return ruleValidator;
+    return (value, meta) => {
+      const ruleErrors = ruleValidator(value, meta);
+      const merge = (other) => {
+        const list = [...ruleErrors ?? []];
+        if (Array.isArray(other)) list.push(...other);
+        else if (other) list.push(other);
+        return list.length ? list : void 0;
+      };
+      const result = validate(value, meta);
+      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;
+  }
+  function useFieldCore({
     form: f1,
     name,
     initialValue,
     shouldUnregister,
     validate,
-    ...rest
-  }) {
-    const f2 = useFormContext();
-    const form = f1 || f2;
+    rules,
+    validateDebounce,
+    delayError,
+    disabled
+  }, Context) {
+    const contextForm = React.useContext(Context);
+    const form = f1 || contextForm;
+    if (!form) throw new Error("no form provided");
     const path = usePath(name);
-    const validator = useValidate(validate, path);
-    React.useMemo(() => {
-      if (initialValue !== void 0) setValueByPath(form, path, initialValue);
-    }, [form, path]);
-    const error = useErrorByPath(form, path);
+    const validator = useValidate(
+      combineRulesAndValidate(rules, validate),
+      path,
+      form,
+      {
+        debounce: validateDebounce
+      }
+    );
+    const liveErrors = useFieldErrorsByPath(form, path);
+    const errors = useDelayedErrors(liveErrors, delayError);
+    const errorObject = errors[0];
+    const error = errorObject?.message;
     const value = useValueByPath(form, path);
+    const formDisabled = useWatch(form.emitter, "disabled", () => form.disabled);
+    React.useEffect(() => {
+      if (initialValue === void 0) return;
+      if (getValueByPath(form, path) === void 0) {
+        setValueByPath(form, path, initialValue);
+      }
+    }, [form, path, initialValue]);
     const onChange = useStageFn((v) => {
       setValueByPath(form, path, v);
-      if (form.validateOnChange || form.revalidateOnChange && error && error !== void 0)
+      if (form.mode === "onChange" || form.mode === "all" || form.mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
         validator();
     });
     const onBlur = useStageFn(() => {
       setTouchedByPath(form, path);
-      if (form.validateOnBlur || form.revalidateOnBlur && error !== void 0)
+      if (form.mode === "onBlur" || form.mode === "onTouched" || form.mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
         validator();
     });
     React.useEffect(
@@ -424,16 +1304,30 @@
       },
       [path, form, shouldUnregister]
     );
-    return { ...rest, value, error, onChange, onBlur, name: path.key };
+    return {
+      form,
+      value,
+      error,
+      errorObject,
+      errors,
+      onChange,
+      onBlur,
+      name: path.key,
+      disabled: formDisabled || !!disabled
+    };
+  }
+  function useField(options) {
+    return useFieldCore(options, FormContext);
   }
 
   let idCounter = 0;
   function generateId() {
     return `_${++idCounter}`;
   }
-  function useFieldArray(options) {
-    const f2 = useFormContext();
-    const form = options.form || f2;
+  function useFieldArrayCore(options, Context) {
+    const contextForm = React.useContext(Context);
+    const form = options.form || contextForm;
+    if (!form) throw new Error("no form provided");
     const path = usePath(options.name);
     const idsRef = React.useRef([]);
     const getArray = React.useCallback(
@@ -461,7 +1355,10 @@
       void 0,
       computeFields
     );
-    React.useEffect(() => on(form.emitter, "change", syncFields), [form.emitter]);
+    React.useEffect(
+      () => onPathEvent(form.emitter, "change", path, "branch", syncFields),
+      [form.emitter, path]
+    );
     const append = useStageFn((value) => {
       const arr = getArray();
       idsRef.current.push(generateId());
@@ -503,45 +1400,80 @@
       newArr.splice(to, 0, item);
       setArray(newArr);
     });
-    return { fields, append, prepend, insert, remove, swap, move };
+    const replace = useStageFn((values) => {
+      idsRef.current = values.map(() => generateId());
+      setArray([...values]);
+    });
+    const update = useStageFn((index, value) => {
+      const arr = getArray();
+      if (index < 0 || index >= arr.length) return;
+      const newArr = [...arr];
+      newArr[index] = value;
+      setArray(newArr);
+    });
+    return { fields, append, prepend, insert, remove, swap, move, replace, update };
+  }
+  function useFieldArray(options) {
+    return useFieldArrayCore(options, FormContext);
+  }
+
+  const FormContext = React.createContext(null);
+  const FormProvider = FormContext.Provider;
+  function useFormContext() {
+    const form = React.useContext(FormContext);
+    if (!form) throw new Error("no form provided");
+    return form;
+  }
+  function createFormContext() {
+    const Context = React.createContext(null);
+    function FormProvider2({
+      form,
+      children
+    }) {
+      return React.createElement(Context.Provider, { value: form }, children);
+    }
+    function useFormContext2() {
+      const form = React.useContext(Context);
+      if (!form) throw new Error("no form provided");
+      return form;
+    }
+    function useField(options) {
+      return useFieldCore(options, Context);
+    }
+    function useFieldArray(options) {
+      return useFieldArrayCore(options, Context);
+    }
+    return { FormProvider: FormProvider2, useFormContext: useFormContext2, useField, useFieldArray };
+  }
+  const CheckboxGroupContext = React.createContext(null);
+  const CheckboxGroupProvider = CheckboxGroupContext.Provider;
+  function useCheckboxGroupContext() {
+    const group = React.useContext(CheckboxGroupContext);
+    if (!group) throw new Error("no group provided");
+    return group;
   }
 
   function Form({
     form: f1,
     initialValues,
+    values,
     onSubmit,
     onValidSubmit,
     onInvalidSubmit,
+    shouldFocusError,
     ...props
   }) {
-    const f2 = useForm({ initialValues });
+    const f2 = useForm({ initialValues, values });
     const form = f1 || f2;
-    async function handleSubmit(e) {
-      e.preventDefault();
-      setIsSubmitting(form, true);
-      incrementSubmitCount(form);
-      const error = await validate(form);
-      const values = getValues(form);
-      if (error) {
-        setIsSubmitting(form, false);
-        setSubmitSuccessful(form, false);
-        if (onInvalidSubmit) onInvalidSubmit(getErrors(form), values);
-        return;
-      }
-      try {
-        if (onSubmit) await onSubmit(values, e);
-        if (onValidSubmit) onValidSubmit(values, e);
-        setSubmitSuccessful(form, true);
-      } catch {
-        setSubmitSuccessful(form, false);
-      } finally {
-        setIsSubmitting(form, false);
-      }
-    }
-    return /* @__PURE__ */ React__namespace.createElement(FormProvider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: handleSubmit }));
+    const submit = handleSubmit(form, {
+      onSubmit,
+      onValidSubmit,
+      onInvalidSubmit,
+      shouldFocusError
+    });
+    return /* @__PURE__ */ React__namespace.createElement(FormProvider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: submit }));
   }
 
-  const buildInError = /* @__PURE__ */ Symbol("buildInError");
   function setRef(ref, value) {
     if (typeof ref === "function") {
       ref(value);
@@ -549,9 +1481,30 @@
       ref.current = value;
     }
   }
+  function errorIdFromKey(key) {
+    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
+    return id || "field";
+  }
   const Field = React__namespace.forwardRef(
-    ({ validate, eventToValue, initialValue, name, asProps, ...props }, ref) => {
+    ({
+      validate,
+      eventToValue,
+      initialValue,
+      name,
+      asProps,
+      renderError,
+      as,
+      valueToProps,
+      form: formProp,
+      shouldUnregister,
+      rules,
+      validateDebounce,
+      disabled,
+      delayError,
+      ...props
+    }, ref) => {
       const innerRef = React__namespace.useRef(null);
+      const [nativeInvalidCount, setNativeInvalidCount] = React__namespace.useState(0);
       const mergedRef = React__namespace.useCallback(
         (node) => {
           innerRef.current = node;
@@ -559,57 +1512,187 @@
         },
         [ref]
       );
-      const { as, value, valueToProps, onChange, error, ...rest } = useField({
-        ...props,
+      const {
+        value,
+        onChange,
+        onBlur,
+        error,
+        form,
+        name: fieldKey,
+        disabled: isDisabled
+      } = useField({
         name,
+        form: formProp,
         initialValue,
+        shouldUnregister,
+        rules,
+        validateDebounce,
+        delayError,
+        disabled,
         validate: (...params) => {
-          if (innerRef.current?.checkValidity() === false)
-            return buildInError;
+          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);
         }
       });
       const Component = as || "input";
       React__namespace.useEffect(() => {
-        if (!innerRef.current) return;
-        if (error === buildInError) {
-          innerRef.current.setCustomValidity("");
-          innerRef.current.reportValidity();
-          return;
-        }
+        const el = innerRef.current;
+        if (!el || typeof el.setCustomValidity !== "function") return;
         if (typeof error === "string") {
-          innerRef.current.setCustomValidity(error);
-          innerRef.current.reportValidity();
+          el.setCustomValidity(error);
+          el.reportValidity();
+        } else {
+          el.setCustomValidity("");
         }
       }, [error]);
+      React__namespace.useEffect(() => {
+        if (nativeInvalidCount > 0) innerRef.current?.reportValidity();
+      }, [nativeInvalidCount]);
+      React__namespace.useEffect(
+        () => on(
+          form.emitter,
+          "focusError",
+          (key, options) => {
+            if (key !== fieldKey) return;
+            const el = innerRef.current;
+            if (!el || typeof el.focus !== "function") return;
+            el.focus();
+            if (options?.shouldSelect && typeof el.select === "function") {
+              el.select();
+            }
+          }
+        ),
+        [form, fieldKey]
+      );
       const toValue = eventToValue ?? ((e) => e.target.value);
-      return /* @__PURE__ */ React__namespace.createElement(
+      const errorId = errorIdFromKey(fieldKey);
+      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Component,
         {
-          ...rest,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error && renderError ? errorId : void 0,
+          ...props,
+          name: fieldKey,
+          onBlur,
           ...asProps,
           ...valueToProps ? valueToProps(value) : { value },
+          disabled: isDisabled,
           onChange: (e) => onChange(toValue(e)),
           ref: mergedRef
         }
-      );
+      ), error && renderError ? /* @__PURE__ */ React__namespace.createElement("span", { id: errorId, role: "alert" }, renderError(error, errorId)) : null);
     }
   );
   const Checkbox = React__namespace.forwardRef(
-    ({ name, ...props }, ref) => {
-      const { value, onChange, error, ...rest } = useField({ ...props, name });
+    ({
+      name,
+      form,
+      initialValue,
+      shouldUnregister,
+      validate,
+      rules,
+      validateDebounce,
+      disabled,
+      delayError,
+      ...props
+    }, ref) => {
+      const {
+        value,
+        onChange,
+        onBlur,
+        error,
+        name: fieldKey,
+        disabled: isDisabled
+      } = useField({
+        name,
+        form,
+        initialValue,
+        shouldUnregister,
+        validate,
+        rules,
+        validateDebounce,
+        delayError,
+        disabled
+      });
       return /* @__PURE__ */ React__namespace.createElement(
         "input",
         {
-          ...rest,
+          "aria-invalid": error ? true : void 0,
+          ...props,
+          name: fieldKey,
+          onBlur,
           type: "checkbox",
           checked: !!value,
+          disabled: isDisabled,
           onChange: (e) => onChange(e.target.checked),
           ref
         }
       );
     }
   );
+  function toSelectValue(multiple, value) {
+    if (multiple) return Array.isArray(value) ? value : [];
+    return value ?? "";
+  }
+  const Select = React__namespace.forwardRef(
+    ({
+      name,
+      multiple,
+      children,
+      form,
+      initialValue,
+      shouldUnregister,
+      validate,
+      rules,
+      validateDebounce,
+      disabled,
+      delayError,
+      ...props
+    }, ref) => {
+      const {
+        value,
+        onChange,
+        onBlur,
+        error,
+        name: fieldKey,
+        disabled: isDisabled
+      } = useField({
+        name,
+        form,
+        initialValue,
+        shouldUnregister,
+        validate,
+        rules,
+        validateDebounce,
+        delayError,
+        disabled
+      });
+      return /* @__PURE__ */ React__namespace.createElement(
+        "select",
+        {
+          "aria-invalid": error ? true : void 0,
+          ...props,
+          name: fieldKey,
+          onBlur,
+          multiple,
+          value: toSelectValue(multiple, value),
+          disabled: isDisabled,
+          onChange: (e) => onChange(
+            multiple ? Array.from(e.target.selectedOptions, (option) => option.value) : e.target.value
+          ),
+          ref
+        },
+        children
+      );
+    }
+  );
 
   exports.Checkbox = Checkbox;
   exports.CheckboxGroupContext = CheckboxGroupContext;
@@ -618,16 +1701,25 @@
   exports.Form = Form;
   exports.FormContext = FormContext;
   exports.FormProvider = FormProvider;
+  exports.Select = Select;
+  exports.VALIDATION_OUTCOME = VALIDATION_OUTCOME;
   exports.clearErrors = clearErrors;
   exports.createForm = create;
+  exports.createFormContext = createFormContext;
   exports.ensureValidate = ensureValidate;
+  exports.getDirtyFields = getDirtyFields;
   exports.getError = getError;
   exports.getErrorByPath = getErrorByPath;
   exports.getErrors = getErrors;
+  exports.getFieldErrors = getFieldErrors;
+  exports.getFieldErrorsByPath = getFieldErrorsByPath;
+  exports.getFieldState = getFieldState;
   exports.getFirstError = getFirstError;
+  exports.getTouchedFields = getTouchedFields;
   exports.getValue = getValue;
   exports.getValueByPath = getValueByPath;
   exports.getValues = getValues;
+  exports.handleSubmit = handleSubmit;
   exports.hasErrors = hasErrors;
   exports.hasTouched = hasTouched;
   exports.hasTouchedByPath = hasTouchedByPath;
@@ -637,8 +1729,11 @@
   exports.removeField = removeField;
   exports.removeFieldByPath = removeFieldByPath;
   exports.reset = reset;
+  exports.resetField = resetField;
+  exports.setDisabled = setDisabled;
   exports.setError = setError;
   exports.setErrorByPath = setErrorByPath;
+  exports.setFocus = setFocus;
   exports.setInitialValues = setInitialValues;
   exports.setIsSubmitting = setIsSubmitting;
   exports.setSubmitSuccessful = setSubmitSuccessful;
@@ -647,13 +1742,17 @@
   exports.setValidatingByPath = setValidatingByPath;
   exports.setValue = setValue;
   exports.setValueByPath = setValueByPath;
+  exports.subscribe = subscribe;
   exports.trigger = trigger;
   exports.unsetValidatingByPath = unsetValidatingByPath;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;
+  exports.useDirtyFields = useDirtyFields;
   exports.useError = useError;
   exports.useErrorByPath = useErrorByPath;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
+  exports.useFieldErrors = useFieldErrors;
+  exports.useFieldErrorsByPath = useFieldErrorsByPath;
   exports.useForm = useForm;
   exports.useFormContext = useFormContext;
   exports.useHasErrors = useHasErrors;
@@ -662,6 +1761,7 @@
   exports.useSubmitCount = useSubmitCount;
   exports.useTouched = useTouched;
   exports.useTouchedByPath = useTouchedByPath;
+  exports.useTouchedFields = useTouchedFields;
   exports.useValue = useValue;
   exports.useValueByPath = useValueByPath;
   exports.useWatch = useWatch;