@lucas-barake/effect-form-react 0.1.0

package/dist/dts/FormReact.d.ts

@@ -0,0 +1,177 @@
+import * as Atom from "@effect-atom/atom/Atom";
+import type * as Result from "@effect-atom/atom/Result";
+import { Form, FormAtoms, Mode } from "@lucas-barake/effect-form";
+import type * as Effect from "effect/Effect";
+import * as Option from "effect/Option";
+import type * as Schema from "effect/Schema";
+import * as React from "react";
+/**
+ * Props passed to field components.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export interface FieldComponentProps<S extends Schema.Schema.Any> {
+    readonly value: Schema.Schema.Encoded<S>;
+    readonly onChange: (value: Schema.Schema.Encoded<S>) => void;
+    readonly onBlur: () => void;
+    readonly error: Option.Option<string>;
+    readonly isTouched: boolean;
+    readonly isValidating: boolean;
+    readonly isDirty: boolean;
+}
+/**
+ * Extracts field component map for array item schemas.
+ * - For Struct schemas: returns a map of field names to components
+ * - For primitive schemas: returns a single component
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export type ArrayItemComponentMap<S extends Schema.Schema.Any> = S extends Schema.Struct<infer Fields> ? {
+    readonly [K in keyof Fields]: Fields[K] extends Schema.Schema.Any ? React.FC<FieldComponentProps<Fields[K]>> : never;
+} : React.FC<FieldComponentProps<S>>;
+/**
+ * Maps field names to their React components.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export type FieldComponentMap<TFields extends Form.FieldsRecord> = {
+    readonly [K in keyof TFields]: TFields[K] extends Form.FieldDef<any, infer S> ? React.FC<FieldComponentProps<S>> : TFields[K] extends Form.ArrayFieldDef<any, infer S> ? ArrayItemComponentMap<S> : never;
+};
+/**
+ * Maps field names to their type-safe Field references for setValue operations.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export type FieldRefs<TFields extends Form.FieldsRecord> = FormAtoms.FieldRefs<TFields>;
+/**
+ * Operations available for array fields.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export interface ArrayFieldOperations<TItem> {
+    readonly items: ReadonlyArray<TItem>;
+    readonly append: (value?: TItem) => void;
+    readonly remove: (index: number) => void;
+    readonly swap: (indexA: number, indexB: number) => void;
+    readonly move: (from: number, to: number) => void;
+}
+/**
+ * State exposed to form.Subscribe render prop.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export interface SubscribeState<TFields extends Form.FieldsRecord> {
+    readonly values: Form.EncodedFromFields<TFields>;
+    readonly isDirty: boolean;
+    readonly submitResult: Result.Result<unknown, unknown>;
+    readonly submit: () => void;
+    readonly reset: () => void;
+    readonly setValue: <S>(field: Form.Field<S>, update: S | ((prev: S) => S)) => void;
+    readonly setValues: (values: Form.EncodedFromFields<TFields>) => void;
+}
+/**
+ * The result of building a form, containing all components and utilities needed
+ * for form rendering and submission.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export type BuiltForm<TFields extends Form.FieldsRecord, R> = {
+    readonly atom: Atom.Writable<Option.Option<Form.FormState<TFields>>, Option.Option<Form.FormState<TFields>>>;
+    readonly schema: Schema.Schema<Form.DecodedFromFields<TFields>, Form.EncodedFromFields<TFields>, R>;
+    readonly fields: FieldRefs<TFields>;
+    readonly Form: React.FC<{
+        readonly defaultValues: Form.EncodedFromFields<TFields>;
+        readonly onSubmit: Atom.AtomResultFn<Form.DecodedFromFields<TFields>, unknown, unknown>;
+        readonly children: React.ReactNode;
+    }>;
+    readonly Subscribe: React.FC<{
+        readonly children: (state: SubscribeState<TFields>) => React.ReactNode;
+    }>;
+    readonly useForm: () => {
+        readonly submit: () => void;
+        readonly reset: () => void;
+        readonly isDirty: boolean;
+        readonly submitResult: Result.Result<unknown, unknown>;
+        readonly values: Form.EncodedFromFields<TFields>;
+        readonly setValue: <S>(field: Form.Field<S>, update: S | ((prev: S) => S)) => void;
+        readonly setValues: (values: Form.EncodedFromFields<TFields>) => void;
+    };
+    readonly submit: <A, E>(fn: (values: Form.DecodedFromFields<TFields>, get: Atom.FnContext) => Effect.Effect<A, E, R>) => Atom.AtomResultFn<Form.DecodedFromFields<TFields>, A, E>;
+} & FieldComponents<TFields>;
+type FieldComponents<TFields extends Form.FieldsRecord> = {
+    readonly [K in keyof TFields]: TFields[K] extends Form.FieldDef<any, any> ? React.FC : TFields[K] extends Form.ArrayFieldDef<any, infer S> ? ArrayFieldComponent<S> : never;
+};
+type ArrayFieldComponent<S extends Schema.Schema.Any> = React.FC<{
+    readonly children: (ops: ArrayFieldOperations<Schema.Schema.Encoded<S>>) => React.ReactNode;
+}> & {
+    readonly Item: React.FC<{
+        readonly index: number;
+        readonly children: React.ReactNode | ((props: {
+            readonly remove: () => void;
+        }) => React.ReactNode);
+    }>;
+} & (S extends Schema.Struct<infer Fields> ? {
+    readonly [K in keyof Fields]: React.FC;
+} : unknown);
+/**
+ * Builds a React form from a FormBuilder.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from "@lucas-barake/effect-form"
+ * import { FormReact } from "@lucas-barake/effect-form-react"
+ * import * as Atom from "@effect-atom/atom/Atom"
+ * import * as Schema from "effect/Schema"
+ * import * as Effect from "effect/Effect"
+ * import * as Layer from "effect/Layer"
+ *
+ * const runtime = Atom.runtime(Layer.empty)
+ *
+ * const loginForm = Form.empty
+ *   .addField("email", Schema.String)
+ *   .addField("password", Schema.String)
+ *
+ * const form = FormReact.build(loginForm, {
+ *   runtime,
+ *   fields: { email: TextInput, password: PasswordInput },
+ * })
+ *
+ * function LoginDialog({ onClose }) {
+ *   const handleSubmit = form.submit((values) =>
+ *     Effect.gen(function* () {
+ *       yield* saveUser(values)
+ *       onClose()
+ *     })
+ *   )
+ *
+ *   return (
+ *     <form.Form defaultValues={{ email: "", password: "" }} onSubmit={handleSubmit}>
+ *       <form.email />
+ *       <form.password />
+ *       <form.Subscribe>
+ *         {({ isDirty, submit }) => (
+ *           <button onClick={submit} disabled={!isDirty}>Login</button>
+ *         )}
+ *       </form.Subscribe>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ *
+ * @since 1.0.0
+ * @category Constructors
+ */
+export declare const build: <TFields extends Form.FieldsRecord, R, ER = never>(self: Form.FormBuilder<TFields, R>, options: {
+    readonly runtime: Atom.AtomRuntime<R, ER>;
+    readonly fields: FieldComponentMap<TFields>;
+    readonly mode?: Mode.FormMode;
+}) => BuiltForm<TFields, R>;
+export {};
+//# sourceMappingURL=FormReact.d.ts.map

package/dist/dts/FormReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormReact.d.ts","sourceRoot":"","sources":["../../src/FormReact.tsx"],"names":[],"mappings":"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"}

package/dist/dts/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":""}

package/dist/dts/internal/use-debounced.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-debounced.d.ts.map

package/dist/dts/internal/use-debounced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced.d.ts","sourceRoot":"","sources":["../../../src/internal/use-debounced.ts"],"names":[],"mappings":""}

package/dist/esm/FormReact.js

@@ -0,0 +1,449 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @since 1.0.0
+ */
+import { RegistryContext, useAtom, useAtomSet, useAtomSubscribe, useAtomValue } from "@effect-atom/atom-react";
+import * as Atom from "@effect-atom/atom/Atom";
+import { Form, FormAtoms, Mode, Validation } from "@lucas-barake/effect-form";
+import { getNestedValue, isPathOrParentDirty, schemaPathToFieldPath } from "@lucas-barake/effect-form/internal/path";
+import * as Cause from "effect/Cause";
+import * as Option from "effect/Option";
+import * as ParseResult from "effect/ParseResult";
+import * as AST from "effect/SchemaAST";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { useDebounced } from "./internal/use-debounced.js";
+const ArrayItemContext = /*#__PURE__*/createContext(null);
+const AutoSubmitContext = /*#__PURE__*/createContext(null);
+const makeFieldComponent = (fieldKey, fieldDef, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, Component) => {
+  const FieldComponent = React.memo(() => {
+    const arrayCtx = useContext(ArrayItemContext);
+    const autoSubmitOnBlur = useContext(AutoSubmitContext);
+    const fieldPath = arrayCtx ? `${arrayCtx.parentPath}.${fieldKey}` : fieldKey;
+    const {
+      crossFieldErrorAtom,
+      touchedAtom,
+      valueAtom
+    } = React.useMemo(() => getOrCreateFieldAtoms(fieldPath), [fieldPath]);
+    const [value, setValue] = useAtom(valueAtom);
+    const [isTouched, setTouched] = useAtom(touchedAtom);
+    const crossFieldError = useAtomValue(crossFieldErrorAtom);
+    const setCrossFieldErrors = useAtomSet(crossFieldErrorsAtom);
+    const submitCount = useAtomValue(submitCountAtom);
+    const validationAtom = React.useMemo(() => getOrCreateValidationAtom(fieldPath, fieldDef.schema), [fieldPath]);
+    const validationResult = useAtomValue(validationAtom);
+    const validateImmediate = useAtomSet(validationAtom);
+    const shouldDebounceValidation = parsedMode.validation === "onChange" && parsedMode.debounce !== null && !parsedMode.autoSubmit;
+    const validate = useDebounced(validateImmediate, shouldDebounceValidation ? parsedMode.debounce : null);
+    const prevValueRef = React.useRef(value);
+    React.useEffect(() => {
+      if (prevValueRef.current === value) {
+        return;
+      }
+      prevValueRef.current = value;
+      const shouldValidate = parsedMode.validation === "onChange" || parsedMode.validation === "onBlur" && isTouched;
+      if (shouldValidate) {
+        validate(value);
+      }
+    }, [value, isTouched, validate]);
+    const perFieldError = React.useMemo(() => {
+      if (validationResult._tag === "Failure") {
+        const parseError = Cause.failureOption(validationResult.cause);
+        if (Option.isSome(parseError) && ParseResult.isParseError(parseError.value)) {
+          return Validation.extractFirstError(parseError.value);
+        }
+      }
+      return Option.none();
+    }, [validationResult]);
+    const validationError = Option.isSome(perFieldError) ? perFieldError : crossFieldError;
+    const onChange = React.useCallback(newValue => {
+      setValue(newValue);
+      setCrossFieldErrors(prev => {
+        if (prev.has(fieldPath)) {
+          const next = new Map(prev);
+          next.delete(fieldPath);
+          return next;
+        }
+        return prev;
+      });
+      if (parsedMode.validation === "onChange") {
+        validate(newValue);
+      }
+    }, [fieldPath, setValue, setCrossFieldErrors, validate]);
+    const onBlur = React.useCallback(() => {
+      setTouched(true);
+      if (parsedMode.validation === "onBlur") {
+        validate(value);
+      }
+      autoSubmitOnBlur?.();
+    }, [setTouched, validate, value, autoSubmitOnBlur]);
+    const dirtyFields = useAtomValue(dirtyFieldsAtom);
+    const isDirty = React.useMemo(() => isPathOrParentDirty(dirtyFields, fieldPath), [dirtyFields, fieldPath]);
+    const isValidating = validationResult.waiting;
+    const shouldShowError = isTouched || submitCount > 0;
+    return _jsx(Component, {
+      value: value,
+      onChange: onChange,
+      onBlur: onBlur,
+      error: shouldShowError ? validationError : Option.none(),
+      isTouched: isTouched,
+      isValidating: isValidating,
+      isDirty: isDirty
+    });
+  });
+  return FieldComponent;
+};
+const makeArrayFieldComponent = (fieldKey, def, stateAtom, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, operations, componentMap) => {
+  const isStructSchema = AST.isTypeLiteral(def.itemSchema.ast);
+  const ArrayWrapper = ({
+    children
+  }) => {
+    const arrayCtx = useContext(ArrayItemContext);
+    const [formStateOption, setFormState] = useAtom(stateAtom);
+    const formState = Option.getOrThrow(formStateOption);
+    const fieldPath = arrayCtx ? `${arrayCtx.parentPath}.${fieldKey}` : fieldKey;
+    const items = React.useMemo(() => getNestedValue(formState.values, fieldPath) ?? [], [formState.values, fieldPath]);
+    const append = React.useCallback(value => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.appendArrayItem(prev.value, fieldPath, def.itemSchema, value));
+      });
+    }, [fieldPath, setFormState]);
+    const remove = React.useCallback(index => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.removeArrayItem(prev.value, fieldPath, index));
+      });
+    }, [fieldPath, setFormState]);
+    const swap = React.useCallback((indexA, indexB) => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.swapArrayItems(prev.value, fieldPath, indexA, indexB));
+      });
+    }, [fieldPath, setFormState]);
+    const move = React.useCallback((from, to) => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.moveArrayItem(prev.value, fieldPath, from, to));
+      });
+    }, [fieldPath, setFormState]);
+    return _jsx(_Fragment, {
+      children: children({
+        items,
+        append,
+        remove,
+        swap,
+        move
+      })
+    });
+  };
+  const ItemWrapper = ({
+    children,
+    index
+  }) => {
+    const arrayCtx = useContext(ArrayItemContext);
+    const setFormState = useAtomSet(stateAtom);
+    const parentPath = arrayCtx ? `${arrayCtx.parentPath}.${fieldKey}` : fieldKey;
+    const itemPath = `${parentPath}[${index}]`;
+    const remove = React.useCallback(() => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.removeArrayItem(prev.value, parentPath, index));
+      });
+    }, [parentPath, index, setFormState]);
+    return _jsx(ArrayItemContext.Provider, {
+      value: {
+        index,
+        parentPath: itemPath
+      },
+      children: typeof children === "function" ? children({
+        remove
+      }) : children
+    });
+  };
+  const itemFieldComponents = {};
+  if (isStructSchema) {
+    const ast = def.itemSchema.ast;
+    for (const prop of ast.propertySignatures) {
+      const itemKey = prop.name;
+      const itemSchema = {
+        ast: prop.type
+      };
+      const itemDef = Form.makeField(itemKey, itemSchema);
+      const itemComponent = componentMap[itemKey];
+      itemFieldComponents[itemKey] = makeFieldComponent(itemKey, itemDef, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, itemComponent);
+    }
+  }
+  const properties = {
+    Item: ItemWrapper,
+    ...itemFieldComponents
+  };
+  return new Proxy(ArrayWrapper, {
+    get(target, prop) {
+      if (prop in properties) {
+        return properties[prop];
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+const makeFieldComponents = (fields, stateAtom, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, operations, componentMap) => {
+  const components = {};
+  for (const [key, def] of Object.entries(fields)) {
+    if (Form.isArrayFieldDef(def)) {
+      const arrayComponentMap = componentMap[key];
+      components[key] = makeArrayFieldComponent(key, def, stateAtom, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, operations, arrayComponentMap);
+    } else if (Form.isFieldDef(def)) {
+      const fieldComponent = componentMap[key];
+      components[key] = makeFieldComponent(key, def, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, fieldComponent);
+    }
+  }
+  return components;
+};
+/**
+ * Builds a React form from a FormBuilder.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from "@lucas-barake/effect-form"
+ * import { FormReact } from "@lucas-barake/effect-form-react"
+ * import * as Atom from "@effect-atom/atom/Atom"
+ * import * as Schema from "effect/Schema"
+ * import * as Effect from "effect/Effect"
+ * import * as Layer from "effect/Layer"
+ *
+ * const runtime = Atom.runtime(Layer.empty)
+ *
+ * const loginForm = Form.empty
+ *   .addField("email", Schema.String)
+ *   .addField("password", Schema.String)
+ *
+ * const form = FormReact.build(loginForm, {
+ *   runtime,
+ *   fields: { email: TextInput, password: PasswordInput },
+ * })
+ *
+ * function LoginDialog({ onClose }) {
+ *   const handleSubmit = form.submit((values) =>
+ *     Effect.gen(function* () {
+ *       yield* saveUser(values)
+ *       onClose()
+ *     })
+ *   )
+ *
+ *   return (
+ *     <form.Form defaultValues={{ email: "", password: "" }} onSubmit={handleSubmit}>
+ *       <form.email />
+ *       <form.password />
+ *       <form.Subscribe>
+ *         {({ isDirty, submit }) => (
+ *           <button onClick={submit} disabled={!isDirty}>Login</button>
+ *         )}
+ *       </form.Subscribe>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ *
+ * @since 1.0.0
+ * @category Constructors
+ */
+export const build = (self, options) => {
+  const {
+    fields: components,
+    mode,
+    runtime
+  } = options;
+  const parsedMode = Mode.parse(mode);
+  const {
+    fields
+  } = self;
+  const formAtoms = FormAtoms.make({
+    formBuilder: self,
+    runtime
+  });
+  const {
+    combinedSchema,
+    crossFieldErrorsAtom,
+    decodeAndSubmit,
+    dirtyFieldsAtom,
+    fieldRefs,
+    getOrCreateFieldAtoms,
+    getOrCreateValidationAtom,
+    isDirtyAtom,
+    onSubmitAtom,
+    operations,
+    resetValidationAtoms,
+    stateAtom,
+    submitCountAtom
+  } = formAtoms;
+  const FormComponent = ({
+    children,
+    defaultValues,
+    onSubmit
+  }) => {
+    const registry = React.useContext(RegistryContext);
+    const state = useAtomValue(stateAtom);
+    const setFormState = useAtomSet(stateAtom);
+    const setOnSubmit = useAtomSet(onSubmitAtom);
+    const callDecodeAndSubmit = useAtomSet(decodeAndSubmit);
+    React.useEffect(() => {
+      setOnSubmit(onSubmit);
+    }, [onSubmit, setOnSubmit]);
+    React.useEffect(() => {
+      setFormState(Option.some(operations.createInitialState(defaultValues)));
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only
+    }, []);
+    const debouncedAutoSubmit = useDebounced(() => {
+      const stateOption = registry.get(stateAtom);
+      if (Option.isNone(stateOption)) return;
+      callDecodeAndSubmit(stateOption.value.values);
+    }, parsedMode.autoSubmit && parsedMode.validation === "onChange" ? parsedMode.debounce : null);
+    useAtomSubscribe(stateAtom, React.useCallback(() => {
+      if (parsedMode.autoSubmit && parsedMode.validation === "onChange") {
+        debouncedAutoSubmit();
+      }
+    }, [debouncedAutoSubmit]), {
+      immediate: false
+    });
+    const onBlurAutoSubmit = React.useCallback(() => {
+      if (parsedMode.autoSubmit && parsedMode.validation === "onBlur") {
+        const stateOption = registry.get(stateAtom);
+        if (Option.isNone(stateOption)) return;
+        callDecodeAndSubmit(stateOption.value.values);
+      }
+    }, [registry, callDecodeAndSubmit]);
+    if (Option.isNone(state)) return null;
+    return _jsx(AutoSubmitContext.Provider, {
+      value: onBlurAutoSubmit,
+      children: _jsx("form", {
+        onSubmit: e => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: children
+      })
+    });
+  };
+  const useFormHook = () => {
+    const registry = React.useContext(RegistryContext);
+    const formValues = Option.getOrThrow(useAtomValue(stateAtom)).values;
+    const setFormState = useAtomSet(stateAtom);
+    const setCrossFieldErrors = useAtomSet(crossFieldErrorsAtom);
+    const [decodeAndSubmitResult, callDecodeAndSubmit] = useAtom(decodeAndSubmit);
+    const isDirty = useAtomValue(isDirtyAtom);
+    React.useEffect(() => {
+      if (decodeAndSubmitResult._tag === "Failure") {
+        const parseError = Cause.failureOption(decodeAndSubmitResult.cause);
+        if (Option.isSome(parseError) && ParseResult.isParseError(parseError.value)) {
+          const issues = ParseResult.ArrayFormatter.formatErrorSync(parseError.value);
+          const fieldErrors = new Map();
+          for (const issue of issues) {
+            if (issue.path.length > 0) {
+              const fieldPath = schemaPathToFieldPath(issue.path);
+              if (!fieldErrors.has(fieldPath)) {
+                fieldErrors.set(fieldPath, issue.message);
+              }
+            }
+          }
+          if (fieldErrors.size > 0) {
+            setCrossFieldErrors(fieldErrors);
+          }
+        }
+      }
+    }, [decodeAndSubmitResult, setCrossFieldErrors]);
+    const submit = React.useCallback(() => {
+      const stateOption = registry.get(stateAtom);
+      if (Option.isNone(stateOption)) return;
+      setCrossFieldErrors(new Map());
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.createSubmitState(prev.value));
+      });
+      callDecodeAndSubmit(stateOption.value.values);
+    }, [setFormState, callDecodeAndSubmit, setCrossFieldErrors, registry]);
+    const reset = React.useCallback(() => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.createResetState(prev.value));
+      });
+      setCrossFieldErrors(new Map());
+      resetValidationAtoms(registry);
+      callDecodeAndSubmit(Atom.Reset);
+    }, [setFormState, setCrossFieldErrors, callDecodeAndSubmit, registry]);
+    const setValue = React.useCallback((field, update) => {
+      const path = field.key;
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        const state = prev.value;
+        const currentValue = getNestedValue(state.values, path);
+        const newValue = typeof update === "function" ? update(currentValue) : update;
+        return Option.some(operations.setFieldValue(state, path, newValue));
+      });
+      setCrossFieldErrors(prev => {
+        let changed = false;
+        const next = new Map(prev);
+        for (const errorPath of prev.keys()) {
+          if (errorPath === path || errorPath.startsWith(path + ".") || errorPath.startsWith(path + "[")) {
+            next.delete(errorPath);
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+    }, [setFormState, setCrossFieldErrors]);
+    const setValues = React.useCallback(values => {
+      setFormState(prev => {
+        if (Option.isNone(prev)) return prev;
+        return Option.some(operations.setFormValues(prev.value, values));
+      });
+      setCrossFieldErrors(new Map());
+    }, [setFormState, setCrossFieldErrors]);
+    return {
+      submit,
+      reset,
+      isDirty,
+      submitResult: decodeAndSubmitResult,
+      values: formValues,
+      setValue,
+      setValues
+    };
+  };
+  const SubscribeComponent = ({
+    children
+  }) => {
+    const {
+      isDirty,
+      reset,
+      setValue,
+      setValues,
+      submit,
+      submitResult,
+      values
+    } = useFormHook();
+    return _jsx(_Fragment, {
+      children: children({
+        values,
+        isDirty,
+        submitResult,
+        submit,
+        reset,
+        setValue,
+        setValues
+      })
+    });
+  };
+  const submitHelper = fn => runtime.fn()(fn);
+  const fieldComponents = makeFieldComponents(fields, stateAtom, crossFieldErrorsAtom, submitCountAtom, dirtyFieldsAtom, parsedMode, getOrCreateValidationAtom, getOrCreateFieldAtoms, operations, components);
+  return {
+    atom: stateAtom,
+    schema: combinedSchema,
+    fields: fieldRefs,
+    Form: FormComponent,
+    Subscribe: SubscribeComponent,
+    useForm: useFormHook,
+    submit: submitHelper,
+    ...fieldComponents
+  };
+};
+//# sourceMappingURL=FormReact.js.map