@tanstack/react-form 0.39.0 → 0.39.2

package/dist/cjs/index.cjs

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const formCore = require("@tanstack/form-core");
+const reactStore = require("@tanstack/react-store");
 const useForm = require("./useForm.cjs");
 const useField = require("./useField.cjs");
 const useTransform = require("./useTransform.cjs");
+Object.defineProperty(exports, "useStore", {
+  enumerable: true,
+  get: () => reactStore.useStore
+});
 exports.useForm = useForm.useForm;
 exports.Field = useField.Field;
 exports.useField = useField.useField;

package/dist/cjs/index.cjs.map

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

package/dist/cjs/index.d.cts

@@ -1,4 +1,5 @@
 export * from '@tanstack/form-core';
+export { useStore } from '@tanstack/react-store';
 export type { ReactFormApi, ReactFormExtendedApi } from './useForm.cjs';
 export { useForm } from './useForm.cjs';
 export type { UseField, FieldComponent } from './useField.cjs';

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 } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface 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    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: FormApi<any, any>\n  selector: (state: FormState<any>) => FormState<any>\n}>) {\n  const data = useStore(form.store, selector)\n\n  return functionalUpdate(children, data)\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: ReactFormExtendedApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={api} />\n    }\n    extendedApi.Subscribe = (props: any) => {\n      return (\n        <LocalSubscribe\n          form={api}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  useStore(formApi.store, (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":["useStore","functionalUpdate","useState","FormApi","jsx","Field","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAgDA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAOA,WAAA,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAAC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAIC,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,SAAA,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,CAAC,UAAe;AAEpC,aAAAD,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyBE,sDAAA,QAAQ,OAAO,EAAE;AAE3CN,aAAA,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrDM,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 } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface 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 `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    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: FormApi<any, any>\n  selector: (state: FormState<any>) => FormState<any>\n}>) {\n  const data = useStore(form.store, selector)\n\n  return functionalUpdate(children, data)\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: ReactFormExtendedApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={api} />\n    }\n    extendedApi.Subscribe = (props: any) => {\n      return (\n        <LocalSubscribe\n          form={api}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  useStore(formApi.store, (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":["useStore","functionalUpdate","useState","FormApi","jsx","Field","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAsCA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAOA,WAAA,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAAC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAIC,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,SAAA,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,CAAC,UAAe;AAEpC,aAAAD,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyBE,sDAAA,QAAQ,OAAO,EAAE;AAE3CN,aAAA,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrDM,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}

package/dist/cjs/useForm.d.cts

@@ -1,6 +1,6 @@
 import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
 import { ReactNode } from 'react';
-import { FieldComponent, UseField } from './useField.cjs';
+import { FieldComponent } from './useField.cjs';
 import { NoInfer } from '@tanstack/react-store';
 /**
  * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
@@ -10,14 +10,6 @@ export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormD
      * 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;
     /**
      * 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.
      */

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@tanstack/form-core';
+export { useStore } from '@tanstack/react-store';
 export type { ReactFormApi, ReactFormExtendedApi } from './useForm.js';
 export { useForm } from './useForm.js';
 export type { UseField, FieldComponent } from './useField.js';

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export * from "@tanstack/form-core";
+import { useStore } from "@tanstack/react-store";
 import { useForm } from "./useForm.js";
 import { Field, useField } from "./useField.js";
 import { useTransform } from "./useTransform.js";
@@ -6,6 +7,7 @@ export {
   Field,
   useField,
   useForm,
+  useStore,
   useTransform
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/useForm.d.ts

@@ -1,6 +1,6 @@
 import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
 import { ReactNode } from 'react';
-import { FieldComponent, UseField } from './useField.js';
+import { FieldComponent } from './useField.js';
 import { NoInfer } from '@tanstack/react-store';
 /**
  * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
@@ -10,14 +10,6 @@ export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormD
      * 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;
     /**
      * 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.
      */

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 } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface 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    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: FormApi<any, any>\n  selector: (state: FormState<any>) => FormState<any>\n}>) {\n  const data = useStore(form.store, selector)\n\n  return functionalUpdate(children, data)\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: ReactFormExtendedApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={api} />\n    }\n    extendedApi.Subscribe = (props: any) => {\n      return (\n        <LocalSubscribe\n          form={api}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  useStore(formApi.store, (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":";;;;;;AAgDA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAO,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,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,aAAQ,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,CAAC,UAAe;AAEpC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,EAAE;AAE3C,WAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrD,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 } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface 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 `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    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: FormApi<any, any>\n  selector: (state: FormState<any>) => FormState<any>\n}>) {\n  const data = useStore(form.store, selector)\n\n  return functionalUpdate(children, data)\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: ReactFormExtendedApi<TFormData, TFormValidator> =\n      api as never\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={api} />\n    }\n    extendedApi.Subscribe = (props: any) => {\n      return (\n        <LocalSubscribe\n          form={api}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  useStore(formApi.store, (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":";;;;;;AAsCA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAO,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,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,aAAQ,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,CAAC,UAAe;AAEpC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,EAAE;AAE3C,WAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrD,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.39.0",
+  "version": "0.39.2",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -67,10 +67,10 @@
     "src"
   ],
   "dependencies": {
-    "@remix-run/node": "^2.14.0",
-    "@tanstack/react-store": "^0.5.6",
+    "@remix-run/node": "^2.15.0",
+    "@tanstack/react-store": "^0.6.1",
     "decode-formdata": "^0.8.0",
-    "@tanstack/form-core": "0.39.0"
+    "@tanstack/form-core": "0.39.1"
   },
   "devDependencies": {
     "@tanstack/start": "^1.81.1",

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from '@tanstack/form-core'
 
+export { useStore } from '@tanstack/react-store'
+
 export type { ReactFormApi, ReactFormExtendedApi } from './useForm'
 export { useForm } from './useForm'
 

package/src/useForm.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { PropsWithChildren, ReactNode } from 'react'
-import type { FieldComponent, UseField } from './useField'
+import type { FieldComponent } from './useField'
 import type { NoInfer } from '@tanstack/react-store'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 
@@ -19,16 +19,6 @@ export interface ReactFormApi<
    * 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
   /**
    * 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.
    */