@tanstack/react-form 1.19.5 → 1.20.0

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, UseFieldOptionsBound } 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TFormOnDynamic,\n    TFormOnDynamicAsync,\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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\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        TFormOnDynamic,\n        TFormOnDynamicAsync,\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 [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\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 */\ninterface 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\n    TFormOnServer,\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnDynamicAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A type alias representing a field component for a form lens data type.\n */\nexport type LensFieldComponent<\n  in out TLensData,\n  in out TParentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TLensData>,\n  TData extends DeepValue<TLensData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  unknown,\n  string,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  TParentSubmitMeta,\n  ExtendedApi\n> & { name: TName }) => 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAqIO,SAAS,SAiCd,MAyBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAChC,UAAM,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAcA;AAEN,gBAAY,QAAQ;AAEpB,WAAO;AAAA,EACT,CAAC;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EACtB,CAAC;AAEDC,aAAAA;AAAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAA,CAAE,EAAE;AAAA,MAAA;AAAA,IAEhD,IACA;AAAA,EAAA;AAGN,SAAO;AACT;AAmTO,MAAM,SAAS,CAgCpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAwBiB;AACf,QAAM,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAAA;AAAAA,IACnB,MAAMC,SAAAA,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAAA;AAEhE,+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  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TFormOnDynamic,\n    TFormOnDynamicAsync,\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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\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        TFormOnDynamic,\n        TFormOnDynamicAsync,\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 [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\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 */\ninterface 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\n    TFormOnServer,\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnDynamicAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A type alias representing a field component for a form lens data type.\n */\nexport type LensFieldComponent<\n  in out TLensData,\n  in out TParentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TLensData>,\n  TData extends DeepValue<TLensData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentBoundProps<\n    unknown,\n    string,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    TParentSubmitMeta,\n    ExtendedApi\n  >,\n  'name' | 'validators'\n> & {\n  name: TName\n  validators?: Omit<\n    FieldValidators<\n      unknown,\n      string,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync\n    >,\n    'onChangeListenTo' | 'onBlurListenTo'\n  > & {\n    /**\n     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes\n     */\n    onChangeListenTo?: DeepKeys<TLensData>[]\n    /**\n     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes\n     */\n    onBlurListenTo?: DeepKeys<TLensData>[]\n  }\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","useMemo","functionalUpdate"],"mappings":";;;;;;;AAsIO,SAAS,SAiCd,MAyBA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAChC,UAAM,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAcA;AAEN,gBAAY,QAAQ;AAEpB,WAAO;AAAA,EACT,CAAC;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EACtB,CAAC;AAEDC,aAAAA;AAAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAA,CAAE,EAAE;AAAA,MAAA;AAAA,IAEhD,IACA;AAAA,EAAA;AAGN,SAAO;AACT;AAkVO,MAAM,SAAS,CAgCpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAwBiB;AACf,QAAM,WAAW,SAAS,YAAmB;AAE7C,QAAM,eAAeC,MAAAA;AAAAA,IACnB,MAAMC,SAAAA,iBAAiB,UAAU,QAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,CAAC,UAAU,UAAU,SAAS,MAAM,OAAO,SAAS,MAAM,IAAI;AAAA,EAAA;AAEhE,+DAAW,UAAA,aAAA,CAAa;AAC1B;;;"}

package/dist/cjs/useField.d.cts

@@ -1,4 +1,4 @@
-import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FieldValidators, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
 import { ReactNode } from 'react';
 import { UseFieldOptions, UseFieldOptionsBound } from './types.cjs';
 interface ReactFieldApi<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> {
@@ -36,8 +36,18 @@ export type FieldComponent<in out TParentData, in out TFormOnMount extends undef
 /**
  * A type alias representing a field component for a form lens data type.
  */
-export type LensFieldComponent<in out TLensData, in out TParentSubmitMeta, in out ExtendedApi = {}> = <const TName extends DeepKeys<TLensData>, TData extends DeepValue<TLensData, TName>, TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>>({ children, ...fieldOptions }: FieldComponentBoundProps<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, TParentSubmitMeta, ExtendedApi> & {
+export type LensFieldComponent<in out TLensData, in out TParentSubmitMeta, in out ExtendedApi = {}> = <const TName extends DeepKeys<TLensData>, TData extends DeepValue<TLensData, TName>, TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>>({ children, ...fieldOptions }: Omit<FieldComponentBoundProps<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, TParentSubmitMeta, ExtendedApi>, 'name' | 'validators'> & {
     name: TName;
+    validators?: Omit<FieldValidators<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, 'onChangeListenTo' | 'onBlurListenTo'> & {
+        /**
+         * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+         */
+        onChangeListenTo?: DeepKeys<TLensData>[];
+        /**
+         * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+         */
+        onBlurListenTo?: DeepKeys<TLensData>[];
+    };
 }) => ReactNode;
 /**
  * A function component that takes field options and a render function as children and returns a React component.

package/dist/cjs/useFieldGroup.cjs

@@ -21,23 +21,11 @@ function useFieldGroup(opts) {
     extendedApi.AppForm = function AppForm(appFormProps) {
       return /* @__PURE__ */ jsxRuntime.jsx(form.AppForm, { ...appFormProps });
     };
-    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        form.AppField,
-        {
-          name: formLensApi.getFormFieldName(name),
-          ...appFieldProps
-        }
-      );
+    extendedApi.AppField = function AppField(props) {
+      return /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { ...formLensApi.getFormFieldOptions(props) });
     };
-    extendedApi.Field = function Field({ name, ...fieldProps }) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        form.Field,
-        {
-          name: formLensApi.getFormFieldName(name),
-          ...fieldProps
-        }
-      );
+    extendedApi.Field = function Field(props) {
+      return /* @__PURE__ */ jsxRuntime.jsx(form.Field, { ...formLensApi.getFormFieldOptions(props) });
     };
     extendedApi.Subscribe = function Subscribe(props) {
       return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/useFieldGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldGroup.cjs","sources":["../../src/useFieldGroup.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldGroupApi,\n  DeepKeysOfType,\n  FieldGroupState,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { AppFieldExtendedReactFormApi } from './createFormHook'\nimport type { ComponentType, PropsWithChildren, ReactNode } from 'react'\nimport type { LensFieldComponent } from './useField'\n\nfunction LocalSubscribe({\n  lens,\n  selector,\n  children,\n}: PropsWithChildren<{\n  lens: AnyFieldGroupApi\n  selector: (state: FieldGroupState<any>) => FieldGroupState<any>\n}>) {\n  const data = useStore(lens.store, selector)\n\n  return functionalUpdate(children, data)\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync 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> = FieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: LensFieldComponent<\n      TFieldGroupData,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>\n\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {\n      selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => ReactNode\n  }\n\nexport function useFieldGroup<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta = never,\n>(opts: {\n  form:\n    | AppFieldExtendedReactFormApi<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n    | AppFieldExtendedReactFieldGroupApi<\n        // Since this only occurs if you nest it within other form lenses, it can be more\n        // lenient with the types.\n        unknown,\n        TFormData,\n        string | FieldsMap<unknown, TFormData>,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n  fields: TFields\n  defaultValues?: TFieldGroupData\n  onSubmitMeta?: TSubmitMeta\n  formComponents: TFormComponents\n}): AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta,\n  TComponents,\n  TFormComponents\n> {\n  const [formLensApi] = useState(() => {\n    const api = new FieldGroupApi(opts)\n    const form =\n      opts.form instanceof FieldGroupApi\n        ? (opts.form.form as AppFieldExtendedReactFormApi<\n            TFormData,\n            TOnMount,\n            TOnChange,\n            TOnChangeAsync,\n            TOnBlur,\n            TOnBlurAsync,\n            TOnSubmit,\n            TOnSubmitAsync,\n            TOnDynamic,\n            TOnDynamicAsync,\n            TOnServer,\n            TSubmitMeta,\n            TComponents,\n            TFormComponents\n          >)\n        : opts.form\n\n    const extendedApi: AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    > = api as never\n\n    extendedApi.AppForm = function AppForm(appFormProps) {\n      return <form.AppForm {...appFormProps} />\n    }\n\n    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {\n      return (\n        <form.AppField\n          name={formLensApi.getFormFieldName(name)}\n          {...(appFieldProps as any)}\n        />\n      ) as never\n    }\n\n    extendedApi.Field = function Field({ name, ...fieldProps }) {\n      return (\n        <form.Field\n          name={formLensApi.getFormFieldName(name)}\n          {...(fieldProps as any)}\n        />\n      ) as never\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          lens={formLensApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return Object.assign(extendedApi, {\n      ...opts.formComponents,\n    }) as AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    >\n  })\n\n  useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi])\n\n  return formLensApi\n}\n"],"names":["useStore","functionalUpdate","useState","FieldGroupApi","jsx","useIsomorphicLayoutEffect"],"mappings":";;;;;;;AAgBA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAOA,WAAAA,SAAS,KAAK,OAAO,QAAQ;AAE1C,SAAOC,SAAAA,iBAAiB,UAAU,IAAI;AACxC;AA6DO,SAAS,cAmBd,MA2DA;AACA,QAAM,CAAC,WAAW,IAAIC,MAAAA,SAAS,MAAM;AACnC,UAAM,MAAM,IAAIC,SAAAA,cAAc,IAAI;AAClC,UAAM,OACJ,KAAK,gBAAgBA,SAAAA,gBAChB,KAAK,KAAK,OAgBX,KAAK;AAEX,UAAM,cAiBF;AAEJ,gBAAY,UAAU,SAAS,QAAQ,cAAc;AACnD,aAAOC,2BAAAA,IAAC,KAAK,SAAL,EAAc,GAAG,aAAA,CAAc;AAAA,IACzC;AAEA,gBAAY,WAAW,SAAS,SAAS,EAAE,MAAM,GAAG,iBAAiB;AACnE,aACEA,2BAAAA;AAAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM,YAAY,iBAAiB,IAAI;AAAA,UACtC,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,gBAAY,QAAQ,SAAS,MAAM,EAAE,MAAM,GAAG,cAAc;AAC1D,aACEA,2BAAAA;AAAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM,YAAY,iBAAiB,IAAI;AAAA,UACtC,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,gBAAY,YAAY,SAAS,UAAU,OAAY;AACrD,aACEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGtB;AAEA,WAAO,OAAO,OAAO,aAAa;AAAA,MAChC,GAAG,KAAK;AAAA,IAAA,CACT;AAAA,EAkBH,CAAC;AAEDC,4BAAAA,0BAA0B,YAAY,OAAO,CAAC,WAAW,CAAC;AAE1D,SAAO;AACT;;"}
+{"version":3,"file":"useFieldGroup.cjs","sources":["../../src/useFieldGroup.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldGroupApi,\n  DeepKeysOfType,\n  FieldGroupState,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { AppFieldExtendedReactFormApi } from './createFormHook'\nimport type { ComponentType, PropsWithChildren, ReactNode } from 'react'\nimport type { LensFieldComponent } from './useField'\n\nfunction LocalSubscribe({\n  lens,\n  selector,\n  children,\n}: PropsWithChildren<{\n  lens: AnyFieldGroupApi\n  selector: (state: FieldGroupState<any>) => FieldGroupState<any>\n}>) {\n  const data = useStore(lens.store, selector)\n\n  return functionalUpdate(children, data)\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync 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> = FieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: LensFieldComponent<\n      TFieldGroupData,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>\n\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {\n      selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => ReactNode\n  }\n\nexport function useFieldGroup<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta = never,\n>(opts: {\n  form:\n    | AppFieldExtendedReactFormApi<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n    | AppFieldExtendedReactFieldGroupApi<\n        // Since this only occurs if you nest it within other form lenses, it can be more\n        // lenient with the types.\n        unknown,\n        TFormData,\n        string | FieldsMap<unknown, TFormData>,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n  fields: TFields\n  defaultValues?: TFieldGroupData\n  onSubmitMeta?: TSubmitMeta\n  formComponents: TFormComponents\n}): AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta,\n  TComponents,\n  TFormComponents\n> {\n  const [formLensApi] = useState(() => {\n    const api = new FieldGroupApi(opts)\n    const form =\n      opts.form instanceof FieldGroupApi\n        ? (opts.form.form as AppFieldExtendedReactFormApi<\n            TFormData,\n            TOnMount,\n            TOnChange,\n            TOnChangeAsync,\n            TOnBlur,\n            TOnBlurAsync,\n            TOnSubmit,\n            TOnSubmitAsync,\n            TOnDynamic,\n            TOnDynamicAsync,\n            TOnServer,\n            TSubmitMeta,\n            TComponents,\n            TFormComponents\n          >)\n        : opts.form\n\n    const extendedApi: AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    > = api as never\n\n    extendedApi.AppForm = function AppForm(appFormProps) {\n      return <form.AppForm {...appFormProps} />\n    }\n\n    extendedApi.AppField = function AppField(props) {\n      return (\n        <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />\n      )\n    }\n\n    extendedApi.Field = function Field(props) {\n      return <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          lens={formLensApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return Object.assign(extendedApi, {\n      ...opts.formComponents,\n    }) as AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    >\n  })\n\n  useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi])\n\n  return formLensApi\n}\n"],"names":["useStore","functionalUpdate","useState","FieldGroupApi","jsx","useIsomorphicLayoutEffect"],"mappings":";;;;;;;AAgBA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAOA,WAAAA,SAAS,KAAK,OAAO,QAAQ;AAE1C,SAAOC,SAAAA,iBAAiB,UAAU,IAAI;AACxC;AA6DO,SAAS,cAmBd,MA2DA;AACA,QAAM,CAAC,WAAW,IAAIC,MAAAA,SAAS,MAAM;AACnC,UAAM,MAAM,IAAIC,SAAAA,cAAc,IAAI;AAClC,UAAM,OACJ,KAAK,gBAAgBA,SAAAA,gBAChB,KAAK,KAAK,OAgBX,KAAK;AAEX,UAAM,cAiBF;AAEJ,gBAAY,UAAU,SAAS,QAAQ,cAAc;AACnD,aAAOC,2BAAAA,IAAC,KAAK,SAAL,EAAc,GAAG,aAAA,CAAc;AAAA,IACzC;AAEA,gBAAY,WAAW,SAAS,SAAS,OAAO;AAC9C,aACEA,2BAAAA,IAAC,KAAK,UAAL,EAAe,GAAI,YAAY,oBAAoB,KAAK,GAAW;AAAA,IAExE;AAEA,gBAAY,QAAQ,SAAS,MAAM,OAAO;AACxC,aAAOA,2BAAAA,IAAC,KAAK,OAAL,EAAY,GAAI,YAAY,oBAAoB,KAAK,GAAW;AAAA,IAC1E;AAEA,gBAAY,YAAY,SAAS,UAAU,OAAY;AACrD,aACEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGtB;AAEA,WAAO,OAAO,OAAO,aAAa;AAAA,MAChC,GAAG,KAAK;AAAA,IAAA,CACT;AAAA,EAkBH,CAAC;AAEDC,4BAAAA,0BAA0B,YAAY,OAAO,CAAC,WAAW,CAAC;AAE1D,SAAO;AACT;;"}

package/dist/esm/useField.d.ts

@@ -1,4 +1,4 @@
-import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FieldValidators, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
 import { ReactNode } from 'react';
 import { UseFieldOptions, UseFieldOptionsBound } from './types.js';
 interface ReactFieldApi<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TPatentSubmitMeta> {
@@ -36,8 +36,18 @@ export type FieldComponent<in out TParentData, in out TFormOnMount extends undef
 /**
  * A type alias representing a field component for a form lens data type.
  */
-export type LensFieldComponent<in out TLensData, in out TParentSubmitMeta, in out ExtendedApi = {}> = <const TName extends DeepKeys<TLensData>, TData extends DeepValue<TLensData, TName>, TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>>({ children, ...fieldOptions }: FieldComponentBoundProps<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, TParentSubmitMeta, ExtendedApi> & {
+export type LensFieldComponent<in out TLensData, in out TParentSubmitMeta, in out ExtendedApi = {}> = <const TName extends DeepKeys<TLensData>, TData extends DeepValue<TLensData, TName>, TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>>({ children, ...fieldOptions }: Omit<FieldComponentBoundProps<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, TParentSubmitMeta, ExtendedApi>, 'name' | 'validators'> & {
     name: TName;
+    validators?: Omit<FieldValidators<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, 'onChangeListenTo' | 'onBlurListenTo'> & {
+        /**
+         * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+         */
+        onChangeListenTo?: DeepKeys<TLensData>[];
+        /**
+         * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+         */
+        onBlurListenTo?: DeepKeys<TLensData>[];
+    };
 }) => 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, UseFieldOptionsBound } 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TFormOnDynamic,\n    TFormOnDynamicAsync,\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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\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        TFormOnDynamic,\n        TFormOnDynamicAsync,\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 [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\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 */\ninterface 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\n    TFormOnServer,\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnDynamicAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A type alias representing a field component for a form lens data type.\n */\nexport type LensFieldComponent<\n  in out TLensData,\n  in out TParentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TLensData>,\n  TData extends DeepValue<TLensData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  unknown,\n  string,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  undefined | FormAsyncValidateOrFn<unknown>,\n  TParentSubmitMeta,\n  ExtendedApi\n> & { name: TName }) => 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAqIO,SAAS,SAiCd,MAyBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAChC,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAcA;AAEN,gBAAY,QAAQ;AAEpB,WAAO;AAAA,EACT,CAAC;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EACtB,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAA,CAAE,EAAE;AAAA,MAAA;AAAA,IAEhD,IACA;AAAA,EAAA;AAGN,SAAO;AACT;AAmTO,MAAM,SAAS,CAgCpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAwBiB;AACf,QAAM,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,EAAA;AAEhE,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  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions, UseFieldOptionsBound } 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TFormOnDynamic,\n    TFormOnDynamicAsync,\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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n  opts: UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\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        TFormOnDynamic,\n        TFormOnDynamicAsync,\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 [\n            state.meta,\n            Object.keys((state.value as unknown) ?? []).length,\n          ]\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 */\ninterface 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnDynamic,\n    TFormOnDynamicAsync,\n    TFormOnServer,\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\ninterface FieldComponentBoundProps<\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TPatentSubmitMeta,\n  ExtendedApi = {},\n> extends UseFieldOptionsBound<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync\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      TOnDynamic,\n      TOnDynamicAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync,\n      TFormOnDynamic,\n      TFormOnDynamicAsync,\n      TFormOnServer,\n      TPatentSubmitMeta\n    > &\n      ExtendedApi,\n  ) => ReactNode\n}\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  in out TParentData,\n  in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnChangeAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnBlurAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnSubmitAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  in out TFormOnDynamicAsync extends\n    | undefined\n    | FormAsyncValidateOrFn<TParentData>,\n  in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  in out TPatentSubmitMeta,\n  in out 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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentBoundProps<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\n  TFormOnServer,\n  TPatentSubmitMeta,\n  ExtendedApi\n>) => ReactNode\n\n/**\n * A type alias representing a field component for a form lens data type.\n */\nexport type LensFieldComponent<\n  in out TLensData,\n  in out TParentSubmitMeta,\n  in out ExtendedApi = {},\n> = <\n  const TName extends DeepKeys<TLensData>,\n  TData extends DeepValue<TLensData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,\n  TOnDynamicAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<unknown, string, TData>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentBoundProps<\n    unknown,\n    string,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    undefined | FormAsyncValidateOrFn<unknown>,\n    TParentSubmitMeta,\n    ExtendedApi\n  >,\n  'name' | 'validators'\n> & {\n  name: TName\n  validators?: Omit<\n    FieldValidators<\n      unknown,\n      string,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync\n    >,\n    'onChangeListenTo' | 'onBlurListenTo'\n  > & {\n    /**\n     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes\n     */\n    onChangeListenTo?: DeepKeys<TLensData>[]\n    /**\n     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes\n     */\n    onBlurListenTo?: DeepKeys<TLensData>[]\n  }\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  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnDynamicAsync 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  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnDynamicAsync 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  TOnDynamic,\n  TOnDynamicAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnDynamic,\n  TFormOnDynamicAsync,\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    any,\n    any,\n    any,\n    any\n  >\n>\n"],"names":[],"mappings":";;;;;AAsIO,SAAS,SAiCd,MAyBA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAChC,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cAcA;AAEN,gBAAY,QAAQ;AAEpB,WAAO;AAAA,EACT,CAAC;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EACtB,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,KAAM,MAAM,SAAqB,CAAA,CAAE,EAAE;AAAA,MAAA;AAAA,IAEhD,IACA;AAAA,EAAA;AAGN,SAAO;AACT;AAkVO,MAAM,SAAS,CAgCpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAwBiB;AACf,QAAM,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,EAAA;AAEhE,yCAAW,UAAA,aAAA,CAAa;AAC1B;"}

package/dist/esm/useFieldGroup.js

@@ -19,23 +19,11 @@ function useFieldGroup(opts) {
     extendedApi.AppForm = function AppForm(appFormProps) {
       return /* @__PURE__ */ jsx(form.AppForm, { ...appFormProps });
     };
-    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
-      return /* @__PURE__ */ jsx(
-        form.AppField,
-        {
-          name: formLensApi.getFormFieldName(name),
-          ...appFieldProps
-        }
-      );
+    extendedApi.AppField = function AppField(props) {
+      return /* @__PURE__ */ jsx(form.AppField, { ...formLensApi.getFormFieldOptions(props) });
     };
-    extendedApi.Field = function Field({ name, ...fieldProps }) {
-      return /* @__PURE__ */ jsx(
-        form.Field,
-        {
-          name: formLensApi.getFormFieldName(name),
-          ...fieldProps
-        }
-      );
+    extendedApi.Field = function Field(props) {
+      return /* @__PURE__ */ jsx(form.Field, { ...formLensApi.getFormFieldOptions(props) });
     };
     extendedApi.Subscribe = function Subscribe(props) {
       return /* @__PURE__ */ jsx(

package/dist/esm/useFieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldGroup.js","sources":["../../src/useFieldGroup.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldGroupApi,\n  DeepKeysOfType,\n  FieldGroupState,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { AppFieldExtendedReactFormApi } from './createFormHook'\nimport type { ComponentType, PropsWithChildren, ReactNode } from 'react'\nimport type { LensFieldComponent } from './useField'\n\nfunction LocalSubscribe({\n  lens,\n  selector,\n  children,\n}: PropsWithChildren<{\n  lens: AnyFieldGroupApi\n  selector: (state: FieldGroupState<any>) => FieldGroupState<any>\n}>) {\n  const data = useStore(lens.store, selector)\n\n  return functionalUpdate(children, data)\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync 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> = FieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: LensFieldComponent<\n      TFieldGroupData,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>\n\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {\n      selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => ReactNode\n  }\n\nexport function useFieldGroup<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta = never,\n>(opts: {\n  form:\n    | AppFieldExtendedReactFormApi<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n    | AppFieldExtendedReactFieldGroupApi<\n        // Since this only occurs if you nest it within other form lenses, it can be more\n        // lenient with the types.\n        unknown,\n        TFormData,\n        string | FieldsMap<unknown, TFormData>,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n  fields: TFields\n  defaultValues?: TFieldGroupData\n  onSubmitMeta?: TSubmitMeta\n  formComponents: TFormComponents\n}): AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta,\n  TComponents,\n  TFormComponents\n> {\n  const [formLensApi] = useState(() => {\n    const api = new FieldGroupApi(opts)\n    const form =\n      opts.form instanceof FieldGroupApi\n        ? (opts.form.form as AppFieldExtendedReactFormApi<\n            TFormData,\n            TOnMount,\n            TOnChange,\n            TOnChangeAsync,\n            TOnBlur,\n            TOnBlurAsync,\n            TOnSubmit,\n            TOnSubmitAsync,\n            TOnDynamic,\n            TOnDynamicAsync,\n            TOnServer,\n            TSubmitMeta,\n            TComponents,\n            TFormComponents\n          >)\n        : opts.form\n\n    const extendedApi: AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    > = api as never\n\n    extendedApi.AppForm = function AppForm(appFormProps) {\n      return <form.AppForm {...appFormProps} />\n    }\n\n    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {\n      return (\n        <form.AppField\n          name={formLensApi.getFormFieldName(name)}\n          {...(appFieldProps as any)}\n        />\n      ) as never\n    }\n\n    extendedApi.Field = function Field({ name, ...fieldProps }) {\n      return (\n        <form.Field\n          name={formLensApi.getFormFieldName(name)}\n          {...(fieldProps as any)}\n        />\n      ) as never\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          lens={formLensApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return Object.assign(extendedApi, {\n      ...opts.formComponents,\n    }) as AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    >\n  })\n\n  useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi])\n\n  return formLensApi\n}\n"],"names":[],"mappings":";;;;;AAgBA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAO,SAAS,KAAK,OAAO,QAAQ;AAE1C,SAAO,iBAAiB,UAAU,IAAI;AACxC;AA6DO,SAAS,cAmBd,MA2DA;AACA,QAAM,CAAC,WAAW,IAAI,SAAS,MAAM;AACnC,UAAM,MAAM,IAAI,cAAc,IAAI;AAClC,UAAM,OACJ,KAAK,gBAAgB,gBAChB,KAAK,KAAK,OAgBX,KAAK;AAEX,UAAM,cAiBF;AAEJ,gBAAY,UAAU,SAAS,QAAQ,cAAc;AACnD,aAAO,oBAAC,KAAK,SAAL,EAAc,GAAG,aAAA,CAAc;AAAA,IACzC;AAEA,gBAAY,WAAW,SAAS,SAAS,EAAE,MAAM,GAAG,iBAAiB;AACnE,aACE;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM,YAAY,iBAAiB,IAAI;AAAA,UACtC,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,gBAAY,QAAQ,SAAS,MAAM,EAAE,MAAM,GAAG,cAAc;AAC1D,aACE;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM,YAAY,iBAAiB,IAAI;AAAA,UACtC,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGX;AAEA,gBAAY,YAAY,SAAS,UAAU,OAAY;AACrD,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGtB;AAEA,WAAO,OAAO,OAAO,aAAa;AAAA,MAChC,GAAG,KAAK;AAAA,IAAA,CACT;AAAA,EAkBH,CAAC;AAED,4BAA0B,YAAY,OAAO,CAAC,WAAW,CAAC;AAE1D,SAAO;AACT;"}
+{"version":3,"file":"useFieldGroup.js","sources":["../../src/useFieldGroup.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldGroupApi,\n  DeepKeysOfType,\n  FieldGroupState,\n  FieldsMap,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { AppFieldExtendedReactFormApi } from './createFormHook'\nimport type { ComponentType, PropsWithChildren, ReactNode } from 'react'\nimport type { LensFieldComponent } from './useField'\n\nfunction LocalSubscribe({\n  lens,\n  selector,\n  children,\n}: PropsWithChildren<{\n  lens: AnyFieldGroupApi\n  selector: (state: FieldGroupState<any>) => FieldGroupState<any>\n}>) {\n  const data = useStore(lens.store, selector)\n\n  return functionalUpdate(children, data)\n}\n\n/**\n * @private\n */\nexport type AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync 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> = FieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  NoInfer<TFormComponents> & {\n    AppField: LensFieldComponent<\n      TFieldGroupData,\n      TSubmitMeta,\n      NoInfer<TFieldComponents>\n    >\n    AppForm: ComponentType<PropsWithChildren>\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>\n\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {\n      selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => ReactNode\n  }\n\nexport function useFieldGroup<\n  TFormData,\n  TFieldGroupData,\n  TFields extends\n    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n    | FieldsMap<TFormData, TFieldGroupData>,\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  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TComponents extends Record<string, ComponentType<any>>,\n  TFormComponents extends Record<string, ComponentType<any>>,\n  TSubmitMeta = never,\n>(opts: {\n  form:\n    | AppFieldExtendedReactFormApi<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n    | AppFieldExtendedReactFieldGroupApi<\n        // Since this only occurs if you nest it within other form lenses, it can be more\n        // lenient with the types.\n        unknown,\n        TFormData,\n        string | FieldsMap<unknown, TFormData>,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        any,\n        TSubmitMeta,\n        TComponents,\n        TFormComponents\n      >\n  fields: TFields\n  defaultValues?: TFieldGroupData\n  onSubmitMeta?: TSubmitMeta\n  formComponents: TFormComponents\n}): AppFieldExtendedReactFieldGroupApi<\n  TFormData,\n  TFieldGroupData,\n  TFields,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta,\n  TComponents,\n  TFormComponents\n> {\n  const [formLensApi] = useState(() => {\n    const api = new FieldGroupApi(opts)\n    const form =\n      opts.form instanceof FieldGroupApi\n        ? (opts.form.form as AppFieldExtendedReactFormApi<\n            TFormData,\n            TOnMount,\n            TOnChange,\n            TOnChangeAsync,\n            TOnBlur,\n            TOnBlurAsync,\n            TOnSubmit,\n            TOnSubmitAsync,\n            TOnDynamic,\n            TOnDynamicAsync,\n            TOnServer,\n            TSubmitMeta,\n            TComponents,\n            TFormComponents\n          >)\n        : opts.form\n\n    const extendedApi: AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    > = api as never\n\n    extendedApi.AppForm = function AppForm(appFormProps) {\n      return <form.AppForm {...appFormProps} />\n    }\n\n    extendedApi.AppField = function AppField(props) {\n      return (\n        <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />\n      )\n    }\n\n    extendedApi.Field = function Field(props) {\n      return <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          lens={formLensApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return Object.assign(extendedApi, {\n      ...opts.formComponents,\n    }) as AppFieldExtendedReactFieldGroupApi<\n      TFormData,\n      TFieldGroupData,\n      TFields,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta,\n      TComponents,\n      TFormComponents\n    >\n  })\n\n  useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi])\n\n  return formLensApi\n}\n"],"names":[],"mappings":";;;;;AAgBA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAO,SAAS,KAAK,OAAO,QAAQ;AAE1C,SAAO,iBAAiB,UAAU,IAAI;AACxC;AA6DO,SAAS,cAmBd,MA2DA;AACA,QAAM,CAAC,WAAW,IAAI,SAAS,MAAM;AACnC,UAAM,MAAM,IAAI,cAAc,IAAI;AAClC,UAAM,OACJ,KAAK,gBAAgB,gBAChB,KAAK,KAAK,OAgBX,KAAK;AAEX,UAAM,cAiBF;AAEJ,gBAAY,UAAU,SAAS,QAAQ,cAAc;AACnD,aAAO,oBAAC,KAAK,SAAL,EAAc,GAAG,aAAA,CAAc;AAAA,IACzC;AAEA,gBAAY,WAAW,SAAS,SAAS,OAAO;AAC9C,aACE,oBAAC,KAAK,UAAL,EAAe,GAAI,YAAY,oBAAoB,KAAK,GAAW;AAAA,IAExE;AAEA,gBAAY,QAAQ,SAAS,MAAM,OAAO;AACxC,aAAO,oBAAC,KAAK,OAAL,EAAY,GAAI,YAAY,oBAAoB,KAAK,GAAW;AAAA,IAC1E;AAEA,gBAAY,YAAY,SAAS,UAAU,OAAY;AACrD,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGtB;AAEA,WAAO,OAAO,OAAO,aAAa;AAAA,MAChC,GAAG,KAAK;AAAA,IAAA,CACT;AAAA,EAkBH,CAAC;AAED,4BAA0B,YAAY,OAAO,CAAC,WAAW,CAAC;AAE1D,SAAO;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "1.19.5",
+  "version": "1.20.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -70,7 +70,7 @@
     "@tanstack/react-store": "^0.7.4",
     "decode-formdata": "^0.9.0",
     "devalue": "^5.3.2",
-    "@tanstack/form-core": "1.19.5"
+    "@tanstack/form-core": "1.20.0"
   },
   "devDependencies": {
     "@tanstack/react-start": "^1.131.36",

package/src/useField.tsx

@@ -7,6 +7,7 @@ import type {
   DeepValue,
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
+  FieldValidators,
   FormAsyncValidateOrFn,
   FormValidateOrFn,
 } from '@tanstack/form-core'
@@ -516,32 +517,63 @@ export type LensFieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentBoundProps<
-  unknown,
-  string,
-  TData,
-  TOnMount,
-  TOnChange,
-  TOnChangeAsync,
-  TOnBlur,
-  TOnBlurAsync,
-  TOnSubmit,
-  TOnSubmitAsync,
-  TOnDynamic,
-  TOnDynamicAsync,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  TParentSubmitMeta,
-  ExtendedApi
-> & { name: TName }) => ReactNode
+}: Omit<
+  FieldComponentBoundProps<
+    unknown,
+    string,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    TParentSubmitMeta,
+    ExtendedApi
+  >,
+  'name' | 'validators'
+> & {
+  name: TName
+  validators?: Omit<
+    FieldValidators<
+      unknown,
+      string,
+      TData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync
+    >,
+    'onChangeListenTo' | 'onBlurListenTo'
+  > & {
+    /**
+     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+     */
+    onChangeListenTo?: DeepKeys<TLensData>[]
+    /**
+     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+     */
+    onBlurListenTo?: DeepKeys<TLensData>[]
+  }
+}) => ReactNode
 
 /**
  * A function component that takes field options and a render function as children and returns a React component.

package/src/useFieldGroup.tsx

@@ -210,22 +210,14 @@ export function useFieldGroup<
       return <form.AppForm {...appFormProps} />
     }
 
-    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
+    extendedApi.AppField = function AppField(props) {
       return (
-        <form.AppField
-          name={formLensApi.getFormFieldName(name)}
-          {...(appFieldProps as any)}
-        />
-      ) as never
+        <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />
+      )
     }
 
-    extendedApi.Field = function Field({ name, ...fieldProps }) {
-      return (
-        <form.Field
-          name={formLensApi.getFormFieldName(name)}
-          {...(fieldProps as any)}
-        />
-      ) as never
+    extendedApi.Field = function Field(props) {
+      return <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />
     }
 
     extendedApi.Subscribe = function Subscribe(props: any) {