@tanstack/react-form 0.46.0 → 0.47.0

package/dist/cjs/createFormHook.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const useForm = require("./useForm.cjs");
+function createFormHookContexts() {
+  const fieldContext = react.createContext(null);
+  function useFieldContext() {
+    const field = react.useContext(fieldContext);
+    if (!field) {
+      throw new Error(
+        "`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`"
+      );
+    }
+    return field;
+  }
+  const formContext = react.createContext(null);
+  function useFormContext() {
+    const form = react.useContext(formContext);
+    if (!form) {
+      throw new Error(
+        "`formContext` only works when within a `formComponent` passed to `createFormHook`"
+      );
+    }
+    return form;
+  }
+  return { fieldContext, useFieldContext, useFormContext, formContext };
+}
+function createFormHook({
+  fieldComponents,
+  fieldContext,
+  formContext,
+  formComponents
+}) {
+  function useAppForm(props) {
+    const form = useForm.useForm(props);
+    const AppForm = react.useMemo(() => {
+      return ({ children }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(formContext.Provider, { value: form, children });
+      };
+    }, [form]);
+    const AppField = react.useMemo(() => {
+      return ({ children, ...props2 }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(form.Field, { ...props2, children: (field) => (
+          // eslint-disable-next-line @eslint-react/no-context-provider
+          /* @__PURE__ */ jsxRuntime.jsx(fieldContext.Provider, { value: field, children: children(Object.assign(field, fieldComponents)) })
+        ) });
+      };
+    }, [form]);
+    const extendedForm = react.useMemo(() => {
+      return Object.assign(form, {
+        AppField,
+        AppForm,
+        ...formComponents
+      });
+    }, [form, AppField, AppForm]);
+    return extendedForm;
+  }
+  function withForm({
+    render,
+    props
+  }) {
+    return (innerProps) => render({ ...props, ...innerProps });
+  }
+  return {
+    useAppForm,
+    withForm
+  };
+}
+exports.createFormHook = createFormHook;
+exports.createFormHookContexts = createFormHookContexts;
+//# sourceMappingURL=createFormHook.cjs.map

package/dist/cjs/createFormHook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormHook.cjs","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  FieldApi,\n  FormApi,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\nexport function createFormHookContexts() {\n  // We should never hit the `null` case here\n  const fieldContext = createContext<AnyFieldApi>(null as never)\n\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any\n    >\n  }\n\n  // We should never hit the `null` case here\n  const formContext = createContext<AnyFormApi>(null as never)\n\n  function useFormContext() {\n    const form = useContext(formContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!form) {\n      throw new Error(\n        '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n      )\n    }\n\n    return form as ReactFormExtendedApi<\n      // If you need access to the form data, you need to use `withForm` instead\n      Record<string, never>,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any\n    >\n  }\n\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n  }\n\ninterface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends Record<string, unknown> = Record<string, never>,\n> extends FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  > {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: (\n    props: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >,\n  ) => JSX.Element\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    const AppForm = useMemo(() => {\n      return (({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }) as ComponentType<PropsWithChildren>\n    }, [form])\n\n    const AppField = useMemo(() => {\n      return (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends Record<string, unknown> = Record<string, never>,\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  return {\n    useAppForm,\n    withForm,\n  }\n}\n"],"names":["createContext","useContext","useForm","useMemo","props","jsx"],"mappings":";;;;;AAeO,SAAS,yBAAyB;AAEjC,QAAA,eAAeA,oBAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQC,iBAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAcD,oBAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAOC,iBAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAOC,gBAAQ,KAAK;AAEpB,UAAA,UAAUC,MAAAA,QAAQ,MAAM;AACpB,aAAA,CAAC,EAAE,eAAe;AACxB,8CACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AAAA,IAAA,GACC,CAAC,IAAI,CAAC;AAEH,UAAA,WAAWA,MAAAA,QAAQ,MAAM;AAC7B,aAAQ,CAAC,EAAE,UAAU,GAAGC,aAAY;AAClC,8CACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAECC,2BAAAA,IAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAAA,IAAA,GAaC,CAAC,IAAI,CAAC;AAEH,UAAA,eAAeF,MAAAA,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;"}

package/dist/cjs/createFormHook.d.cts

@@ -0,0 +1,31 @@
+import { AnyFieldApi, AnyFormApi, FieldApi, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
+import { ComponentType, Context, JSX, PropsWithChildren } from 'react';
+import { FieldComponent } from './useField.cjs';
+import { ReactFormExtendedApi } from './useForm.cjs';
+export declare function createFormHookContexts(): {
+    fieldContext: Context<AnyFieldApi>;
+    useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+    useFormContext: () => ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any>;
+    formContext: Context<AnyFormApi>;
+};
+interface CreateFormHookProps<TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>> {
+    fieldComponents: TFieldComponents;
+    fieldContext: Context<AnyFieldApi>;
+    formComponents: TFormComponents;
+    formContext: Context<AnyFormApi>;
+}
+type AppFieldExtendedReactFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>> = ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & NoInfer<TFormComponents> & {
+    AppField: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, NoInfer<TFieldComponents>>;
+    AppForm: ComponentType<PropsWithChildren>;
+};
+interface WithFormProps<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>, TRenderProps extends Record<string, unknown> = Record<string, never>> extends FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> {
+    props?: TRenderProps;
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+        form: AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents>;
+    }>) => JSX.Element;
+}
+export declare function createFormHook<const TComponents extends Record<string, ComponentType<any>>, const TFormComponents extends Record<string, ComponentType<any>>>({ fieldComponents, fieldContext, formContext, formComponents, }: CreateFormHookProps<TComponents, TFormComponents>): {
+    useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+    withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = Record<string, never>>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>["render"];
+};
+export {};

package/dist/cjs/index.cjs

@@ -5,6 +5,7 @@ const reactStore = require("@tanstack/react-store");
 const useForm = require("./useForm.cjs");
 const useField = require("./useField.cjs");
 const useTransform = require("./useTransform.cjs");
+const createFormHook = require("./createFormHook.cjs");
 Object.defineProperty(exports, "useStore", {
   enumerable: true,
   get: () => reactStore.useStore
@@ -13,6 +14,8 @@ exports.useForm = useForm.useForm;
 exports.Field = useField.Field;
 exports.useField = useField.useField;
 exports.useTransform = useTransform.useTransform;
+exports.createFormHook = createFormHook.createFormHook;
+exports.createFormHookContexts = createFormHook.createFormHookContexts;
 Object.keys(formCore).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -5,3 +5,4 @@ export { useForm } from './useForm.cjs';
 export type { UseField, FieldComponent } from './useField.cjs';
 export { useField, Field } from './useField.cjs';
 export { useTransform } from './useTransform.cjs';
+export { createFormHook, createFormHookContexts } from './createFormHook.cjs';

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: Omit<\n    UseFieldOptions<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n    'form'\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n  ) => ReactNode\n} & UseFieldOptions<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n  'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAiIO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AA4IO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAA;AAAA,IACnB,MAAMC,SAAiB,iBAAA,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,+DAAW,UAAa,aAAA,CAAA;AAC1B;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: Omit<\n    UseFieldOptions<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n    'form'\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n} & UseFieldOptions<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta,\n    ExtendedApi\n  >,\n  'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAiIO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AAgJO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAA;AAAA,IACnB,MAAMC,SAAiB,iBAAA,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,+DAAW,UAAa,aAAA,CAAA;AAC1B;;;"}

package/dist/cjs/useField.d.cts

@@ -23,13 +23,13 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
 /**
  * @param children A render function that takes a field API instance and returns a React element.
  */
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> = {
-    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>) => ReactNode;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta, ExtendedApi = {}> = {
+    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta> & ExtendedApi) => ReactNode;
 } & UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>;
 /**
  * A type alias representing a field component for a specific form data type.
  */
-export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>, 'form'>) => ReactNode;
+export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta, ExtendedApi = {}> = <const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi>, 'form'>) => ReactNode;
 /**
  * A function component that takes field options and a render function as children and returns a React component.
  *

package/dist/esm/createFormHook.d.ts

@@ -0,0 +1,31 @@
+import { AnyFieldApi, AnyFormApi, FieldApi, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
+import { ComponentType, Context, JSX, PropsWithChildren } from 'react';
+import { FieldComponent } from './useField.js';
+import { ReactFormExtendedApi } from './useForm.js';
+export declare function createFormHookContexts(): {
+    fieldContext: Context<AnyFieldApi>;
+    useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+    useFormContext: () => ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any>;
+    formContext: Context<AnyFormApi>;
+};
+interface CreateFormHookProps<TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>> {
+    fieldComponents: TFieldComponents;
+    fieldContext: Context<AnyFieldApi>;
+    formComponents: TFormComponents;
+    formContext: Context<AnyFormApi>;
+}
+type AppFieldExtendedReactFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>> = ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & NoInfer<TFormComponents> & {
+    AppField: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, NoInfer<TFieldComponents>>;
+    AppForm: ComponentType<PropsWithChildren>;
+};
+interface WithFormProps<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, ComponentType<any>>, TFormComponents extends Record<string, ComponentType<any>>, TRenderProps extends Record<string, unknown> = Record<string, never>> extends FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> {
+    props?: TRenderProps;
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+        form: AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TFieldComponents, TFormComponents>;
+    }>) => JSX.Element;
+}
+export declare function createFormHook<const TComponents extends Record<string, ComponentType<any>>, const TFormComponents extends Record<string, ComponentType<any>>>({ fieldComponents, fieldContext, formContext, formComponents, }: CreateFormHookProps<TComponents, TFormComponents>): {
+    useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+    withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = Record<string, never>>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>["render"];
+};
+export {};

package/dist/esm/createFormHook.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+import { useForm } from "./useForm.js";
+function createFormHookContexts() {
+  const fieldContext = createContext(null);
+  function useFieldContext() {
+    const field = useContext(fieldContext);
+    if (!field) {
+      throw new Error(
+        "`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`"
+      );
+    }
+    return field;
+  }
+  const formContext = createContext(null);
+  function useFormContext() {
+    const form = useContext(formContext);
+    if (!form) {
+      throw new Error(
+        "`formContext` only works when within a `formComponent` passed to `createFormHook`"
+      );
+    }
+    return form;
+  }
+  return { fieldContext, useFieldContext, useFormContext, formContext };
+}
+function createFormHook({
+  fieldComponents,
+  fieldContext,
+  formContext,
+  formComponents
+}) {
+  function useAppForm(props) {
+    const form = useForm(props);
+    const AppForm = useMemo(() => {
+      return ({ children }) => {
+        return /* @__PURE__ */ jsx(formContext.Provider, { value: form, children });
+      };
+    }, [form]);
+    const AppField = useMemo(() => {
+      return ({ children, ...props2 }) => {
+        return /* @__PURE__ */ jsx(form.Field, { ...props2, children: (field) => (
+          // eslint-disable-next-line @eslint-react/no-context-provider
+          /* @__PURE__ */ jsx(fieldContext.Provider, { value: field, children: children(Object.assign(field, fieldComponents)) })
+        ) });
+      };
+    }, [form]);
+    const extendedForm = useMemo(() => {
+      return Object.assign(form, {
+        AppField,
+        AppForm,
+        ...formComponents
+      });
+    }, [form, AppField, AppForm]);
+    return extendedForm;
+  }
+  function withForm({
+    render,
+    props
+  }) {
+    return (innerProps) => render({ ...props, ...innerProps });
+  }
+  return {
+    useAppForm,
+    withForm
+  };
+}
+export {
+  createFormHook,
+  createFormHookContexts
+};
+//# sourceMappingURL=createFormHook.js.map

package/dist/esm/createFormHook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormHook.js","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n  AnyFieldApi,\n  AnyFormApi,\n  FieldApi,\n  FormApi,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\nexport function createFormHookContexts() {\n  // We should never hit the `null` case here\n  const fieldContext = createContext<AnyFieldApi>(null as never)\n\n  function useFieldContext<TData>() {\n    const field = useContext(fieldContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!field) {\n      throw new Error(\n        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n      )\n    }\n\n    return field as FieldApi<\n      any,\n      string,\n      TData,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any\n    >\n  }\n\n  // We should never hit the `null` case here\n  const formContext = createContext<AnyFormApi>(null as never)\n\n  function useFormContext() {\n    const form = useContext(formContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!form) {\n      throw new Error(\n        '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n      )\n    }\n\n    return form as ReactFormExtendedApi<\n      // If you need access to the form data, you need to use `withForm` instead\n      Record<string, never>,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any\n    >\n  }\n\n  return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> {\n  fieldComponents: TFieldComponents\n  fieldContext: Context<AnyFieldApi>\n  formComponents: TFormComponents\n  formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: FieldComponent<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n  }\n\ninterface WithFormProps<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TFieldComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TRenderProps extends Record<string, unknown> = Record<string, never>,\n> extends FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  > {\n  // Optional, but adds props to the `render` function outside of `form`\n  props?: TRenderProps\n  render: (\n    props: PropsWithChildren<\n      NoInfer<TRenderProps> & {\n        form: AppFieldExtendedReactFormApi<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnServer,\n          TSubmitMeta,\n          TFieldComponents,\n          TFormComponents\n        >\n      }\n    >,\n  ) => JSX.Element\n}\n\nexport function createFormHook<\n  const TComponents extends Record<string, ComponentType<any>>,\n  const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n  fieldComponents,\n  fieldContext,\n  formContext,\n  formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n  function useAppForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n  >(\n    props: FormOptions<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer,\n      TSubmitMeta\n    >,\n  ): AppFieldExtendedReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents\n  > {\n    const form = useForm(props)\n\n    const AppForm = useMemo(() => {\n      return (({ children }) => {\n        return (\n          <formContext.Provider value={form}>{children}</formContext.Provider>\n        )\n      }) as ComponentType<PropsWithChildren>\n    }, [form])\n\n    const AppField = useMemo(() => {\n      return (({ children, ...props }) => {\n        return (\n          <form.Field {...props}>\n            {(field) => (\n              // eslint-disable-next-line @eslint-react/no-context-provider\n              <fieldContext.Provider value={field}>\n                {children(Object.assign(field, fieldComponents))}\n              </fieldContext.Provider>\n            )}\n          </form.Field>\n        )\n      }) as FieldComponent<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents\n      >\n    }, [form])\n\n    const extendedForm = useMemo(() => {\n      return Object.assign(form, {\n        AppField,\n        AppForm,\n        ...formComponents,\n      })\n    }, [form, AppField, AppForm])\n\n    return extendedForm\n  }\n\n  function withForm<\n    TFormData,\n    TOnMount extends undefined | FormValidateOrFn<TFormData>,\n    TOnChange extends undefined | FormValidateOrFn<TFormData>,\n    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n    TSubmitMeta,\n    TRenderProps extends Record<string, unknown> = Record<string, never>,\n  >({\n    render,\n    props,\n  }: WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >): WithFormProps<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta,\n    TComponents,\n    TFormComponents,\n    TRenderProps\n  >['render'] {\n    return (innerProps) => render({ ...props, ...innerProps })\n  }\n\n  return {\n    useAppForm,\n    withForm,\n  }\n}\n"],"names":["props"],"mappings":";;;AAeO,SAAS,yBAAyB;AAEjC,QAAA,eAAe,cAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQ,WAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAc,cAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAO,WAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAO,QAAQ,KAAK;AAEpB,UAAA,UAAU,QAAQ,MAAM;AACpB,aAAA,CAAC,EAAE,eAAe;AACxB,mCACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AAAA,IAAA,GACC,CAAC,IAAI,CAAC;AAEH,UAAA,WAAW,QAAQ,MAAM;AAC7B,aAAQ,CAAC,EAAE,UAAU,GAAGA,aAAY;AAClC,mCACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAEC,oBAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAAA,IAAA,GAaC,CAAC,IAAI,CAAC;AAEH,UAAA,eAAe,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/esm/index.d.ts

@@ -5,3 +5,4 @@ export { useForm } from './useForm.js';
 export type { UseField, FieldComponent } from './useField.js';
 export { useField, Field } from './useField.js';
 export { useTransform } from './useTransform.js';
+export { createFormHook, createFormHookContexts } from './createFormHook.js';

package/dist/esm/index.js

@@ -3,8 +3,11 @@ import { useStore } from "@tanstack/react-store";
 import { useForm } from "./useForm.js";
 import { Field, useField } from "./useField.js";
 import { useTransform } from "./useTransform.js";
+import { createFormHook, createFormHookContexts } from "./createFormHook.js";
 export {
   Field,
+  createFormHook,
+  createFormHookContexts,
   useField,
   useForm,
   useStore,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/useField.d.ts

@@ -23,13 +23,13 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
 /**
  * @param children A render function that takes a field API instance and returns a React element.
  */
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> = {
-    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>) => ReactNode;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta, ExtendedApi = {}> = {
+    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta> & ExtendedApi) => ReactNode;
 } & UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>;
 /**
  * A type alias representing a field component for a specific form data type.
  */
-export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta>, 'form'>) => ReactNode;
+export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta, ExtendedApi = {}> = <const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi>, 'form'>) => ReactNode;
 /**
  * A function component that takes field options and a render function as children and returns a React component.
  *

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: Omit<\n    UseFieldOptions<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n    'form'\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n  ) => ReactNode\n} & UseFieldOptions<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n  'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAiIO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AA4IO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,yCAAW,UAAa,aAAA,CAAA;AAC1B;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: Omit<\n    UseFieldOptions<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    >,\n    'form'\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api &\n      ReactFieldApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TPatentSubmitMeta\n      > = api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n} & UseFieldOptions<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TPatentSubmitMeta,\n    ExtendedApi\n  >,\n  'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TPatentSubmitMeta\n>): ReactNode => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    /**\n     * The reason this exists is to fix an issue with the React Compiler.\n     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.\n     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],\n  )\n  return (<>{jsxToDisplay}</>) as never\n}) satisfies FunctionComponent<\n  FieldComponentProps<\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAiIO,SAAS,SA2Bd,MAqBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAYA;AAEN,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AAgJO,MAAM,QAAS,CA0BpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAoBiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAChE;AACA,yCAAW,UAAa,aAAA,CAAA;AAC1B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -70,7 +70,7 @@
     "@remix-run/node": "^2.15.3",
     "@tanstack/react-store": "^0.7.0",
     "decode-formdata": "^0.8.0",
-    "@tanstack/form-core": "0.45.1"
+    "@tanstack/form-core": "0.47.0"
   },
   "devDependencies": {
     "@tanstack/react-start": "^1.112.0",

package/src/createFormHook.tsx

@@ -0,0 +1,332 @@
+import { createContext, useContext, useMemo } from 'react'
+import { useForm } from './useForm'
+import type {
+  AnyFieldApi,
+  AnyFormApi,
+  FieldApi,
+  FormApi,
+  FormAsyncValidateOrFn,
+  FormOptions,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+import type { ComponentType, Context, JSX, PropsWithChildren } from 'react'
+import type { FieldComponent } from './useField'
+import type { ReactFormExtendedApi } from './useForm'
+
+export function createFormHookContexts() {
+  // We should never hit the `null` case here
+  const fieldContext = createContext<AnyFieldApi>(null as never)
+
+  function useFieldContext<TData>() {
+    const field = useContext(fieldContext)
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!field) {
+      throw new Error(
+        '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',
+      )
+    }
+
+    return field as FieldApi<
+      any,
+      string,
+      TData,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  }
+
+  // We should never hit the `null` case here
+  const formContext = createContext<AnyFormApi>(null as never)
+
+  function useFormContext() {
+    const form = useContext(formContext)
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!form) {
+      throw new Error(
+        '`formContext` only works when within a `formComponent` passed to `createFormHook`',
+      )
+    }
+
+    return form as ReactFormExtendedApi<
+      // If you need access to the form data, you need to use `withForm` instead
+      Record<string, never>,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  }
+
+  return { fieldContext, useFieldContext, useFormContext, formContext }
+}
+
+interface CreateFormHookProps<
+  TFieldComponents extends Record<string, ComponentType<any>>,
+  TFormComponents extends Record<string, ComponentType<any>>,
+> {
+  fieldComponents: TFieldComponents
+  fieldContext: Context<AnyFieldApi>
+  formComponents: TFormComponents
+  formContext: Context<AnyFormApi>
+}
+
+type AppFieldExtendedReactFormApi<
+  TFormData,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, ComponentType<any>>,
+  TFormComponents extends Record<string, ComponentType<any>>,
+> = ReactFormExtendedApi<
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  NoInfer<TFormComponents> & {
+    AppField: FieldComponent<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta,
+      NoInfer<TFieldComponents>
+    >
+    AppForm: ComponentType<PropsWithChildren>
+  }
+
+interface WithFormProps<
+  TFormData,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, ComponentType<any>>,
+  TFormComponents extends Record<string, ComponentType<any>>,
+  TRenderProps extends Record<string, unknown> = Record<string, never>,
+> extends FormOptions<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta
+  > {
+  // Optional, but adds props to the `render` function outside of `form`
+  props?: TRenderProps
+  render: (
+    props: PropsWithChildren<
+      NoInfer<TRenderProps> & {
+        form: AppFieldExtendedReactFormApi<
+          TFormData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TOnServer,
+          TSubmitMeta,
+          TFieldComponents,
+          TFormComponents
+        >
+      }
+    >,
+  ) => JSX.Element
+}
+
+export function createFormHook<
+  const TComponents extends Record<string, ComponentType<any>>,
+  const TFormComponents extends Record<string, ComponentType<any>>,
+>({
+  fieldComponents,
+  fieldContext,
+  formContext,
+  formComponents,
+}: CreateFormHookProps<TComponents, TFormComponents>) {
+  function useAppForm<
+    TFormData,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+  >(
+    props: FormOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnServer,
+      TSubmitMeta
+    >,
+  ): AppFieldExtendedReactFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > {
+    const form = useForm(props)
+
+    const AppForm = useMemo(() => {
+      return (({ children }) => {
+        return (
+          <formContext.Provider value={form}>{children}</formContext.Provider>
+        )
+      }) as ComponentType<PropsWithChildren>
+    }, [form])
+
+    const AppField = useMemo(() => {
+      return (({ children, ...props }) => {
+        return (
+          <form.Field {...props}>
+            {(field) => (
+              // eslint-disable-next-line @eslint-react/no-context-provider
+              <fieldContext.Provider value={field}>
+                {children(Object.assign(field, fieldComponents))}
+              </fieldContext.Provider>
+            )}
+          </form.Field>
+        )
+      }) as FieldComponent<
+        TFormData,
+        TOnMount,
+        TOnChange,
+        TOnChangeAsync,
+        TOnBlur,
+        TOnBlurAsync,
+        TOnSubmit,
+        TOnSubmitAsync,
+        TOnServer,
+        TSubmitMeta,
+        TComponents
+      >
+    }, [form])
+
+    const extendedForm = useMemo(() => {
+      return Object.assign(form, {
+        AppField,
+        AppForm,
+        ...formComponents,
+      })
+    }, [form, AppField, AppForm])
+
+    return extendedForm
+  }
+
+  function withForm<
+    TFormData,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+    TRenderProps extends Record<string, unknown> = Record<string, never>,
+  >({
+    render,
+    props,
+  }: WithFormProps<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents,
+    TRenderProps
+  >): WithFormProps<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents,
+    TRenderProps
+  >['render'] {
+    return (innerProps) => render({ ...props, ...innerProps })
+  }
+
+  return {
+    useAppForm,
+    withForm,
+  }
+}

package/src/index.ts

@@ -9,3 +9,4 @@ export type { UseField, FieldComponent } from './useField'
 export { useField, Field } from './useField'
 
 export { useTransform } from './useTransform'
+export { createFormHook, createFormHookContexts } from './createFormHook'

package/src/useField.tsx

@@ -253,6 +253,7 @@ type FieldComponentProps<
   TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
   TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   TPatentSubmitMeta,
+  ExtendedApi = {},
 > = {
   children: (
     fieldApi: FieldApi<
@@ -275,7 +276,8 @@ type FieldComponentProps<
       TFormOnSubmitAsync,
       TFormOnServer,
       TPatentSubmitMeta
-    >,
+    > &
+      ExtendedApi,
   ) => ReactNode
 } & UseFieldOptions<
   TParentData,
@@ -313,8 +315,9 @@ export type FieldComponent<
   TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
   TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   TPatentSubmitMeta,
+  ExtendedApi = {},
 > = <
-  TName extends DeepKeys<TParentData>,
+  const TName extends DeepKeys<TParentData>,
   TData extends DeepValue<TParentData, TName>,
   TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
   TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
@@ -352,7 +355,8 @@ export type FieldComponent<
     TFormOnSubmit,
     TFormOnSubmitAsync,
     TFormOnServer,
-    TPatentSubmitMeta
+    TPatentSubmitMeta,
+    ExtendedApi
   >,
   'form'
 >) => ReactNode