@tanstack/react-form 0.10.3 → 0.12.0

package/dist/cjs/createFormFactory.d.ts

@@ -0,0 +1,11 @@
+import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+import { type UseField, type FieldComponent } from './useField';
+import { type ValidateFormData } from './validateFormData';
+export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
+    useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormValidator>;
+    validateFormData: ValidateFormData<TFormData, TFormValidator>;
+    initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>;
+};
+export declare function createFormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>): FormFactory<TFormData, TFormValidator>;

package/dist/cjs/formContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FormApi, Validator } from '@tanstack/form-core';
+export declare const formContext: import("react").Context<{
+    formApi: FormApi<any, Validator<any, unknown> | undefined>;
+    parentFieldName?: string | undefined;
+} | null>;
+export declare function useFormContext(): {
+    formApi: FormApi<any, Validator<any, unknown> | undefined>;
+    parentFieldName?: string | undefined;
+};

package/dist/cjs/index.cjs

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formCore = require("@tanstack/form-core");
+const reactStore = require("@tanstack/react-store");
+const React = require("rehackt");
+const decodeFormdata = require("decode-formdata");
+const formContext = React.createContext(null);
+function useFormContext() {
+  const formApi = React.useContext(formContext);
+  if (!formApi) {
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  }
+  return formApi;
+}
+const useIsomorphicLayoutEffect = (
+  // @ts-ignore
+  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect
+);
+const useIsomorphicEffectOnce = (effect) => {
+  const destroyFunc = React.useRef();
+  const effectCalled = React.useRef(false);
+  const renderAfterCalled = React.useRef(false);
+  const [val, setVal] = React.useState(0);
+  if (effectCalled.current) {
+    renderAfterCalled.current = true;
+  }
+  useIsomorphicLayoutEffect(() => {
+    if (!effectCalled.current) {
+      destroyFunc.current = effect();
+      effectCalled.current = true;
+    }
+    setVal((v) => v + 1);
+    return () => {
+      if (!renderAfterCalled.current) {
+        return;
+      }
+      if (destroyFunc.current) {
+        destroyFunc.current();
+      }
+    };
+  }, []);
+};
+function useField(opts) {
+  const { formApi, parentFieldName } = useFormContext();
+  const [fieldApi] = React.useState(() => {
+    const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
+    const api = new formCore.FieldApi({
+      ...opts,
+      form: formApi,
+      // TODO: Fix typings to include `index` and `parentFieldName`, if present
+      name
+    });
+    api.Field = Field;
+    return api;
+  });
+  useIsomorphicLayoutEffect(() => {
+    fieldApi.update({ ...opts, form: formApi });
+  });
+  reactStore.useStore(
+    fieldApi.store,
+    opts.mode === "array" ? (state) => {
+      return [state.meta, Object.keys(state.value).length];
+    } : void 0
+  );
+  const unmountFn = React.useRef(null);
+  useIsomorphicEffectOnce(() => {
+    return () => {
+      var _a;
+      (_a = unmountFn.current) == null ? void 0 : _a.call(unmountFn);
+    };
+  });
+  if (!unmountFn.current) {
+    unmountFn.current = fieldApi.mount();
+  }
+  return fieldApi;
+}
+function Field({
+  children,
+  ...fieldOptions
+}) {
+  const fieldApi = useField(fieldOptions);
+  return /* @__PURE__ */ React.createElement(
+    formContext.Provider,
+    {
+      value: {
+        formApi: fieldApi.form,
+        parentFieldName: fieldApi.name
+      },
+      children: formCore.functionalUpdate(children, fieldApi)
+    }
+  );
+}
+function useForm(opts) {
+  const [formApi] = React.useState(() => {
+    const api = new formCore.FormApi(opts);
+    api.Provider = function Provider(props) {
+      useIsomorphicLayoutEffect(api.mount, []);
+      return /* @__PURE__ */ React.createElement(formContext.Provider, { ...props, value: { formApi: api } });
+    };
+    api.Field = Field;
+    api.useField = useField;
+    api.useStore = (selector) => {
+      return reactStore.useStore(api.store, selector);
+    };
+    api.Subscribe = (props) => {
+      return formCore.functionalUpdate(
+        props.children,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        reactStore.useStore(api.store, props.selector)
+      );
+    };
+    return api;
+  });
+  formApi.useStore((state) => state.isSubmitting);
+  useIsomorphicLayoutEffect(() => {
+    formApi.update(opts);
+  });
+  return formApi;
+}
+const getValidateFormData = (defaultOpts) => async (formData, info) => {
+  const { validatorAdapter, onServerValidate } = defaultOpts || {};
+  const runValidator = (propsValue) => {
+    if (validatorAdapter && typeof onServerValidate !== "function") {
+      return validatorAdapter().validate(propsValue, onServerValidate);
+    }
+    return onServerValidate(propsValue);
+  };
+  const data = decodeFormdata.decode(formData, info);
+  const onServerError = runValidator({ value: data });
+  return {
+    errorMap: {
+      onServer: onServerError
+    },
+    errors: onServerError ? [onServerError] : []
+  };
+};
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field,
+    validateFormData: getValidateFormData(defaultOpts),
+    initialFormState: {
+      errorMap: {
+        onServer: void 0
+      },
+      errors: []
+    }
+  };
+}
+function useTransform(fn, deps) {
+  return {
+    fn,
+    deps
+  };
+}
+Object.defineProperty(exports, "FieldApi", {
+  enumerable: true,
+  get: () => formCore.FieldApi
+});
+Object.defineProperty(exports, "FormApi", {
+  enumerable: true,
+  get: () => formCore.FormApi
+});
+Object.defineProperty(exports, "functionalUpdate", {
+  enumerable: true,
+  get: () => formCore.functionalUpdate
+});
+Object.defineProperty(exports, "mergeForm", {
+  enumerable: true,
+  get: () => formCore.mergeForm
+});
+exports.Field = Field;
+exports.createFormFactory = createFormFactory;
+exports.useField = useField;
+exports.useForm = useForm;
+exports.useTransform = useTransform;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/formContext.ts","../../src/useIsomorphicLayoutEffect.ts","../../src/useIsomorphicEffectOnce.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/validateFormData.ts","../../src/createFormFactory.ts","../../src/useTransform.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\nimport { createContext, useContext } from 'rehackt'\n\nexport const formContext = createContext<{\n  formApi: FormApi<any, Validator<any, unknown> | undefined>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n","import { useEffect, useLayoutEffect } from 'rehackt'\n\nexport const useIsomorphicLayoutEffect =\n  // @ts-ignore\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n","import { useRef, useState, type EffectCallback } from 'rehackt'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\n/**\n * This hook handles StrictMode and prod mode\n */\nexport const useIsomorphicEffectOnce = (effect: EffectCallback) => {\n  const destroyFunc = useRef<void | (() => void)>()\n  const effectCalled = useRef(false)\n  const renderAfterCalled = useRef(false)\n  const [val, setVal] = useState(0)\n\n  if (effectCalled.current) {\n    renderAfterCalled.current = true\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    // only execute the effect first time around\n    if (!effectCalled.current) {\n      destroyFunc.current = effect()\n      effectCalled.current = true\n    }\n\n    // this forces one render after the effect is run\n    setVal((v) => v + 1)\n\n    return () => {\n      // if the comp didn't render since the useEffect was called,\n      // we know it's the dummy React cycle\n      if (!renderAfterCalled.current) {\n        return\n      }\n      if (destroyFunc.current) {\n        destroyFunc.current()\n      }\n    }\n  }, [])\n}\n","import React, { useRef, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport type { UseFieldOptions } from './types'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'\n\ndeclare module '@tanstack/form-core' {\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    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<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>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\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>(\n  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({\n      ...opts,\n      form: formApi as never,\n      // TODO: Fix typings to include `index` and `parentFieldName`, if present\n      name: name as typeof opts.name as never,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\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, form: formApi } as never)\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  const unmountFn = useRef<(() => void) | null>(null)\n\n  useIsomorphicEffectOnce(() => {\n    return () => {\n      unmountFn.current?.()\n    }\n  })\n\n  // We have to mount it right as soon as it renders, otherwise we get:\n  // https://github.com/TanStack/form/issues/523\n  if (!unmountFn.current) {\n    unmountFn.current = fieldApi.mount()\n  }\n\n  return fieldApi as never\n}\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  ) => any\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\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}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => any\n\nexport function 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>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,\n  ) => any\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi.form as never,\n        parentFieldName: fieldApi.name,\n      }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n","import type { FormState, FormOptions, Validator } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useState,\n} from 'rehackt'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: PropsWithChildren) => JSX.Element\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => JSX.Element\n  }\n}\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    // @ts-ignore\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = function Provider(props) {\n      useIsomorphicLayoutEffect(api.mount, [])\n      return (\n        <formContext.Provider {...props} value={{ formApi: api as never }} />\n      )\n    }\n    api.Field = Field as any\n    api.useField = useField as any\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  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","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\nexport type 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 getValidateFormData = <\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","import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport { type ValidateFormData, getValidateFormData } from './validateFormData'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormValidator>\n  validateFormData: ValidateFormData<TFormData, TFormValidator>\n  initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n    validateFormData: getValidateFormData(defaultOpts) as never,\n    initialFormState: {\n      errorMap: {\n        onServer: undefined,\n      },\n      errors: [],\n    },\n  }\n}\n","import type { FormApi, Validator } from '@tanstack/form-core'\n\nexport function useTransform<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  fn: (\n    formBase: FormApi<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>,\n  deps: unknown[],\n) {\n  return {\n    fn,\n    deps,\n  }\n}\n"],"names":["createContext","useContext","useLayoutEffect","useEffect","useRef","useState","FieldApi","useStore","functionalUpdate","FormApi","decode"],"mappings":"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"}

package/dist/cjs/index.d.cts

@@ -0,0 +1,8 @@
+export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
+export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
+export { useForm } from './useForm';
+export type { UseField, FieldComponent } from './useField';
+export { useField, Field } from './useField';
+export type { FormFactory } from './createFormFactory';
+export { createFormFactory } from './createFormFactory';
+export { useTransform } from './useTransform';

package/dist/cjs/index.d.ts

@@ -0,0 +1,8 @@
+export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
+export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
+export { useForm } from './useForm';
+export type { UseField, FieldComponent } from './useField';
+export { useField, Field } from './useField';
+export type { FormFactory } from './createFormFactory';
+export { createFormFactory } from './createFormFactory';
+export { useTransform } from './useTransform';

package/dist/cjs/index.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formCore = require("@tanstack/form-core");
+const reactStore = require("@tanstack/react-store");
+const React = require("rehackt");
+const decodeFormdata = require("decode-formdata");
+const formContext = React.createContext(null);
+function useFormContext() {
+  const formApi = React.useContext(formContext);
+  if (!formApi) {
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  }
+  return formApi;
+}
+const useIsomorphicLayoutEffect = (
+  // @ts-ignore
+  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect
+);
+const useIsomorphicEffectOnce = (effect) => {
+  const destroyFunc = React.useRef();
+  const effectCalled = React.useRef(false);
+  const renderAfterCalled = React.useRef(false);
+  const [val, setVal] = React.useState(0);
+  if (effectCalled.current) {
+    renderAfterCalled.current = true;
+  }
+  useIsomorphicLayoutEffect(() => {
+    if (!effectCalled.current) {
+      destroyFunc.current = effect();
+      effectCalled.current = true;
+    }
+    setVal((v) => v + 1);
+    return () => {
+      if (!renderAfterCalled.current) {
+        return;
+      }
+      if (destroyFunc.current) {
+        destroyFunc.current();
+      }
+    };
+  }, []);
+};
+function useField(opts) {
+  const { formApi, parentFieldName } = useFormContext();
+  const [fieldApi] = React.useState(() => {
+    const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
+    const api = new formCore.FieldApi({
+      ...opts,
+      form: formApi,
+      // TODO: Fix typings to include `index` and `parentFieldName`, if present
+      name
+    });
+    api.Field = Field;
+    return api;
+  });
+  useIsomorphicLayoutEffect(() => {
+    fieldApi.update({ ...opts, form: formApi });
+  });
+  reactStore.useStore(
+    fieldApi.store,
+    opts.mode === "array" ? (state) => {
+      return [state.meta, Object.keys(state.value).length];
+    } : void 0
+  );
+  const unmountFn = React.useRef(null);
+  useIsomorphicEffectOnce(() => {
+    return () => {
+      var _a;
+      (_a = unmountFn.current) == null ? void 0 : _a.call(unmountFn);
+    };
+  });
+  if (!unmountFn.current) {
+    unmountFn.current = fieldApi.mount();
+  }
+  return fieldApi;
+}
+function Field({
+  children,
+  ...fieldOptions
+}) {
+  const fieldApi = useField(fieldOptions);
+  return /* @__PURE__ */ React.createElement(
+    formContext.Provider,
+    {
+      value: {
+        formApi: fieldApi.form,
+        parentFieldName: fieldApi.name
+      },
+      children: formCore.functionalUpdate(children, fieldApi)
+    }
+  );
+}
+function useForm(opts) {
+  const [formApi] = React.useState(() => {
+    const api = new formCore.FormApi(opts);
+    api.Provider = function Provider(props) {
+      useIsomorphicLayoutEffect(api.mount, []);
+      return /* @__PURE__ */ React.createElement(formContext.Provider, { ...props, value: { formApi: api } });
+    };
+    api.Field = Field;
+    api.useField = useField;
+    api.useStore = (selector) => {
+      return reactStore.useStore(api.store, selector);
+    };
+    api.Subscribe = (props) => {
+      return formCore.functionalUpdate(
+        props.children,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        reactStore.useStore(api.store, props.selector)
+      );
+    };
+    return api;
+  });
+  formApi.useStore((state) => state.isSubmitting);
+  useIsomorphicLayoutEffect(() => {
+    formApi.update(opts);
+  });
+  return formApi;
+}
+const getValidateFormData = (defaultOpts) => async (formData, info) => {
+  const { validatorAdapter, onServerValidate } = defaultOpts || {};
+  const runValidator = (propsValue) => {
+    if (validatorAdapter && typeof onServerValidate !== "function") {
+      return validatorAdapter().validate(propsValue, onServerValidate);
+    }
+    return onServerValidate(propsValue);
+  };
+  const data = decodeFormdata.decode(formData, info);
+  const onServerError = runValidator({ value: data });
+  return {
+    errorMap: {
+      onServer: onServerError
+    },
+    errors: onServerError ? [onServerError] : []
+  };
+};
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field,
+    validateFormData: getValidateFormData(defaultOpts),
+    initialFormState: {
+      errorMap: {
+        onServer: void 0
+      },
+      errors: []
+    }
+  };
+}
+function useTransform(fn, deps) {
+  return {
+    fn,
+    deps
+  };
+}
+Object.defineProperty(exports, "FieldApi", {
+  enumerable: true,
+  get: () => formCore.FieldApi
+});
+Object.defineProperty(exports, "FormApi", {
+  enumerable: true,
+  get: () => formCore.FormApi
+});
+Object.defineProperty(exports, "functionalUpdate", {
+  enumerable: true,
+  get: () => formCore.functionalUpdate
+});
+Object.defineProperty(exports, "mergeForm", {
+  enumerable: true,
+  get: () => formCore.mergeForm
+});
+exports.Field = Field;
+exports.createFormFactory = createFormFactory;
+exports.useField = useField;
+exports.useForm = useForm;
+exports.useTransform = useTransform;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/tests/createFormFactory.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/cjs/tests/useField.test-d.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tests/useField.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/cjs/tests/useForm.test-d.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tests/useForm.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/cjs/tests/utils.d.ts

@@ -0,0 +1 @@
+export declare function sleep(timeout: number): Promise<void>;

package/dist/cjs/types.d.ts

@@ -0,0 +1,4 @@
+import type { FieldOptions, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+export type UseFieldOptions<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>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+    mode?: 'value' | 'array';
+};

package/dist/cjs/useField.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'rehackt';
+import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
+import { FieldApi } from '@tanstack/form-core';
+import type { UseFieldOptions } from './types';
+declare module '@tanstack/form-core' {
+    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>> {
+        Field: FieldComponent<TParentData, TFormValidator>;
+    }
+}
+export type UseField<TParentData> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts?: {
+    name: Narrow<TName>;
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+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>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator>;
+type FieldComponentProps<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>> = {
+    children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
+} & (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
+export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
+export declare function Field<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>({ children, ...fieldOptions }: {
+    children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>) => any;
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): React.JSX.Element;
+export {};

package/dist/cjs/useForm.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { FormState, FormOptions, Validator } from '@tanstack/form-core';
+import { FormApi } from '@tanstack/form-core';
+import type { NoInfer } from '@tanstack/react-store';
+import { type PropsWithChildren, type ReactNode } from 'rehackt';
+import { type UseField, type FieldComponent } from './useField';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, TFormValidator> {
+        Provider: (props: PropsWithChildren) => JSX.Element;
+        Field: FieldComponent<TFormData, TFormValidator>;
+        useField: UseField<TFormData>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+            children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
+        }) => JSX.Element;
+    }
+}
+export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;

package/dist/cjs/useIsomorphicEffectOnce.d.ts

@@ -0,0 +1,5 @@
+import { type EffectCallback } from 'rehackt';
+/**
+ * This hook handles StrictMode and prod mode
+ */
+export declare const useIsomorphicEffectOnce: (effect: EffectCallback) => void;

package/dist/cjs/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { useLayoutEffect } from 'rehackt';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/cjs/useTransform.d.ts

@@ -0,0 +1,5 @@
+import type { FormApi, Validator } from '@tanstack/form-core';
+export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
+    fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
+    deps: unknown[];
+};

package/dist/cjs/validateFormData.d.ts

@@ -0,0 +1,14 @@
+import { decode } from 'decode-formdata';
+import type { FormApi, FormOptions, ValidationError, Validator } from '@tanstack/form-core';
+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>;
+    }
+}
+export 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 getValidateFormData: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator> | undefined) => ValidateFormData<TFormData, TFormValidator>;
+export {};

package/dist/mjs/createFormFactory.d.ts

@@ -0,0 +1,11 @@
+import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
+import { type UseField, type FieldComponent } from './useField';
+import { type ValidateFormData } from './validateFormData';
+export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
+    useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormValidator>;
+    validateFormData: ValidateFormData<TFormData, TFormValidator>;
+    initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>;
+};
+export declare function createFormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>): FormFactory<TFormData, TFormValidator>;

package/dist/mjs/formContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FormApi, Validator } from '@tanstack/form-core';
+export declare const formContext: import("react").Context<{
+    formApi: FormApi<any, Validator<any, unknown> | undefined>;
+    parentFieldName?: string | undefined;
+} | null>;
+export declare function useFormContext(): {
+    formApi: FormApi<any, Validator<any, unknown> | undefined>;
+    parentFieldName?: string | undefined;
+};

package/dist/mjs/index.d.mts

@@ -0,0 +1,8 @@
+export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
+export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
+export { useForm } from './useForm';
+export type { UseField, FieldComponent } from './useField';
+export { useField, Field } from './useField';
+export type { FormFactory } from './createFormFactory';
+export { createFormFactory } from './createFormFactory';
+export { useTransform } from './useTransform';

package/dist/mjs/index.d.ts

@@ -0,0 +1,8 @@
+export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
+export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
+export { useForm } from './useForm';
+export type { UseField, FieldComponent } from './useField';
+export { useField, Field } from './useField';
+export type { FormFactory } from './createFormFactory';
+export { createFormFactory } from './createFormFactory';
+export { useTransform } from './useTransform';