@tanstack/react-form 1.27.2 → 1.27.4

package/dist/cjs/useField.cjs

@@ -24,7 +24,10 @@ function useField(opts) {
     );
     setPrevOptions({ form: opts.form, name: opts.name });
   }
-  const reactiveStateValue = reactStore.useStore(fieldApi.store, (state) => state.value);
+  const reactiveStateValue = reactStore.useStore(
+    fieldApi.store,
+    opts.mode === "array" ? (state) => Object.keys(state.value ?? []).length : (state) => state.value
+  );
   const reactiveMetaIsTouched = reactStore.useStore(
     fieldApi.store,
     (state) => state.meta.isTouched
@@ -54,7 +57,9 @@ function useField(opts) {
       ...fieldApi,
       get state() {
         return {
-          value: reactiveStateValue,
+          // For array mode, reactiveStateValue is the length (for reactivity tracking),
+          // so we need to get the actual value from fieldApi
+          value: opts.mode === "array" ? fieldApi.state.value : reactiveStateValue,
           get meta() {
             return {
               ...fieldApi.state.meta,
@@ -74,6 +79,7 @@ function useField(opts) {
     return extendedApi;
   }, [
     fieldApi,
+    opts.mode,
     reactiveStateValue,
     reactiveMetaIsTouched,
     reactiveMetaIsBlurred,
@@ -86,15 +92,6 @@ function useField(opts) {
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     fieldApi.update(opts);
   });
-  reactStore.useStore(
-    fieldApi.store,
-    opts.mode === "array" ? (state) => {
-      return [
-        state.meta,
-        Object.keys(state.value ?? []).length
-      ];
-    } : void 0
-  );
   return extendedFieldApi;
 }
 const Field = (({

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useRef, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldApi,\n  AnyFieldMeta,\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactElement, 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  // Keep a snapshot of options so that React Compiler doesn't\n  // wrongly optimize fieldApi.\n  const [prevOptions, setPrevOptions] = useState(() => ({\n    form: opts.form,\n    name: opts.name,\n  }))\n\n  const [fieldApi, setFieldApi] = useState(() => {\n    return new FieldApi({\n      ...opts,\n    })\n  })\n\n  // We only want to\n  // update on name changes since those are at risk of becoming stale. The field\n  // state must be up to date for the internal JSX render.\n  // The other options can freely be in `fieldApi.update`\n  if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {\n    setFieldApi(\n      new FieldApi({\n        ...opts,\n      }),\n    )\n    setPrevOptions({ form: opts.form, name: opts.name })\n  }\n\n  const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)\n  const reactiveMetaIsTouched = useStore(\n    fieldApi.store,\n    (state) => state.meta.isTouched,\n  )\n  const reactiveMetaIsBlurred = useStore(\n    fieldApi.store,\n    (state) => state.meta.isBlurred,\n  )\n  const reactiveMetaIsDirty = useStore(\n    fieldApi.store,\n    (state) => state.meta.isDirty,\n  )\n  const reactiveMetaErrorMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorMap,\n  )\n  const reactiveMetaErrorSourceMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorSourceMap,\n  )\n  const reactiveMetaIsValidating = useStore(\n    fieldApi.store,\n    (state) => state.meta.isValidating,\n  )\n\n  // This makes me sad, but if I understand correctly, this is what we have to do for reactivity to work properly with React compiler.\n  const extendedFieldApi = useMemo(() => {\n    const reactiveFieldApi = {\n      ...fieldApi,\n      get state() {\n        return {\n          value: reactiveStateValue,\n          get meta() {\n            return {\n              ...fieldApi.state.meta,\n              isTouched: reactiveMetaIsTouched,\n              isBlurred: reactiveMetaIsBlurred,\n              isDirty: reactiveMetaIsDirty,\n              errorMap: reactiveMetaErrorMap,\n              errorSourceMap: reactiveMetaErrorSourceMap,\n              isValidating: reactiveMetaIsValidating,\n            } satisfies AnyFieldMeta\n          },\n        } satisfies AnyFieldApi['state']\n      },\n    }\n\n    const extendedApi: 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      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      > = reactiveFieldApi as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  }, [\n    fieldApi,\n    reactiveStateValue,\n    reactiveMetaIsTouched,\n    reactiveMetaIsBlurred,\n    reactiveMetaIsDirty,\n    reactiveMetaErrorMap,\n    reactiveMetaErrorSourceMap,\n    reactiveMetaIsValidating,\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 extendedFieldApi\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>) => ReturnType<FunctionComponent>\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}) => ReturnType<FunctionComponent>\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>): ReturnType<FunctionComponent> => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    [children, fieldApi],\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":["useStore","useIsomorphicLayoutEffect","useMemo"],"mappings":";;;;;;;;AA0IO;AA6DL;AAAsD;AACzC;AACA;AAGb;AACE;AAAoB;AACf;AACJ;AAOH;AACE;AAAA;AACe;AACR;AACJ;AAEH;AAAmD;AAGrD;AACA;AAA8BA;AACnB;AACa;AAExB;AAA8BA;AACnB;AACa;AAExB;AAA4BA;AACjB;AACa;AAExB;AAA6BA;AAClB;AACa;AAExB;AAAmCA;AACxB;AACa;AAExB;AAAiCA;AACtB;AACa;AAIxB;AACE;AAAyB;AACpB;AAED;AAAO;AACE;AAEL;AAAO;AACa;AACP;AACA;AACF;AACC;AACM;AACF;AAAA;AAElB;AAAA;AAEJ;AAGF;AAwCA;AAEA;AAAO;AACN;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGFC;AAMAA;AACE;AAAoB;AAGtBD;AAAAA;AACW;AAGH;AAAO;AACC;AACsC;AAAA;AAGhD;AAGN;AACF;AAkVO;AAgCL;AACA;AAEF;AAyBE;AAEA;AAAqBE;AAC6B;AAC7B;AAErB;AACF;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useRef, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldApi,\n  AnyFieldMeta,\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactElement, 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  // Keep a snapshot of options so that React Compiler doesn't\n  // wrongly optimize fieldApi.\n  const [prevOptions, setPrevOptions] = useState(() => ({\n    form: opts.form,\n    name: opts.name,\n  }))\n\n  const [fieldApi, setFieldApi] = useState(() => {\n    return new FieldApi({\n      ...opts,\n    })\n  })\n\n  // We only want to\n  // update on name changes since those are at risk of becoming stale. The field\n  // state must be up to date for the internal JSX render.\n  // The other options can freely be in `fieldApi.update`\n  if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {\n    setFieldApi(\n      new FieldApi({\n        ...opts,\n      }),\n    )\n    setPrevOptions({ form: opts.form, name: opts.name })\n  }\n\n  // For array mode, only track length changes to avoid re-renders when child properties change\n  // See: https://github.com/TanStack/form/issues/1925\n  const reactiveStateValue = useStore(\n    fieldApi.store,\n    (opts.mode === 'array'\n      ? (state) => Object.keys((state.value as unknown) ?? []).length\n      : (state) => state.value) as (\n      state: typeof fieldApi.state,\n    ) => TData | number,\n  )\n  const reactiveMetaIsTouched = useStore(\n    fieldApi.store,\n    (state) => state.meta.isTouched,\n  )\n  const reactiveMetaIsBlurred = useStore(\n    fieldApi.store,\n    (state) => state.meta.isBlurred,\n  )\n  const reactiveMetaIsDirty = useStore(\n    fieldApi.store,\n    (state) => state.meta.isDirty,\n  )\n  const reactiveMetaErrorMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorMap,\n  )\n  const reactiveMetaErrorSourceMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorSourceMap,\n  )\n  const reactiveMetaIsValidating = useStore(\n    fieldApi.store,\n    (state) => state.meta.isValidating,\n  )\n\n  // This makes me sad, but if I understand correctly, this is what we have to do for reactivity to work properly with React compiler.\n  const extendedFieldApi = useMemo(() => {\n    const reactiveFieldApi = {\n      ...fieldApi,\n      get state() {\n        return {\n          // For array mode, reactiveStateValue is the length (for reactivity tracking),\n          // so we need to get the actual value from fieldApi\n          value:\n            opts.mode === 'array' ? fieldApi.state.value : reactiveStateValue,\n          get meta() {\n            return {\n              ...fieldApi.state.meta,\n              isTouched: reactiveMetaIsTouched,\n              isBlurred: reactiveMetaIsBlurred,\n              isDirty: reactiveMetaIsDirty,\n              errorMap: reactiveMetaErrorMap,\n              errorSourceMap: reactiveMetaErrorSourceMap,\n              isValidating: reactiveMetaIsValidating,\n            } satisfies AnyFieldMeta\n          },\n        } satisfies AnyFieldApi['state']\n      },\n    }\n\n    const extendedApi: 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      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      > = reactiveFieldApi as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  }, [\n    fieldApi,\n    opts.mode,\n    reactiveStateValue,\n    reactiveMetaIsTouched,\n    reactiveMetaIsBlurred,\n    reactiveMetaIsDirty,\n    reactiveMetaErrorMap,\n    reactiveMetaErrorSourceMap,\n    reactiveMetaIsValidating,\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  return extendedFieldApi\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>) => ReturnType<FunctionComponent>\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}) => ReturnType<FunctionComponent>\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>): ReturnType<FunctionComponent> => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    [children, fieldApi],\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":["useStore","useIsomorphicLayoutEffect","useMemo"],"mappings":";;;;;;;;AA0IO;AA6DL;AAAsD;AACzC;AACA;AAGb;AACE;AAAoB;AACf;AACJ;AAOH;AACE;AAAA;AACe;AACR;AACJ;AAEH;AAAmD;AAKrD;AAA2BA;AAChB;AAGY;AAIvB;AAA8BA;AACnB;AACa;AAExB;AAA8BA;AACnB;AACa;AAExB;AAA4BA;AACjB;AACa;AAExB;AAA6BA;AAClB;AACa;AAExB;AAAmCA;AACxB;AACa;AAExB;AAAiCA;AACtB;AACa;AAIxB;AACE;AAAyB;AACpB;AAED;AAAO;AAAA;AAAA;AAI4C;AAE/C;AAAO;AACa;AACP;AACA;AACF;AACC;AACM;AACF;AAAA;AAElB;AAAA;AAEJ;AAGF;AAwCA;AAEA;AAAO;AACN;AACD;AACK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AAGFC;AAMAA;AACE;AAAoB;AAGtB;AACF;AAkVO;AAgCL;AACA;AAEF;AAyBE;AAEA;AAAqBC;AAC6B;AAC7B;AAErB;AACF;;;"}

package/dist/esm/useField.js

@@ -22,7 +22,10 @@ function useField(opts) {
     );
     setPrevOptions({ form: opts.form, name: opts.name });
   }
-  const reactiveStateValue = useStore(fieldApi.store, (state) => state.value);
+  const reactiveStateValue = useStore(
+    fieldApi.store,
+    opts.mode === "array" ? (state) => Object.keys(state.value ?? []).length : (state) => state.value
+  );
   const reactiveMetaIsTouched = useStore(
     fieldApi.store,
     (state) => state.meta.isTouched
@@ -52,7 +55,9 @@ function useField(opts) {
       ...fieldApi,
       get state() {
         return {
-          value: reactiveStateValue,
+          // For array mode, reactiveStateValue is the length (for reactivity tracking),
+          // so we need to get the actual value from fieldApi
+          value: opts.mode === "array" ? fieldApi.state.value : reactiveStateValue,
           get meta() {
             return {
               ...fieldApi.state.meta,
@@ -72,6 +77,7 @@ function useField(opts) {
     return extendedApi;
   }, [
     fieldApi,
+    opts.mode,
     reactiveStateValue,
     reactiveMetaIsTouched,
     reactiveMetaIsBlurred,
@@ -84,15 +90,6 @@ function useField(opts) {
   useIsomorphicLayoutEffect(() => {
     fieldApi.update(opts);
   });
-  useStore(
-    fieldApi.store,
-    opts.mode === "array" ? (state) => {
-      return [
-        state.meta,
-        Object.keys(state.value ?? []).length
-      ];
-    } : void 0
-  );
   return extendedFieldApi;
 }
 const Field = (({

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useRef, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldApi,\n  AnyFieldMeta,\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactElement, 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  // Keep a snapshot of options so that React Compiler doesn't\n  // wrongly optimize fieldApi.\n  const [prevOptions, setPrevOptions] = useState(() => ({\n    form: opts.form,\n    name: opts.name,\n  }))\n\n  const [fieldApi, setFieldApi] = useState(() => {\n    return new FieldApi({\n      ...opts,\n    })\n  })\n\n  // We only want to\n  // update on name changes since those are at risk of becoming stale. The field\n  // state must be up to date for the internal JSX render.\n  // The other options can freely be in `fieldApi.update`\n  if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {\n    setFieldApi(\n      new FieldApi({\n        ...opts,\n      }),\n    )\n    setPrevOptions({ form: opts.form, name: opts.name })\n  }\n\n  const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)\n  const reactiveMetaIsTouched = useStore(\n    fieldApi.store,\n    (state) => state.meta.isTouched,\n  )\n  const reactiveMetaIsBlurred = useStore(\n    fieldApi.store,\n    (state) => state.meta.isBlurred,\n  )\n  const reactiveMetaIsDirty = useStore(\n    fieldApi.store,\n    (state) => state.meta.isDirty,\n  )\n  const reactiveMetaErrorMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorMap,\n  )\n  const reactiveMetaErrorSourceMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorSourceMap,\n  )\n  const reactiveMetaIsValidating = useStore(\n    fieldApi.store,\n    (state) => state.meta.isValidating,\n  )\n\n  // This makes me sad, but if I understand correctly, this is what we have to do for reactivity to work properly with React compiler.\n  const extendedFieldApi = useMemo(() => {\n    const reactiveFieldApi = {\n      ...fieldApi,\n      get state() {\n        return {\n          value: reactiveStateValue,\n          get meta() {\n            return {\n              ...fieldApi.state.meta,\n              isTouched: reactiveMetaIsTouched,\n              isBlurred: reactiveMetaIsBlurred,\n              isDirty: reactiveMetaIsDirty,\n              errorMap: reactiveMetaErrorMap,\n              errorSourceMap: reactiveMetaErrorSourceMap,\n              isValidating: reactiveMetaIsValidating,\n            } satisfies AnyFieldMeta\n          },\n        } satisfies AnyFieldApi['state']\n      },\n    }\n\n    const extendedApi: 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      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      > = reactiveFieldApi as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  }, [\n    fieldApi,\n    reactiveStateValue,\n    reactiveMetaIsTouched,\n    reactiveMetaIsBlurred,\n    reactiveMetaIsDirty,\n    reactiveMetaErrorMap,\n    reactiveMetaErrorSourceMap,\n    reactiveMetaIsValidating,\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 extendedFieldApi\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>) => ReturnType<FunctionComponent>\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}) => ReturnType<FunctionComponent>\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>): ReturnType<FunctionComponent> => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    [children, fieldApi],\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":";;;;;;AA0IO;AA6DL;AAAsD;AACzC;AACA;AAGb;AACE;AAAoB;AACf;AACJ;AAOH;AACE;AAAA;AACe;AACR;AACJ;AAEH;AAAmD;AAGrD;AACA;AAA8B;AACnB;AACa;AAExB;AAA8B;AACnB;AACa;AAExB;AAA4B;AACjB;AACa;AAExB;AAA6B;AAClB;AACa;AAExB;AAAmC;AACxB;AACa;AAExB;AAAiC;AACtB;AACa;AAIxB;AACE;AAAyB;AACpB;AAED;AAAO;AACE;AAEL;AAAO;AACa;AACP;AACA;AACF;AACC;AACM;AACF;AAAA;AAElB;AAAA;AAEJ;AAGF;AAwCA;AAEA;AAAO;AACN;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AAMA;AACE;AAAoB;AAGtB;AAAA;AACW;AAGH;AAAO;AACC;AACsC;AAAA;AAGhD;AAGN;AACF;AAkVO;AAgCL;AACA;AAEF;AAyBE;AAEA;AAAqB;AAC6B;AAC7B;AAErB;AACF;;;;;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useRef, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFieldApi,\n  AnyFieldMeta,\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, ReactElement, 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  // Keep a snapshot of options so that React Compiler doesn't\n  // wrongly optimize fieldApi.\n  const [prevOptions, setPrevOptions] = useState(() => ({\n    form: opts.form,\n    name: opts.name,\n  }))\n\n  const [fieldApi, setFieldApi] = useState(() => {\n    return new FieldApi({\n      ...opts,\n    })\n  })\n\n  // We only want to\n  // update on name changes since those are at risk of becoming stale. The field\n  // state must be up to date for the internal JSX render.\n  // The other options can freely be in `fieldApi.update`\n  if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {\n    setFieldApi(\n      new FieldApi({\n        ...opts,\n      }),\n    )\n    setPrevOptions({ form: opts.form, name: opts.name })\n  }\n\n  // For array mode, only track length changes to avoid re-renders when child properties change\n  // See: https://github.com/TanStack/form/issues/1925\n  const reactiveStateValue = useStore(\n    fieldApi.store,\n    (opts.mode === 'array'\n      ? (state) => Object.keys((state.value as unknown) ?? []).length\n      : (state) => state.value) as (\n      state: typeof fieldApi.state,\n    ) => TData | number,\n  )\n  const reactiveMetaIsTouched = useStore(\n    fieldApi.store,\n    (state) => state.meta.isTouched,\n  )\n  const reactiveMetaIsBlurred = useStore(\n    fieldApi.store,\n    (state) => state.meta.isBlurred,\n  )\n  const reactiveMetaIsDirty = useStore(\n    fieldApi.store,\n    (state) => state.meta.isDirty,\n  )\n  const reactiveMetaErrorMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorMap,\n  )\n  const reactiveMetaErrorSourceMap = useStore(\n    fieldApi.store,\n    (state) => state.meta.errorSourceMap,\n  )\n  const reactiveMetaIsValidating = useStore(\n    fieldApi.store,\n    (state) => state.meta.isValidating,\n  )\n\n  // This makes me sad, but if I understand correctly, this is what we have to do for reactivity to work properly with React compiler.\n  const extendedFieldApi = useMemo(() => {\n    const reactiveFieldApi = {\n      ...fieldApi,\n      get state() {\n        return {\n          // For array mode, reactiveStateValue is the length (for reactivity tracking),\n          // so we need to get the actual value from fieldApi\n          value:\n            opts.mode === 'array' ? fieldApi.state.value : reactiveStateValue,\n          get meta() {\n            return {\n              ...fieldApi.state.meta,\n              isTouched: reactiveMetaIsTouched,\n              isBlurred: reactiveMetaIsBlurred,\n              isDirty: reactiveMetaIsDirty,\n              errorMap: reactiveMetaErrorMap,\n              errorSourceMap: reactiveMetaErrorSourceMap,\n              isValidating: reactiveMetaIsValidating,\n            } satisfies AnyFieldMeta\n          },\n        } satisfies AnyFieldApi['state']\n      },\n    }\n\n    const extendedApi: 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      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      > = reactiveFieldApi as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  }, [\n    fieldApi,\n    opts.mode,\n    reactiveStateValue,\n    reactiveMetaIsTouched,\n    reactiveMetaIsBlurred,\n    reactiveMetaIsDirty,\n    reactiveMetaErrorMap,\n    reactiveMetaErrorSourceMap,\n    reactiveMetaIsValidating,\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  return extendedFieldApi\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>) => ReturnType<FunctionComponent>\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}) => ReturnType<FunctionComponent>\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>): ReturnType<FunctionComponent> => {\n  const fieldApi = useField(fieldOptions as any)\n\n  const jsxToDisplay = useMemo(\n    () => functionalUpdate(children, fieldApi as any),\n    [children, fieldApi],\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":";;;;;;AA0IO;AA6DL;AAAsD;AACzC;AACA;AAGb;AACE;AAAoB;AACf;AACJ;AAOH;AACE;AAAA;AACe;AACR;AACJ;AAEH;AAAmD;AAKrD;AAA2B;AAChB;AAGY;AAIvB;AAA8B;AACnB;AACa;AAExB;AAA8B;AACnB;AACa;AAExB;AAA4B;AACjB;AACa;AAExB;AAA6B;AAClB;AACa;AAExB;AAAmC;AACxB;AACa;AAExB;AAAiC;AACtB;AACa;AAIxB;AACE;AAAyB;AACpB;AAED;AAAO;AAAA;AAAA;AAI4C;AAE/C;AAAO;AACa;AACP;AACA;AACF;AACC;AACM;AACF;AAAA;AAElB;AAAA;AAEJ;AAGF;AAwCA;AAEA;AAAO;AACN;AACD;AACK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AAMA;AACE;AAAoB;AAGtB;AACF;AAkVO;AAgCL;AACA;AAEF;AAyBE;AAEA;AAAqB;AAC6B;AAC7B;AAErB;AACF;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "1.27.2",
+  "version": "1.27.4",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.8.0",
-    "@tanstack/form-core": "1.27.2"
+    "@tanstack/form-core": "1.27.4"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/src/useField.tsx

@@ -221,7 +221,16 @@ export function useField<
     setPrevOptions({ form: opts.form, name: opts.name })
   }
 
-  const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)
+  // For array mode, only track length changes to avoid re-renders when child properties change
+  // See: https://github.com/TanStack/form/issues/1925
+  const reactiveStateValue = useStore(
+    fieldApi.store,
+    (opts.mode === 'array'
+      ? (state) => Object.keys((state.value as unknown) ?? []).length
+      : (state) => state.value) as (
+      state: typeof fieldApi.state,
+    ) => TData | number,
+  )
   const reactiveMetaIsTouched = useStore(
     fieldApi.store,
     (state) => state.meta.isTouched,
@@ -253,7 +262,10 @@ export function useField<
       ...fieldApi,
       get state() {
         return {
-          value: reactiveStateValue,
+          // For array mode, reactiveStateValue is the length (for reactivity tracking),
+          // so we need to get the actual value from fieldApi
+          value:
+            opts.mode === 'array' ? fieldApi.state.value : reactiveStateValue,
           get meta() {
             return {
               ...fieldApi.state.meta,
@@ -314,6 +326,7 @@ export function useField<
     return extendedApi
   }, [
     fieldApi,
+    opts.mode,
     reactiveStateValue,
     reactiveMetaIsTouched,
     reactiveMetaIsBlurred,
@@ -333,18 +346,6 @@ export function useField<
     fieldApi.update(opts)
   })
 
-  useStore(
-    fieldApi.store,
-    opts.mode === 'array'
-      ? (state) => {
-          return [
-            state.meta,
-            Object.keys((state.value as unknown) ?? []).length,
-          ]
-        }
-      : undefined,
-  )
-
   return extendedFieldApi
 }