react-f0rm 0.1.0 → 0.2.0

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-import { createContext, useContext, useRef, useEffect, useReducer, useMemo, createElement } from 'react';
+import * as React from 'react';
+import { createContext, useContext, useRef, useEffect, useReducer, useMemo, useCallback } from 'react';
 
 function getSet(ee, key) {
   var set = ee.get(key);
@@ -7,14 +8,13 @@ function getSet(ee, key) {
   ee.set(key, newSet);
   return newSet;
 }
-function create() {
+function create$2() {
   return new Map();
 }
-function emit(ee, key) {
+function emit$1(ee, key) {
   for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     args[_key - 2] = arguments[_key];
   }
-
   (ee.get(key) || []).forEach(function (h) {
     return h.apply(void 0, args);
   });
@@ -27,425 +27,567 @@ function on(ee, key, handler) {
   };
 }
 
-function get(values, paths) {
-  try {
-    return paths.reduce((p, values) => values[p], values);
-  } catch (e) {
-    return undefined;
-  }
+function normalizePath(path) {
+  if (Array.isArray(path)) return path;
+  return path.split(/\.|\[/).map((prop) => prop.endsWith("]") ? Number.parseInt(prop, 10) : prop);
 }
-function set(values, paths, value) {
-  if (!paths.length) return values;
-  const path = paths[0];
-
-  if (Number.isNumber(value)) {
+function get(values, path) {
+  return path.reduce((current, p) => {
+    if (current == null) return void 0;
+    return current[p];
+  }, values);
+}
+function set(values, path, value) {
+  if (!path.length) return value;
+  const [prop, ...props] = path;
+  if (typeof prop === "number") {
     const arr = Array.isArray(values) ? values.slice() : [];
-    arr[path] = set(arr[path], paths.slice(1), value);
+    arr[prop] = set(arr[prop], props, value);
     return arr;
   }
-
-  return { ...values,
-    [paths[0]]: set(values[path], paths.slice(1), value)
-  };
-}
-
-/** @typedef { import('../index').TaskCounter } TaskCounter */
-
-/**
- * @return {TaskCounter}
- */
-
-function create$1() {
-  return {
-    emitter: create(),
-    count: 0
-  };
+  return { ...values, [prop]: set(values && values[prop], props, value) };
 }
-/**
- * @param {TaskCounter} counter
- */
-
-function isRunning(counter) {
-  return Boolean(counter.count);
+function isPromise(value) {
+  return value && typeof value.then === "function";
 }
-/**
- * @param {TaskCounter} counter
- * @param {() => boolean} ifReject
- */
-
-function waitUntil(counter, ifReject) {
+function waitUntil(emitter, event, isResolve, isReject) {
   return new Promise((resolve, reject) => {
-    const off = on(counter.emitter, 'done', () => {
-      if (ifReject()) {
+    if (isReject()) return void reject();
+    if (isResolve()) return void resolve();
+    const off = on(emitter, event, () => {
+      if (isReject()) {
         off();
         reject();
         return;
       }
-
-      if (counter.count) return;
+      if (isResolve()) return;
       off();
       resolve();
     });
   });
 }
 
-/** @typedef { import('../index').Form } Form */
-
-/** @typedef { import('../index').Paths } Paths */
-
-/**
- * Create form instance
- * @param {Object} [defaultValues] default values
- * @return {Form}
- */
+function create$1(name) {
+  const value = normalizePath(name);
+  return { value, key: JSON.stringify(value) };
+}
 
-function create$2(defaultValues) {
-  const emitter = create();
+const emit = emit$1;
+function create(options) {
+  const emitter = create$2();
   return {
     emitter,
-    validatingCount: 0,
-    defaultValues,
-    values: new Map(),
-    errors: new Map(),
-    touched: new Set()
+    revalidateOnChange: true,
+    ...options,
+    initialValues: options?.initialValues ?? {},
+    values: /* @__PURE__ */ new Map(),
+    errors: /* @__PURE__ */ new Map(),
+    touched: /* @__PURE__ */ new Set(),
+    validators: /* @__PURE__ */ new Map(),
+    validating: /* @__PURE__ */ new Set(),
+    isSubmitting: false,
+    submitCount: 0,
+    isSubmitSuccessful: void 0
   };
 }
-/**
- * Get form values
- * @param {Form} form
- */
-
-function getValues({
-  defaultValues,
-  values
-}) {
-  return values.keys().reduce((k, v) => set(v, JSON.parse(k), values.get(k)), defaultValues);
+function getValues(form) {
+  return Array.from(form.values.keys()).reduce(
+    (v, k) => set(v, JSON.parse(k), form.values.get(k)),
+    form.initialValues
+  );
 }
-/**
- * Get field value
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function getValue({
-  defaultValues,
-  values
-}, paths) {
-  const key = JSON.stringify(paths);
-  if (values.has(key)) return values.get(key);
-  return get(defaultValues, paths);
-}
-/**
- * Set field value
- * @param {Form} form
- * @param {Paths} paths
- * @param {any} value
- */
-
-function setValue({
-  emitter,
-  values
-}, paths, value) {
-  const key = JSON.stringify(paths);
-  values.set(key, value);
-  emit(emitter, 'change');
-}
-/**
- * Get field error
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function getError({
-  errors
-}, paths) {
-  return errors.get(JSON.stringify(paths));
-}
-/**
- * Get all errors
- * @param {Form} form
- */
-
-function getErrors({
-  errors
-}) {
+function getValue(form, name) {
+  return getValueByPath(form, create$1(name));
+}
+function getValueByPath({ initialValues, values }, path) {
+  if (values.has(path.key)) return values.get(path.key);
+  return get(initialValues, path.value);
+}
+function setValue(form, name, value) {
+  setValueByPath(form, create$1(name), value);
+}
+function setValueByPath({ emitter, values }, path, value) {
+  values.set(path.key, value);
+  emit(emitter, "change", path);
+}
+function getError(form, name) {
+  return getErrorByPath(form, create$1(name));
+}
+function getErrorByPath({ errors }, path) {
+  return errors.get(path.key);
+}
+function getErrors({ errors }) {
   return Array.from(errors.values());
 }
-/**
- * Set field error
- * @param {Form} Form
- * @param {Paths} paths
- * @param {string | undefined} error
- */
-
-function setError({
-  emitter,
-  errors
-}, paths, error) {
-  errors.set(JSON.stringify(paths), error);
-  emit(emitter, 'errors');
-}
-/**
- * Clear errors
- * @param {Form} form
- */
-
-function clearErrors({
-  emitter,
-  errors
-}) {
+function getFirstError({ errors }) {
+  return errors.values().next().value;
+}
+function unsetValidatingByPath({ emitter, validating }, { key }) {
+  validating.delete(key);
+  emit(emitter, "validating");
+}
+function setValidatingByPath({ emitter, validating }, { key }) {
+  validating.add(key);
+  emit(emitter, "validating");
+}
+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);
+  }
+  emit(emitter, "errors");
+}
+function clearErrors({ emitter, errors }) {
   errors.clear();
-  emit(emitter, 'errors');
+  emit(emitter, "errors");
 }
-/**
- * Set field touched state
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function setTouched({
-  emitter,
-  touched
-}, paths) {
-  touched.add(JSON.stringify(paths));
-  emit(emitter, 'touched');
-}
-/**
- * Set field touched state
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function hasTouched({
-  touched
-}, paths) {
-  return touched.has(JSON.stringify(paths));
-}
-/**
- * Is dirty
- * @param {Form} form
- */
-
-function isDirty({
-  touched
-}) {
+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 hasTouched(form, name) {
+  return hasTouchedByPath(form, create$1(name));
+}
+function hasTouchedByPath({ touched }, path) {
+  return touched.has(path.key);
+}
+function isDirty({ initialValues, values }) {
+  for (const [key, value] of values) {
+    const path = JSON.parse(key);
+    if (get(initialValues, path) !== value) return true;
+  }
+  return false;
+}
+function isTouched({ touched }) {
   return touched.size > 0;
 }
-/**
- * Remove field
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function removeField(form, paths) {
-  const key = JSON.stringify(paths);
-  const {
-    emitter,
-    values,
-    touched,
-    errors
-  } = form;
+function removeField(form, name) {
+  removeFieldByPath(form, create$1(name));
+}
+function removeFieldByPath(form, { key }) {
+  const { emitter, values, touched, errors, validating } = form;
   values.delete(key);
   touched.delete(key);
   errors.delete(key);
-  emit(emitter, 'change');
-  emit(emitter, 'touched');
-  emit(emitter, 'errors');
-}
-/**
- * Reset form
- * @param {Form} form
- * @param {Object} [defaultValues]
- */
-
-function reset(form, defaultValues) {
-  form.defaultValues = defaultValues;
+  validating.delete(key);
+  emit(emitter, "change");
+  emit(emitter, "touched");
+  emit(emitter, "errors");
+  emit(emitter, "validating");
+}
+function setInitialValues(form, initialValues) {
+  if (form.initialValues === initialValues) return;
+  form.initialValues = initialValues;
+  form.values.clear();
+  emit(form.emitter, "change");
+}
+function reset(form, initialValues) {
+  form.initialValues = initialValues;
   clearErrors(form);
-  const {
-    emitter,
-    touched
-  } = form;
+  const { emitter, touched, values } = form;
+  values.clear();
   touched.clear();
-  emit(emitter, 'change');
-  emit(emitter, 'touched');
-  emit(emitter, 'reset');
+  emit(emitter, "change");
+  emit(emitter, "touched");
+  emit(emitter, "reset");
 }
-/**
- * @param {Form} form
- */
-
-function hasErrors({
-  errors
-}) {
+function hasErrors({ errors }) {
   return errors.size > 0;
 }
-/**
- * Validate all fields.
- * @param {Form} form
- * @return {Promise} resolve if no error; reject and stop validate if has an error;
- */
-
-function validate(form) {
-  const token = create$1();
-  emit(form.emitter, 'validate', token);
-  if (hasErrors(form)) return Promise.reject();
-  if (!isRunning(token)) return Promise.resolve();
-  return waitUntil(token, () => hasErrors(form));
+function trigger(form) {
+  form.validators.forEach((validator) => validator());
+}
+async function ensureValidate(form) {
+  form.validators.forEach((validator) => validator());
+  await waitUntil(
+    form.emitter,
+    "validating",
+    () => !form.validating.size,
+    () => hasErrors(form)
+  ).catch(() => {
+    throw new Error(getFirstError(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));
+    }
+  }
+}
+async function validate(form) {
+  return ensureValidate(form).catch((e) => e.message);
+}
+function setIsSubmitting(form, value) {
+  form.isSubmitting = value;
+  emit(form.emitter, "submitting");
+}
+function incrementSubmitCount(form) {
+  form.submitCount++;
+  emit(form.emitter, "submitCount");
+}
+function setSubmitSuccessful(form, value) {
+  form.isSubmitSuccessful = value;
+  emit(form.emitter, "submitSuccessful");
 }
 
-const FormContext = /*#__PURE__*/createContext();
+const FormContext = createContext(null);
 const FormProvider = FormContext.Provider;
 function useFormContext() {
   const form = useContext(FormContext);
-  if (!form) throw new Error('no form provided');
+  if (!form) throw new Error("no form provided");
   return form;
 }
+const CheckboxGroupContext = createContext(null);
+const CheckboxGroupProvider = CheckboxGroupContext.Provider;
+function useCheckboxGroupContext() {
+  const group = useContext(CheckboxGroupContext);
+  if (!group) throw new Error("no group provided");
+  return group;
+}
 
-function useForm(defaultValues) {
-  const ref = useRef();
-  const form = ref.current = ref.current || create$2();
+function useForm(options) {
+  const ref = useRef(null);
+  const form = ref.current = ref.current || create(options);
+  const initialValues = options && options.initialValues;
   useEffect(() => {
-    form.defaultValues = defaultValues;
-    emit(form.emitter, 'change');
-  }, [defaultValues]);
+    setInitialValues(form, initialValues);
+  }, [initialValues]);
   return form;
 }
-/**
- * @param {EventEmitter} emitter
- * @param {string} event
- * @param {() => any} getter
- */
-
 function useWatch(emitter, event, getter) {
-  const [value, syncValue] = useReducer(getter, getter);
+  const [value, syncValue] = useReducer(getter, void 0, getter);
   useEffect(() => on(emitter, event, syncValue), [emitter, event]);
   return value;
 }
-/**
- * Get field value state
- * @param {Form} form
- * @param {Paths} paths
- */
-
-function useValue(form, paths) {
-  return useWatch(form.emitter, 'change', getValue.bind(null, form, paths));
+function useValue(form, name) {
+  return useValueByPath(form, create$1(name));
+}
+function useValueByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "change",
+    getValueByPath.bind(null, form, path)
+  );
+}
+function useTouched(form, name) {
+  return useTouchedByPath(form, create$1(name));
+}
+function useTouchedByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "touched",
+    hasTouchedByPath.bind(null, form, path)
+  );
 }
-function useTouched(form, paths) {
-  return useWatch(form.emitter, 'touched', hasTouched.bind(null, form, paths));
+function useError(form, name) {
+  return useErrorByPath(form, create$1(name));
 }
-function useError(form, paths) {
-  return useWatch(form.emitter, 'errors', getError.bind(null, form, paths));
+function useErrorByPath(form, path) {
+  return useWatch(
+    form.emitter,
+    "errors",
+    getErrorByPath.bind(null, form, path)
+  );
 }
 function useIsDirty(form) {
-  return useWatch(form.emitter, 'touched', isDirty.bind(null, form));
+  return useWatch(form.emitter, "touched", isDirty.bind(null, form));
 }
 function useHasErrors(form) {
-  return useWatch(form.emitter, 'errors', hasErrors.bind(null, form));
+  return useWatch(form.emitter, "errors", hasErrors.bind(null, form));
+}
+function useIsSubmitting(form) {
+  return useWatch(form.emitter, "submitting", () => form.isSubmitting);
+}
+function useSubmitCount(form) {
+  return useWatch(form.emitter, "submitCount", () => form.submitCount);
 }
 
-function useField({
-  name,
-  defaultValue,
-  validate
-}) {
-  const form = useFormContext();
-  const lockRef = useRef();
-  const validateRef = useRef();
-  validateRef.current = validate;
-  const nameKey = JSON.stringify(name);
-  const handlers = useMemo(() => {
-    setValue(form, name, defaultValue);
-
-    const onChange = v => setValue(form, name, v);
+function usePath(name) {
+  const path = useMemo(() => create$1(normalizePath(name)), [name]);
+  return useMemo(() => path, [path.key]);
+}
 
-    const onBlur = () => {
-      setTouched(form, name);
-      if (!validateRef.current) return;
-      const result = validateRef.current(getValue(form, name));
-      if (!result) return;
+function useStage(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+function useStageFn(fn) {
+  const ref = useStage(fn);
+  return useCallback(
+    (...params) => ref.current(...params),
+    []
+  );
+}
 
-      if (typeof result === 'string') {
-        setError(form, name, result);
+function useValidate(validate, path) {
+  const form = useFormContext();
+  const lockRef = useRef(null);
+  const validateRef = useRef(validate);
+  validateRef.current = validate;
+  useEffect(() => {
+    const validator = () => {
+      const fn = validateRef.current;
+      if (!fn) return;
+      const result = fn(getValueByPath(form, path), { form, path });
+      if (!isPromise(result)) {
+        setErrorByPath(form, path, result);
         return;
       }
-
       const lock = lockRef.current = {};
-      result.then(error => {
-        if (lock === lockRef.current && error) setError(form, name, error);
-      }).finally(() => lockRef.current = null);
+      setValidatingByPath(form, path);
+      result.then((error) => {
+        if (lock === lockRef.current) {
+          setErrorByPath(form, path, error);
+        }
+      }).finally(() => {
+        if (lock === lockRef.current) {
+          unsetValidatingByPath(form, path);
+          lockRef.current = null;
+        }
+      });
     };
-
-    return {
-      onChange,
-      onBlur
+    form.validators.set(path.key, validator);
+    return () => {
+      form.validators.delete(path.key);
     };
-  }, [nameKey, form]);
-  useEffect(() => () => {
-    removeField(form, name);
-  }, [nameKey, form]);
-  const value = useValue(form, name);
-  return {
-    value,
-    ...handlers
-  };
+  }, [form, path.key]);
+  return useStageFn(() => form.validators.get(path.key)?.());
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+function useField({
+  form: f1,
+  name,
+  initialValue,
+  shouldUnregister,
+  validate,
+  ...rest
+}) {
+  const f2 = useFormContext();
+  const form = f1 || f2;
+  const path = usePath(name);
+  const validator = useValidate(validate, path);
+  useMemo(() => {
+    if (initialValue !== void 0) setValueByPath(form, path, initialValue);
+  }, [form, path]);
+  const error = useErrorByPath(form, path);
+  const value = useValueByPath(form, path);
+  const onChange = useStageFn((v) => {
+    setValueByPath(form, path, v);
+    if (form.validateOnChange || form.revalidateOnChange && error && error !== void 0)
+      validator();
+  });
+  const onBlur = useStageFn(() => {
+    setTouchedByPath(form, path);
+    if (form.validateOnBlur || form.revalidateOnBlur && error !== void 0)
+      validator();
+  });
+  useEffect(
+    () => () => {
+      if (shouldUnregister !== false) {
+        removeFieldByPath(form, path);
       }
+    },
+    [path, form, shouldUnregister]
+  );
+  return { ...rest, value, error, onChange, onBlur, name: path.key };
+}
+
+let idCounter = 0;
+function generateId() {
+  return `_${++idCounter}`;
+}
+function useFieldArray(options) {
+  const f2 = useFormContext();
+  const form = options.form || f2;
+  const path = usePath(options.name);
+  const idsRef = useRef([]);
+  const getArray = useCallback(
+    () => getValueByPath(form, path) || [],
+    [form, path]
+  );
+  const setArray = useCallback(
+    (arr) => {
+      setValueByPath(form, path, arr);
+    },
+    [form, path]
+  );
+  const computeFields = useCallback(() => {
+    const arr = getArray();
+    while (idsRef.current.length < arr.length) {
+      idsRef.current.push(generateId());
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
+    while (idsRef.current.length > arr.length) {
+      idsRef.current.pop();
+    }
+    return idsRef.current.map((id, index) => ({ id, index }));
+  }, [getArray]);
+  const [fields, syncFields] = useReducer(
+    computeFields,
+    void 0,
+    computeFields
+  );
+  useEffect(() => on(form.emitter, "change", syncFields), [form.emitter]);
+  const append = useStageFn((value) => {
+    const arr = getArray();
+    idsRef.current.push(generateId());
+    setArray([...arr, value]);
+  });
+  const prepend = useStageFn((value) => {
+    const arr = getArray();
+    idsRef.current.unshift(generateId());
+    setArray([value, ...arr]);
+  });
+  const insert = useStageFn((index, value) => {
+    const arr = getArray();
+    idsRef.current.splice(index, 0, generateId());
+    const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
+    setArray(newArr);
+  });
+  const remove = useStageFn((index) => {
+    const arr = getArray();
+    idsRef.current.splice(index, 1);
+    const newArr = arr.filter((_, i) => i !== index);
+    setArray(newArr);
+  });
+  const swap = useStageFn((from, to) => {
+    const arr = getArray();
+    [idsRef.current[from], idsRef.current[to]] = [
+      idsRef.current[to],
+      idsRef.current[from]
+    ];
+    const newArr = [...arr];
+    [newArr[from], newArr[to]] = [newArr[to], newArr[from]];
+    setArray(newArr);
+  });
+  const move = useStageFn((from, to) => {
+    const arr = getArray();
+    const [id] = idsRef.current.splice(from, 1);
+    idsRef.current.splice(to, 0, id);
+    const newArr = [...arr];
+    const [item] = newArr.splice(from, 1);
+    newArr.splice(to, 0, item);
+    setArray(newArr);
+  });
+  return { fields, append, prepend, insert, remove, swap, move };
 }
 
-/** @typedef { import('../index').FormProps } FormProps */
-
-/**
- * Form
- * @param {FormProps} props
- */
-
 function Form({
-  form: f,
+  form: f1,
+  initialValues,
   onSubmit,
   onValidSubmit,
   onInvalidSubmit,
   ...props
 }) {
-  const form = useMemo(() => f || create$2(), [f]);
-
-  function handleSubmit(e) {
-    const task = validate(form);
-    if (!(onSubmit || onValidSubmit || onInvalidSubmit)) return;
+  const f2 = useForm({ initialValues });
+  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 (onSubmit) onSubmit(values, e);
-    task.then(valid => valid ? onValidSubmit && onValidSubmit(values, e) : onInvalidSubmit && onInvalidSubmit(getErrors(form), values));
+    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__*/createElement(FormProvider, {
-    value: form
-  }, /*#__PURE__*/createElement("form", _extends({}, props, {
-    onSubmit: handleSubmit
-  })));
+  return /* @__PURE__ */ React.createElement(FormProvider, { value: form }, /* @__PURE__ */ React.createElement("form", { ...props, noValidate: true, onSubmit: handleSubmit }));
 }
 
-function Field({
-  render,
-  ...props
-}) {
-  const field = useField(props);
-  return render(field);
+const buildInError = /* @__PURE__ */ Symbol("buildInError");
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
 }
+const Field = React.forwardRef(
+  ({ validate, eventToValue, initialValue, name, asProps, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        innerRef.current = node;
+        setRef(ref, node);
+      },
+      [ref]
+    );
+    const { as, value, valueToProps, onChange, error, ...rest } = useField({
+      ...props,
+      name,
+      initialValue,
+      validate: (...params) => {
+        if (innerRef.current?.checkValidity() === false)
+          return buildInError;
+        if (validate) return validate(...params);
+      }
+    });
+    const Component = as || "input";
+    React.useEffect(() => {
+      if (!innerRef.current) return;
+      if (error === buildInError) {
+        innerRef.current.setCustomValidity("");
+        innerRef.current.reportValidity();
+        return;
+      }
+      if (typeof error === "string") {
+        innerRef.current.setCustomValidity(error);
+        innerRef.current.reportValidity();
+      }
+    }, [error]);
+    const toValue = eventToValue ?? ((e) => e.target.value);
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ...rest,
+        ...asProps,
+        ...valueToProps ? valueToProps(value) : { value },
+        onChange: (e) => onChange(toValue(e)),
+        ref: mergedRef
+      }
+    );
+  }
+);
+const Checkbox = React.forwardRef(
+  ({ name, ...props }, ref) => {
+    const { value, onChange, error, ...rest } = useField({ ...props, name });
+    return /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ...rest,
+        type: "checkbox",
+        checked: !!value,
+        onChange: (e) => onChange(e.target.checked),
+        ref
+      }
+    );
+  }
+);
 
-export { Field, Form, FormContext, FormProvider, clearErrors, create$2 as createForm, getError, getErrors, getValue, getValues, hasErrors, hasTouched, isDirty, removeField, reset, setError, setTouched, setValue, useError, useField, useForm, useFormContext, useHasErrors, useIsDirty, useTouched, useValue, useWatch, validate };
+export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, Form, FormContext, FormProvider, clearErrors, create as createForm, ensureValidate, getError, getErrorByPath, getErrors, getFirstError, getValue, getValueByPath, getValues, hasErrors, hasTouched, hasTouchedByPath, incrementSubmitCount, isDirty, isTouched, removeField, removeFieldByPath, reset, setError, setErrorByPath, setInitialValues, setIsSubmitting, setSubmitSuccessful, setTouched, setTouchedByPath, setValidatingByPath, setValue, setValueByPath, trigger, unsetValidatingByPath, useCheckboxGroupContext, useError, useErrorByPath, useField, useFieldArray, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useValue, useValueByPath, useWatch, validate };
 //# sourceMappingURL=index.esm.js.map