@tanstack/react-form 0.24.2 → 0.24.3

package/dist/cjs/createServerValidate.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const decodeFormdata = require("decode-formdata");
 const createServerValidate = (defaultOpts) => async (formData, info) => {
-  const { validatorAdapter, onServerValidate } = defaultOpts || {};
+  const { validatorAdapter, onServerValidate } = defaultOpts;
   const runValidator = (propsValue) => {
     if (validatorAdapter && typeof onServerValidate !== "function") {
       return validatorAdapter().validate(propsValue, onServerValidate);

package/dist/cjs/createServerValidate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createServerValidate.cjs","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n  FormApi,\n  FormOptions,\n  ValidationError,\n  Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n  value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n  ? FFN | OnServerValidateFn<TFormData>\n  : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormOptions<\n    TFormData,\n    TFormValidator extends\n      | Validator<TFormData, unknown>\n      | undefined = undefined,\n  > {\n    onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n  }\n}\n\ntype ValidateFormData<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n  formData: FormData,\n  info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n  (async (\n    formData: FormData,\n    info?: Parameters<typeof decode>[1],\n  ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n    const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n    const runValidator = (propsValue: { value: TFormData }) => {\n      if (validatorAdapter && typeof onServerValidate !== 'function') {\n        return validatorAdapter().validate(propsValue, onServerValidate)\n      }\n\n      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n    }\n\n    const data = decode(formData, info) as never as TFormData\n\n    const onServerError = runValidator({ value: data })\n\n    return {\n      errorMap: {\n        onServer: onServerError,\n      },\n      errors: onServerError ? [onServerError] : [],\n    }\n  }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n  errorMap: {\n    onServer: undefined,\n  },\n  errors: [],\n}\n"],"names":["decode"],"mappings":";;;AAuCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAOA,eAAAA,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;;;"}
+{"version":3,"file":"createServerValidate.cjs","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n  FormApi,\n  FormOptions,\n  ValidationError,\n  Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n  value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n  ? FFN | OnServerValidateFn<TFormData>\n  : OnServerValidateFn<TFormData>\n\ninterface ServerFormOptions<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> extends FormOptions<TFormData, TFormValidator> {\n  onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n}\n\ntype ValidateFormData<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n  formData: FormData,\n  info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts: ServerFormOptions<TFormData, TFormValidator>,\n) =>\n  (async (\n    formData: FormData,\n    info?: Parameters<typeof decode>[1],\n  ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n    const { validatorAdapter, onServerValidate } = defaultOpts\n\n    const runValidator = (propsValue: { value: TFormData }) => {\n      if (validatorAdapter && typeof onServerValidate !== 'function') {\n        return validatorAdapter().validate(propsValue, onServerValidate)\n      }\n\n      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n    }\n\n    const data = decode(formData, info) as never as TFormData\n\n    const onServerError = runValidator({ value: data })\n\n    return {\n      errorMap: {\n        onServer: onServerError,\n      },\n      errors: onServerError ? [onServerError] : [],\n    }\n  }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n  errorMap: {\n    onServer: undefined,\n  },\n  errors: [],\n}\n"],"names":["decode"],"mappings":";;;AAkCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAC5D,QAAA,EAAE,kBAAkB,iBAAqB,IAAA;AAEzC,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAOA,eAAAA,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;;;"}

package/dist/cjs/createServerValidate.d.cts

@@ -5,13 +5,11 @@ type OnServerValidateFn<TFormData> = (props: {
     value: TFormData;
 }) => ValidationError;
 type OnServerValidateOrFn<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = TFormValidator extends Validator<TFormData, infer FFN> ? FFN | OnServerValidateFn<TFormData> : OnServerValidateFn<TFormData>;
-declare module '@tanstack/form-core' {
-    interface FormOptions<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
-        onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
-    }
+interface ServerFormOptions<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> extends FormOptions<TFormData, TFormValidator> {
+    onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
 }
 type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
-export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
+export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts: ServerFormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
 export declare const initialFormState: {
     errorMap: {
         onServer: undefined;

package/dist/cjs/useField.cjs

@@ -12,8 +12,9 @@ function useField(opts) {
       form: opts.form,
       name: opts.name
     });
-    api.Field = Field;
-    return api;
+    const extendedApi = api;
+    extendedApi.Field = Field;
+    return extendedApi;
   });
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi]);
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  /**\n   * When using `@tanstack/react-form`, the core field API is extended at type level with additional methods for React-specific functionality:\n   */\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    /**\n     * A pre-bound and type-safe sub-field component using this field as a root.\n     */\n    Field: FieldComponent<TParentData, TFormValidator>\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  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n    'form'\n  >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi as never\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => NodeType\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>): NodeType => {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","Fragment","functionalUpdate"],"mappings":";;;;;;;AA2DO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAA,CAAE,EAAE,MAAM;AAAA,IAE3D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAC,SAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<TParentData, TFormValidator>\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  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n    'form'\n  >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =\n      api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => NodeType\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>): NodeType => {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","Fragment","functionalUpdate"],"mappings":";;;;;;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAA,CAAE,EAAE,MAAM;AAAA,IAE3D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAC,SAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;;;"}

package/dist/cjs/useField.d.cts

@@ -1,16 +1,11 @@
 import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
 import { NodeType, UseFieldOptions } from './types.cjs';
 
-declare module '@tanstack/form-core' {
+interface ReactFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
     /**
-     * When using `@tanstack/react-form`, the core field API is extended at type level with additional methods for React-specific functionality:
+     * A pre-bound and type-safe sub-field component using this field as a root.
      */
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
-        /**
-         * A pre-bound and type-safe sub-field component using this field as a root.
-         */
-        Field: FieldComponent<TParentData, TFormValidator>;
-    }
+    Field: FieldComponent<TParentData, TFormValidator>;
 }
 /**
  * A type representing a hook for using a field in a form with the given form data type.
@@ -24,7 +19,7 @@ export type UseField<TParentData, TFormValidator extends Validator<TParentData,
  *
  * @returns The `FieldApi` instance for the specified field.
  */
-export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & ReactFieldApi<TParentData, TFormValidator>;
 /**
  * @param children A render function that takes a field API instance and returns a React element.
  */

package/dist/cjs/useForm.cjs

@@ -9,21 +9,22 @@ const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
 function useForm(opts) {
   const [formApi] = react.useState(() => {
     const api = new formCore.FormApi(opts);
-    api.Field = function APIField(props) {
+    const extendedApi = api;
+    extendedApi.Field = function APIField(props) {
       return /* @__PURE__ */ jsxRuntime.jsx(useField.Field, { ...props, form: api });
     };
-    api.useField = (props) => useField.useField({ ...props, form: api });
-    api.useStore = (selector) => {
+    extendedApi.useField = (props) => useField.useField({ ...props, form: api });
+    extendedApi.useStore = (selector) => {
       return reactStore.useStore(api.store, selector);
     };
-    api.Subscribe = (props) => {
+    extendedApi.Subscribe = (props) => {
       return formCore.functionalUpdate(
         props.children,
         // eslint-disable-next-line react-hooks/rules-of-hooks
         reactStore.useStore(api.store, props.selector)
       );
     };
-    return api;
+    return extendedApi;
   });
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(formApi.mount, []);
   formApi.useStore((state) => state.isSubmitting);

package/dist/cjs/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n  /**\n   * When using `@tanstack/react-form`, the core form API is extended at type level with additional methods for React-specific functionality:\n   */\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: FieldComponent<TFormData, TFormValidator>\n    /**\n     * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n     */\n    useField: UseField<TFormData, TFormValidator>\n    /**\n     * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n     */\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n    }) => NodeType\n  }\n}\n\n/**\n * A custom React Hook that returns an instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n    api.Field = function APIField(props) {\n      return (<Field {...props} form={api} />) as never\n    }\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    api.useField = (props) => useField({ ...props, form: api })\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  /**\n   * formApi.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    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAuDO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\ninterface ReactFormApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<TFormData, TFormValidator>\n  /**\n   * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n   */\n  useField: UseField<TFormData, TFormValidator>\n  /**\n   * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n   */\n  useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n  ) => TSelected\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n    /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n  }) => NodeType\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    const extendedApi: typeof api & ReactFormApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return (<Field {...props} form={api} />) as never\n    }\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    extendedApi.useField = (props) => useField({ ...props, form: api })\n    extendedApi.useStore = (selector) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    extendedApi.Subscribe = (props) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  /**\n   * formApi.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    formApi.update(opts)\n  })\n\n  return formApi\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAuDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAIA,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAG3B,gBAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAEvC,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}

package/dist/cjs/useForm.d.cts

@@ -3,46 +3,45 @@ import { FieldComponent, UseField } from './useField.cjs';
 import { NoInfer } from '@tanstack/react-store';
 import { NodeType } from './types.cjs';
 
-declare module '@tanstack/form-core' {
+/**
+ * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+ */
+interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
     /**
-     * When using `@tanstack/react-form`, the core form API is extended at type level with additional methods for React-specific functionality:
+     * A React component to render form fields. With this, you can render and manage individual form fields.
      */
-    interface FormApi<TFormData, TFormValidator> {
-        /**
-         * A React component to render form fields. With this, you can render and manage individual form fields.
-         */
-        Field: FieldComponent<TFormData, TFormValidator>;
-        /**
-         * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-         */
-        useField: UseField<TFormData, TFormValidator>;
-        /**
-         * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-         */
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+    Field: FieldComponent<TFormData, TFormValidator>;
+    /**
+     * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
+     */
+    useField: UseField<TFormData, TFormValidator>;
+    /**
+     * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
+     */
+    useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+    /**
+     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+     */
+    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
         /**
-         * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
-         */
-        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-            /**
-            TypeScript versions <=5.0.4 have a bug that prevents
-            the type of the `TSelected` generic from being inferred
-            from the return type of this method.
-      
-            In these versions, `TSelected` will fall back to the default
-            type (or `unknown` if that's not defined).
-      
-            @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
-            @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
-            */
-            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
-            children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
-        }) => NodeType;
-    }
+          TypeScript versions <=5.0.4 have a bug that prevents
+          the type of the `TSelected` generic from being inferred
+          from the return type of this method.
+    
+          In these versions, `TSelected` will fall back to the default
+          type (or `unknown` if that's not defined).
+    
+          @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+          @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+          */
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+        children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
+    }) => NodeType;
 }
 /**
- * A custom React Hook that returns an instance of the `FormApi` class.
+ * A custom React Hook that returns an extended instance of the `FormApi` class.
  *
  * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
  */
-export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
+export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>;
+export {};

package/dist/cjs/useIsomorphicLayoutEffect.cjs

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
-const useIsomorphicLayoutEffect = (
-  // @ts-ignore
-  typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect
-);
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 //# sourceMappingURL=useIsomorphicLayoutEffect.cjs.map

package/dist/cjs/useIsomorphicLayoutEffect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n  // @ts-ignore\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":["useLayoutEffect","useEffect"],"mappings":";;;AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAcA,MAAAA,kBAAkBC,MAAA;AAAA;;"}
+{"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":["useLayoutEffect","useEffect"],"mappings":";;;AAEO,MAAM,4BACX,OAAO,WAAW,cAAcA,wBAAkBC,MAAAA;;"}

package/dist/esm/createServerValidate.d.ts

@@ -5,13 +5,11 @@ type OnServerValidateFn<TFormData> = (props: {
     value: TFormData;
 }) => ValidationError;
 type OnServerValidateOrFn<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = TFormValidator extends Validator<TFormData, infer FFN> ? FFN | OnServerValidateFn<TFormData> : OnServerValidateFn<TFormData>;
-declare module '@tanstack/form-core' {
-    interface FormOptions<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
-        onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
-    }
+interface ServerFormOptions<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> extends FormOptions<TFormData, TFormValidator> {
+    onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
 }
 type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
-export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
+export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts: ServerFormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
 export declare const initialFormState: {
     errorMap: {
         onServer: undefined;

package/dist/esm/createServerValidate.js

@@ -1,6 +1,6 @@
 import { decode } from "decode-formdata";
 const createServerValidate = (defaultOpts) => async (formData, info) => {
-  const { validatorAdapter, onServerValidate } = defaultOpts || {};
+  const { validatorAdapter, onServerValidate } = defaultOpts;
   const runValidator = (propsValue) => {
     if (validatorAdapter && typeof onServerValidate !== "function") {
       return validatorAdapter().validate(propsValue, onServerValidate);

package/dist/esm/createServerValidate.js.map

@@ -1 +1 @@
-{"version":3,"file":"createServerValidate.js","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n  FormApi,\n  FormOptions,\n  ValidationError,\n  Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n  value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n  ? FFN | OnServerValidateFn<TFormData>\n  : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormOptions<\n    TFormData,\n    TFormValidator extends\n      | Validator<TFormData, unknown>\n      | undefined = undefined,\n  > {\n    onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n  }\n}\n\ntype ValidateFormData<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n  formData: FormData,\n  info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n  (async (\n    formData: FormData,\n    info?: Parameters<typeof decode>[1],\n  ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n    const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n    const runValidator = (propsValue: { value: TFormData }) => {\n      if (validatorAdapter && typeof onServerValidate !== 'function') {\n        return validatorAdapter().validate(propsValue, onServerValidate)\n      }\n\n      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n    }\n\n    const data = decode(formData, info) as never as TFormData\n\n    const onServerError = runValidator({ value: data })\n\n    return {\n      errorMap: {\n        onServer: onServerError,\n      },\n      errors: onServerError ? [onServerError] : [],\n    }\n  }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n  errorMap: {\n    onServer: undefined,\n  },\n  errors: [],\n}\n"],"names":[],"mappings":";AAuCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAO,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;"}
+{"version":3,"file":"createServerValidate.js","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n  FormApi,\n  FormOptions,\n  ValidationError,\n  Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n  value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n  ? FFN | OnServerValidateFn<TFormData>\n  : OnServerValidateFn<TFormData>\n\ninterface ServerFormOptions<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> extends FormOptions<TFormData, TFormValidator> {\n  onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n}\n\ntype ValidateFormData<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n  formData: FormData,\n  info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts: ServerFormOptions<TFormData, TFormValidator>,\n) =>\n  (async (\n    formData: FormData,\n    info?: Parameters<typeof decode>[1],\n  ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n    const { validatorAdapter, onServerValidate } = defaultOpts\n\n    const runValidator = (propsValue: { value: TFormData }) => {\n      if (validatorAdapter && typeof onServerValidate !== 'function') {\n        return validatorAdapter().validate(propsValue, onServerValidate)\n      }\n\n      return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n    }\n\n    const data = decode(formData, info) as never as TFormData\n\n    const onServerError = runValidator({ value: data })\n\n    return {\n      errorMap: {\n        onServer: onServerError,\n      },\n      errors: onServerError ? [onServerError] : [],\n    }\n  }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n  errorMap: {\n    onServer: undefined,\n  },\n  errors: [],\n}\n"],"names":[],"mappings":";AAkCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAC5D,QAAA,EAAE,kBAAkB,iBAAqB,IAAA;AAEzC,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAO,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;"}

package/dist/esm/useField.d.ts

@@ -1,16 +1,11 @@
 import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
 import { NodeType, UseFieldOptions } from './types.js';
 
-declare module '@tanstack/form-core' {
+interface ReactFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
     /**
-     * When using `@tanstack/react-form`, the core field API is extended at type level with additional methods for React-specific functionality:
+     * A pre-bound and type-safe sub-field component using this field as a root.
      */
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
-        /**
-         * A pre-bound and type-safe sub-field component using this field as a root.
-         */
-        Field: FieldComponent<TParentData, TFormValidator>;
-    }
+    Field: FieldComponent<TParentData, TFormValidator>;
 }
 /**
  * A type representing a hook for using a field in a form with the given form data type.
@@ -24,7 +19,7 @@ export type UseField<TParentData, TFormValidator extends Validator<TParentData,
  *
  * @returns The `FieldApi` instance for the specified field.
  */
-export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & ReactFieldApi<TParentData, TFormValidator>;
 /**
  * @param children A render function that takes a field API instance and returns a React element.
  */

package/dist/esm/useField.js

@@ -10,8 +10,9 @@ function useField(opts) {
       form: opts.form,
       name: opts.name
     });
-    api.Field = Field;
-    return api;
+    const extendedApi = api;
+    extendedApi.Field = Field;
+    return extendedApi;
   });
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi]);
   useIsomorphicLayoutEffect(() => {

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  /**\n   * When using `@tanstack/react-form`, the core field API is extended at type level with additional methods for React-specific functionality:\n   */\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    /**\n     * A pre-bound and type-safe sub-field component using this field as a root.\n     */\n    Field: FieldComponent<TParentData, TFormValidator>\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  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n    'form'\n  >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi as never\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => NodeType\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>): NodeType => {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":[],"mappings":";;;;;AA2DO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAA,CAAE,EAAE,MAAM;AAAA,IAE3D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ninterface ReactFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  /**\n   * A pre-bound and type-safe sub-field component using this field as a root.\n   */\n  Field: FieldComponent<TParentData, TFormValidator>\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  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n    'form'\n  >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const [fieldApi] = useState(() => {\n    const api = new FieldApi({\n      ...opts,\n      form: opts.form,\n      name: opts.name,\n    })\n\n    const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =\n      api as never\n\n    extendedApi.Field = Field as never\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    fieldApi.update(opts)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value ?? []).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => NodeType\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  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>): NodeType => {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":[],"mappings":";;;;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAA,CAAE,EAAE,MAAM;AAAA,IAE3D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;"}

package/dist/esm/useForm.d.ts

@@ -3,46 +3,45 @@ import { FieldComponent, UseField } from './useField.js';
 import { NoInfer } from '@tanstack/react-store';
 import { NodeType } from './types.js';
 
-declare module '@tanstack/form-core' {
+/**
+ * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+ */
+interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
     /**
-     * When using `@tanstack/react-form`, the core form API is extended at type level with additional methods for React-specific functionality:
+     * A React component to render form fields. With this, you can render and manage individual form fields.
      */
-    interface FormApi<TFormData, TFormValidator> {
-        /**
-         * A React component to render form fields. With this, you can render and manage individual form fields.
-         */
-        Field: FieldComponent<TFormData, TFormValidator>;
-        /**
-         * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-         */
-        useField: UseField<TFormData, TFormValidator>;
-        /**
-         * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-         */
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+    Field: FieldComponent<TFormData, TFormValidator>;
+    /**
+     * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
+     */
+    useField: UseField<TFormData, TFormValidator>;
+    /**
+     * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
+     */
+    useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+    /**
+     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+     */
+    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
         /**
-         * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
-         */
-        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-            /**
-            TypeScript versions <=5.0.4 have a bug that prevents
-            the type of the `TSelected` generic from being inferred
-            from the return type of this method.
-      
-            In these versions, `TSelected` will fall back to the default
-            type (or `unknown` if that's not defined).
-      
-            @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
-            @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
-            */
-            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
-            children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
-        }) => NodeType;
-    }
+          TypeScript versions <=5.0.4 have a bug that prevents
+          the type of the `TSelected` generic from being inferred
+          from the return type of this method.
+    
+          In these versions, `TSelected` will fall back to the default
+          type (or `unknown` if that's not defined).
+    
+          @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+          @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+          */
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+        children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
+    }) => NodeType;
 }
 /**
- * A custom React Hook that returns an instance of the `FormApi` class.
+ * A custom React Hook that returns an extended instance of the `FormApi` class.
  *
  * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
  */
-export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
+export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>;
+export {};

package/dist/esm/useForm.js

@@ -7,21 +7,22 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 function useForm(opts) {
   const [formApi] = useState(() => {
     const api = new FormApi(opts);
-    api.Field = function APIField(props) {
+    const extendedApi = api;
+    extendedApi.Field = function APIField(props) {
       return /* @__PURE__ */ jsx(Field, { ...props, form: api });
     };
-    api.useField = (props) => useField({ ...props, form: api });
-    api.useStore = (selector) => {
+    extendedApi.useField = (props) => useField({ ...props, form: api });
+    extendedApi.useStore = (selector) => {
       return useStore(api.store, selector);
     };
-    api.Subscribe = (props) => {
+    extendedApi.Subscribe = (props) => {
       return functionalUpdate(
         props.children,
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useStore(api.store, props.selector)
       );
     };
-    return api;
+    return extendedApi;
   });
   useIsomorphicLayoutEffect(formApi.mount, []);
   formApi.useStore((state) => state.isSubmitting);

package/dist/esm/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n  /**\n   * When using `@tanstack/react-form`, the core form API is extended at type level with additional methods for React-specific functionality:\n   */\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    /**\n     * A React component to render form fields. With this, you can render and manage individual form fields.\n     */\n    Field: FieldComponent<TFormData, TFormValidator>\n    /**\n     * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n     */\n    useField: UseField<TFormData, TFormValidator>\n    /**\n     * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n     */\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    /**\n     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n     */\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n    }) => NodeType\n  }\n}\n\n/**\n * A custom React Hook that returns an instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n    api.Field = function APIField(props) {\n      return (<Field {...props} form={api} />) as never\n    }\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    api.useField = (props) => useField({ ...props, form: api })\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  /**\n   * formApi.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    formApi.update(opts)\n  })\n\n  return formApi as any\n}\n"],"names":[],"mappings":";;;;;;AAuDO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\ninterface ReactFormApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<TFormData, TFormValidator>\n  /**\n   * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n   */\n  useField: UseField<TFormData, TFormValidator>\n  /**\n   * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n   */\n  useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n  ) => TSelected\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n    /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n  }) => NodeType\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    const extendedApi: typeof api & ReactFormApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return (<Field {...props} form={api} />) as never\n    }\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    extendedApi.useField = (props) => useField({ ...props, form: api })\n    extendedApi.useStore = (selector) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    extendedApi.Subscribe = (props) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  formApi.useStore((state) => state.isSubmitting)\n\n  /**\n   * formApi.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    formApi.update(opts)\n  })\n\n  return formApi\n}\n"],"names":[],"mappings":";;;;;;AAuDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAG3B,gBAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAEvC,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}

package/dist/esm/useIsomorphicLayoutEffect.js

@@ -1,8 +1,5 @@
 import { useLayoutEffect, useEffect } from "react";
-const useIsomorphicLayoutEffect = (
-  // @ts-ignore
-  typeof window !== "undefined" ? useLayoutEffect : useEffect
-);
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 export {
   useIsomorphicLayoutEffect
 };

package/dist/esm/useIsomorphicLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n  // @ts-ignore\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":[],"mappings":";AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAc,kBAAkB;AAAA;"}
+{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":[],"mappings":";AAEO,MAAM,4BACX,OAAO,WAAW,cAAc,kBAAkB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@tanstack/react-store": "^0.5.0",
     "decode-formdata": "^0.7.5",
-    "@tanstack/form-core": "0.24.2"
+    "@tanstack/form-core": "0.24.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/src/createServerValidate.ts

@@ -17,16 +17,11 @@ type OnServerValidateOrFn<
   ? FFN | OnServerValidateFn<TFormData>
   : OnServerValidateFn<TFormData>
 
-declare module '@tanstack/form-core' {
-  // eslint-disable-next-line no-shadow
-  interface FormOptions<
-    TFormData,
-    TFormValidator extends
-      | Validator<TFormData, unknown>
-      | undefined = undefined,
-  > {
-    onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>
-  }
+interface ServerFormOptions<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> extends FormOptions<TFormData, TFormValidator> {
+  onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>
 }
 
 type ValidateFormData<
@@ -41,13 +36,13 @@ export const createServerValidate = <
   TFormData,
   TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
 >(
-  defaultOpts?: FormOptions<TFormData, TFormValidator>,
+  defaultOpts: ServerFormOptions<TFormData, TFormValidator>,
 ) =>
   (async (
     formData: FormData,
     info?: Parameters<typeof decode>[1],
   ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {
-    const { validatorAdapter, onServerValidate } = defaultOpts || {}
+    const { validatorAdapter, onServerValidate } = defaultOpts
 
     const runValidator = (propsValue: { value: TFormData }) => {
       if (validatorAdapter && typeof onServerValidate !== 'function') {

package/src/useField.tsx

@@ -5,27 +5,16 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { NodeType, UseFieldOptions } from './types'
 import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'
 
-declare module '@tanstack/form-core' {
+interface ReactFieldApi<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> {
   /**
-   * When using `@tanstack/react-form`, the core field API is extended at type level with additional methods for React-specific functionality:
+   * A pre-bound and type-safe sub-field component using this field as a root.
    */
-  // eslint-disable-next-line no-shadow
-  interface FieldApi<
-    TParentData,
-    TName extends DeepKeys<TParentData>,
-    TFieldValidator extends
-      | Validator<DeepValue<TParentData, TName>, unknown>
-      | undefined = undefined,
-    TFormValidator extends
-      | Validator<TParentData, unknown>
-      | undefined = undefined,
-    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-  > {
-    /**
-     * A pre-bound and type-safe sub-field component using this field as a root.
-     */
-    Field: FieldComponent<TParentData, TFormValidator>
-  }
+  Field: FieldComponent<TParentData, TFormValidator>
 }
 
 /**
@@ -75,7 +64,7 @@ export function useField<
     TFormValidator,
     TData
   >,
-): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {
+) {
   const [fieldApi] = useState(() => {
     const api = new FieldApi({
       ...opts,
@@ -83,9 +72,12 @@ export function useField<
       name: opts.name,
     })
 
-    api.Field = Field as never
+    const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =
+      api as never
+
+    extendedApi.Field = Field as never
 
-    return api
+    return extendedApi
   })
 
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
@@ -107,7 +99,7 @@ export function useField<
       : undefined,
   )
 
-  return fieldApi as never
+  return fieldApi
 }
 
 /**

package/src/useForm.tsx

@@ -7,31 +7,32 @@ import type { NoInfer } from '@tanstack/react-store'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 import type { NodeType } from './types'
 
-declare module '@tanstack/form-core' {
+/**
+ * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+ */
+interface ReactFormApi<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> {
   /**
-   * When using `@tanstack/react-form`, the core form API is extended at type level with additional methods for React-specific functionality:
+   * A React component to render form fields. With this, you can render and manage individual form fields.
    */
-  // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData, TFormValidator> {
-    /**
-     * A React component to render form fields. With this, you can render and manage individual form fields.
-     */
-    Field: FieldComponent<TFormData, TFormValidator>
-    /**
-     * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-     */
-    useField: UseField<TFormData, TFormValidator>
-    /**
-     * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-     */
-    useStore: <TSelected = NoInfer<FormState<TFormData>>>(
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
-    ) => TSelected
+  Field: FieldComponent<TFormData, TFormValidator>
+  /**
+   * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
+   */
+  useField: UseField<TFormData, TFormValidator>
+  /**
+   * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
+   */
+  useStore: <TSelected = NoInfer<FormState<TFormData>>>(
+    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
+  ) => TSelected
+  /**
+   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+   */
+  Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
     /**
-     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
-     */
-    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-      /**
       TypeScript versions <=5.0.4 have a bug that prevents
       the type of the `TSelected` generic from being inferred
       from the return type of this method.
@@ -42,41 +43,35 @@ declare module '@tanstack/form-core' {
       @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
       @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
       */
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-      children: ((state: NoInfer<TSelected>) => NodeType) | NodeType
-    }) => NodeType
-  }
+    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+    children: ((state: NoInfer<TSelected>) => NodeType) | NodeType
+  }) => NodeType
 }
 
 /**
- * A custom React Hook that returns an instance of the `FormApi` class.
+ * A custom React Hook that returns an extended instance of the `FormApi` class.
  *
  * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
  */
 export function useForm<
   TFormData,
   TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
->(
-  opts?: FormOptions<TFormData, TFormValidator>,
-): FormApi<TFormData, TFormValidator> {
+>(opts?: FormOptions<TFormData, TFormValidator>) {
   const [formApi] = useState(() => {
     const api = new FormApi<TFormData, TFormValidator>(opts)
-    api.Field = function APIField(props) {
+
+    const extendedApi: typeof api & ReactFormApi<TFormData, TFormValidator> =
+      api as never
+    extendedApi.Field = function APIField(props) {
       return (<Field {...props} form={api} />) as never
     }
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    api.useField = (props) => useField({ ...props, form: api })
-    api.useStore = (
-      // @ts-ignore
-      selector,
-    ) => {
+    extendedApi.useField = (props) => useField({ ...props, form: api })
+    extendedApi.useStore = (selector) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       return useStore(api.store as any, selector as any) as any
     }
-    api.Subscribe = (
-      // @ts-ignore
-      props,
-    ) => {
+    extendedApi.Subscribe = (props) => {
       return functionalUpdate(
         props.children,
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -84,7 +79,7 @@ export function useForm<
       ) as any
     }
 
-    return api
+    return extendedApi
   })
 
   useIsomorphicLayoutEffect(formApi.mount, [])
@@ -99,5 +94,5 @@ export function useForm<
     formApi.update(opts)
   })
 
-  return formApi as any
+  return formApi
 }

package/src/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,4 @@
 import { useEffect, useLayoutEffect } from 'react'
 
 export const useIsomorphicLayoutEffect =
-  // @ts-ignore
   typeof window !== 'undefined' ? useLayoutEffect : useEffect