react-f0rm 0.2.2 → 0.4.0

package/dist/index.cjs.js

@@ -47,9 +47,56 @@ function on(ee, key, handler) {
   };
 }
 
+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) => {
@@ -57,6 +104,24 @@ function get(values, path) {
     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;
@@ -67,6 +132,35 @@ function set(values, path, value) {
   }
   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";
 }
@@ -80,7 +174,7 @@ function waitUntil(emitter, event, isResolve, isReject) {
         reject();
         return;
       }
-      if (isResolve()) return;
+      if (!isResolve()) return;
       off();
       resolve();
     });
@@ -93,85 +187,148 @@ function create$1(name) {
 }
 
 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));
@@ -179,12 +336,53 @@ function hasTouched(form, name) {
 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;
@@ -192,38 +390,154 @@ function isTouched({ touched }) {
 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());
@@ -237,13 +551,8 @@ async function ensureValidate(form) {
   });
   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) {
@@ -261,68 +570,510 @@ function setSubmitSuccessful(form, value) {
   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));
@@ -333,6 +1084,31 @@ function useIsSubmitting(form) {
 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]);
@@ -348,70 +1124,174 @@ function useStageFn(fn) {
   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(
@@ -422,16 +1302,30 @@ function useField({
     },
     [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(
@@ -459,7 +1353,10 @@ function useFieldArray(options) {
     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());
@@ -501,45 +1398,88 @@ function useFieldArray(options) {
     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 {
+    context: Context,
+    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,
+  context,
   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
+  });
+  const { Provider } = context ?? FormContext;
+  return /* @__PURE__ */ React__namespace.createElement(Provider, { 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);
@@ -547,9 +1487,30 @@ function setRef(ref, value) {
     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;
@@ -557,57 +1518,187 @@ const Field = React__namespace.forwardRef(
       },
       [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;
@@ -616,16 +1707,25 @@ exports.Field = Field;
 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;
@@ -635,8 +1735,11 @@ exports.isTouched = isTouched;
 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;
@@ -645,13 +1748,17 @@ exports.setTouchedByPath = setTouchedByPath;
 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;
@@ -660,6 +1767,7 @@ exports.useIsSubmitting = useIsSubmitting;
 exports.useSubmitCount = useSubmitCount;
 exports.useTouched = useTouched;
 exports.useTouchedByPath = useTouchedByPath;
+exports.useTouchedFields = useTouchedFields;
 exports.useValue = useValue;
 exports.useValueByPath = useValueByPath;
 exports.useWatch = useWatch;