@tanstack/vue-form 0.3.7 → 0.4.1

package/build/modern/useField.d.ts

@@ -4,32 +4,32 @@ import { SetupContext, SlotsType, Ref } from 'vue-demi';
 import { UseFieldOptions } from './types.js';
 
 declare module '@tanstack/form-core' {
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TData = DeepValue<TParentData, TName>> {
-        Field: FieldComponent<TData>;
+    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData = DeepValue<TParentData, TName>> {
+        Field: FieldComponent<TData, FormValidator>;
     }
 }
-type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(opts?: {
+type UseField<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType>(opts?: {
     name: Narrow<TName>;
-} & UseFieldOptions<TParentData, TName, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, DeepValue<TParentData, TName>>;
-declare function useField<TParentData, TName extends DeepKeys<TParentData>, TData = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName>): {
-    api: FieldApi<TParentData, TName>;
-    state: Readonly<Ref<FieldApi<TParentData, TName, TData>['state']>>;
+} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
+declare function useField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator, TData>): {
+    api: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>;
+    state: Readonly<Ref<FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>['state']>>;
 };
 type FieldValue<TParentData, TName> = TParentData extends any[] ? unknown extends TName ? TParentData[number] : DeepValue<TParentData[number], TName> : DeepValue<TParentData, TName>;
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>> = (TParentData extends any[] ? {
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator> = (TParentData extends any[] ? {
     name?: TName;
     index: number;
 } : {
     name: TName;
     index?: never;
-}) & Omit<UseFieldOptions<TParentData, TName>, 'name' | 'index'>;
-type FieldComponent<TParentData> = <TName extends DeepKeys<TParentData>, TData = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName>, context: SetupContext<{}, SlotsType<{
+}) & Omit<UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
+type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator>, context: SetupContext<{}, SlotsType<{
     default: {
-        field: FieldApi<TParentData, TName, TData>;
-        state: FieldApi<TParentData, TName, TData>['state'];
+        field: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>;
+        state: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>['state'];
     };
 }>>) => any;
-declare const Field: <TParentData, TName extends DeepKeys<TParentData>>(props: _tanstack_form_core.FieldOptions<TParentData, TName, DeepValue<TParentData, TName>> & {
+declare const Field: <TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: _tanstack_form_core.FieldOptions<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>> & {
     mode?: "value" | "array" | undefined;
 } & ({
     [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;

package/build/modern/useField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'\nimport type { SlotsType, SetupContext, Ref } from 'vue-demi'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TData>\n  }\n}\n\nexport type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<TParentData, TName, DeepValue<TParentData, TName>>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TData = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<TParentData, TName>,\n): {\n  api: FieldApi<\n    TParentData,\n    TName\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TData\n        // Omit<typeof opts, 'onMount'> & {\n        //   form: FormApi<TParentData>\n        // }\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n> = (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<UseFieldOptions<TParentData, TName>, 'name' | 'index'>\n\nexport type FieldComponent<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TData = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: FieldComponentProps<TParentData, TName>,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<TParentData, TName, TData>\n        state: FieldApi<TParentData, TName, TData>['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <TParentData, TName extends DeepKeys<TParentData>>(\n    fieldOptions: UseFieldOptions<TParentData, TName>,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,WAAW,aAAa,aAAa;AAE/D,SAAS,oBAAoB,sBAAsB;AAsB5C,SAAS,SAKd,MAqBA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IACb,CAAU;AAEV,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAE5D,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAC3B,CAAC;AAED,cAAY,MAAM;AAChB,YAAQ;AAAA,EACV,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,IACrD;AAAA,EACF;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAsCO,IAAM,QAAQ;AAAA,EACnB,CACE,cACA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,MAAM,CAAQ;AAEtE,uBAAmB;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAChC,CAAU;AAEV,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}
+{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'\nimport type { SlotsType, SetupContext, Ref } from 'vue-demi'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    ValidatorType,\n    FormValidator,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TData, FormValidator>\n  }\n}\n\nexport type UseField<TParentData, FormValidator> = <\n  TName extends DeepKeys<TParentData>,\n  ValidatorType,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    ValidatorType,\n    FormValidator,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  ValidatorType,\n  FormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  ValidatorType,\n  FormValidator,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    ValidatorType,\n    FormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<\n    TParentData,\n    TName,\n    ValidatorType,\n    FormValidator,\n    TData\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        ValidatorType,\n        FormValidator,\n        TData\n        // Omit<typeof opts, 'onMount'> & {\n        //   form: FormApi<TParentData>\n        // }\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  ValidatorType,\n  FormValidator,\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, ValidatorType, FormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<TParentData, FormValidator> = <\n  TName extends DeepKeys<TParentData>,\n  ValidatorType,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: FieldComponentProps<\n    TParentData,\n    TName,\n    ValidatorType,\n    FormValidator\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>\n        state: FieldApi<\n          TParentData,\n          TName,\n          ValidatorType,\n          FormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    ValidatorType,\n    FormValidator,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      ValidatorType,\n      FormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,WAAW,aAAa,aAAa;AAE/D,SAAS,oBAAoB,sBAAsB;AAmC5C,SAAS,SAOd,MAgCA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IACb,CAAU;AAEV,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAE5D,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAC3B,CAAC;AAED,cAAY,MAAM;AAChB,YAAQ;AAAA,EACV,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,IACrD;AAAA,EACF;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAuDO,IAAM,QAAQ;AAAA,EACnB,CAME,cAMA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,MAAM,CAAQ;AAEtE,uBAAmB;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAChC,CAAU;AAEV,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}

package/build/modern/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData>\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>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi: formApi as never })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAA8B,IAAI;AAElD,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/build/modern/useForm.d.cts

@@ -5,11 +5,11 @@ import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
 import './types.cjs';
 
 declare module '@tanstack/form-core' {
-    interface FormApi<TFormData> {
+    interface FormApi<TFormData, ValidatorType> {
         Provider: (props: Record<string, any> & {}) => any;
         provideFormContext: () => void;
-        Field: FieldComponent<TFormData>;
-        useField: UseField<TFormData>;
+        Field: FieldComponent<TFormData, ValidatorType>;
+        useField: UseField<TFormData, ValidatorType>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
@@ -18,6 +18,6 @@ declare module '@tanstack/form-core' {
         }>>) => any;
     }
 }
-declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+declare function useForm<TData, FormValidator>(opts?: FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
 
 export { useForm };

package/build/modern/useForm.d.ts

@@ -5,11 +5,11 @@ import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
 import './types.js';
 
 declare module '@tanstack/form-core' {
-    interface FormApi<TFormData> {
+    interface FormApi<TFormData, ValidatorType> {
         Provider: (props: Record<string, any> & {}) => any;
         provideFormContext: () => void;
-        Field: FieldComponent<TFormData>;
-        useField: UseField<TFormData>;
+        Field: FieldComponent<TFormData, ValidatorType>;
+        useField: UseField<TFormData, ValidatorType>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
@@ -18,6 +18,6 @@ declare module '@tanstack/form-core' {
         }>>) => any;
     }
 }
-declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+declare function useForm<TData, FormValidator>(opts?: FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
 
 export { useForm };

package/build/modern/useForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData>\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>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi: formApi as never })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.3.7",
+  "version": "0.4.1",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
     "vue-demi": "^0.14.6",
-    "@tanstack/form-core": "0.3.7"
+    "@tanstack/form-core": "0.4.1"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.2",

package/src/createFormFactory.ts

@@ -3,19 +3,21 @@ import type { FormApi, FormOptions } from '@tanstack/form-core'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { useForm } from './useForm'
 
-export type FormFactory<TFormData> = {
-  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
-  useField: UseField<TFormData>
-  Field: FieldComponent<TFormData>
+export type FormFactory<TFormData, FormValidator> = {
+  useForm: (
+    opts?: FormOptions<TFormData, FormValidator>,
+  ) => FormApi<TFormData, FormValidator>
+  useField: UseField<TFormData, FormValidator>
+  Field: FieldComponent<TFormData, FormValidator>
 }
 
-export function createFormFactory<TFormData>(
-  defaultOpts?: FormOptions<TFormData>,
-): FormFactory<TFormData> {
+export function createFormFactory<TFormData, FormValidator>(
+  defaultOpts?: FormOptions<TFormData, FormValidator>,
+): FormFactory<TFormData, FormValidator> {
   return {
     useForm: (opts) => {
       const formOptions = Object.assign({}, defaultOpts, opts)
-      return useForm<TFormData>(formOptions)
+      return useForm<TFormData, FormValidator>(formOptions)
     },
     useField: useField as any,
     Field: Field as any,

package/src/formContext.ts

@@ -2,7 +2,7 @@ import type { FormApi } from '@tanstack/form-core'
 import { inject, provide } from 'vue-demi'
 
 export type FormContext = {
-  formApi: FormApi<any>
+  formApi: FormApi<any, unknown>
   parentFieldName?: string
 } | null
 

package/src/tests/useField.test.tsx

@@ -21,7 +21,7 @@ describe('useField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -30,7 +30,11 @@ describe('useField', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="FirstName">
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -56,7 +60,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -68,7 +72,11 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -99,7 +107,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -111,7 +119,11 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -143,7 +155,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -159,7 +171,11 @@ describe('useField', () => {
             return error
           }}
         >
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -193,7 +209,7 @@ describe('useField', () => {
 
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -211,7 +227,11 @@ describe('useField', () => {
             return error
           }}
         >
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <div>
               <input
                 data-testid="fieldinput"

package/src/tests/useForm.test.tsx

@@ -20,7 +20,7 @@ describe('useForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -29,7 +29,11 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -56,7 +60,7 @@ describe('useForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person>()
+    const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
@@ -69,9 +73,11 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName">
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
-            <p>{field.state.value}</p>
-          )}
+          {({
+            field,
+          }: {
+            field: FieldApi<Person, 'firstName', never, never>
+          }) => <p>{field.state.value}</p>}
         </form.Field>
       )
     })
@@ -81,37 +87,6 @@ describe('useForm', () => {
     expect(queryByText('LastName')).not.toBeInTheDocument()
   })
 
-  it('should use field default value first', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    const formFactory = createFormFactory<Person>()
-
-    const Comp = defineComponent(() => {
-      const form = formFactory.useForm({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      })
-      form.provideFormContext()
-
-      return () => (
-        <form.Field name="firstName" defaultValue="otherName">
-          {({ field }: { field: FieldApi<Person, 'firstName'> }) => (
-            <p>{field.state.value}</p>
-          )}
-        </form.Field>
-      )
-    })
-
-    const { findByText, queryByText } = render(Comp)
-    expect(await findByText('otherName')).toBeInTheDocument()
-    expect(queryByText('LastName')).not.toBeInTheDocument()
-  })
-
   it('should handle submitting properly', async () => {
     const Comp = defineComponent(() => {
       const submittedData = ref<{ firstName: string }>()
@@ -132,7 +107,7 @@ describe('useForm', () => {
             {({
               field,
             }: {
-              field: FieldApi<{ firstName: string }, 'firstName'>
+              field: FieldApi<{ firstName: string }, 'firstName', never, never>
             }) => {
               return (
                 <input

package/src/types.ts

@@ -3,7 +3,9 @@ import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
 export type UseFieldOptions<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TData = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, TData> & {
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
   mode?: 'value' | 'array'
 }

package/src/useField.tsx

@@ -11,30 +11,54 @@ declare module '@tanstack/form-core' {
   interface FieldApi<
     TParentData,
     TName extends DeepKeys<TParentData>,
+    ValidatorType,
+    FormValidator,
     TData = DeepValue<TParentData, TName>,
   > {
-    Field: FieldComponent<TData>
+    Field: FieldComponent<TData, FormValidator>
   }
 }
 
-export type UseField<TParentData> = <TName extends DeepKeys<TParentData>>(
+export type UseField<TParentData, FormValidator> = <
+  TName extends DeepKeys<TParentData>,
+  ValidatorType,
+>(
   opts?: { name: Narrow<TName> } & UseFieldOptions<
     TParentData,
     TName,
+    ValidatorType,
+    FormValidator,
     DeepValue<TParentData, TName>
   >,
-) => FieldApi<TParentData, TName, DeepValue<TParentData, TName>>
+) => FieldApi<
+  TParentData,
+  TName,
+  ValidatorType,
+  FormValidator,
+  DeepValue<TParentData, TName>
+>
 
 export function useField<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TData = DeepValue<TParentData, TName>,
+  ValidatorType,
+  FormValidator,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
-  opts: UseFieldOptions<TParentData, TName>,
+  opts: UseFieldOptions<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator,
+    TData
+  >,
 ): {
   api: FieldApi<
     TParentData,
-    TName
+    TName,
+    ValidatorType,
+    FormValidator,
+    TData
     // Omit<typeof opts, 'onMount'> & {
     //   form: FormApi<TParentData>
     // }
@@ -44,6 +68,8 @@ export function useField<
       FieldApi<
         TParentData,
         TName,
+        ValidatorType,
+        FormValidator,
         TData
         // Omit<typeof opts, 'onMount'> & {
         //   form: FormApi<TParentData>
@@ -98,6 +124,8 @@ export type FieldValue<TParentData, TName> = TParentData extends any[]
 type FieldComponentProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
+  ValidatorType,
+  FormValidator,
 > = (TParentData extends any[]
   ? {
       name?: TName
@@ -107,27 +135,52 @@ type FieldComponentProps<
       name: TName
       index?: never
     }) &
-  Omit<UseFieldOptions<TParentData, TName>, 'name' | 'index'>
+  Omit<
+    UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+    'name' | 'index'
+  >
 
-export type FieldComponent<TParentData> = <
+export type FieldComponent<TParentData, FormValidator> = <
   TName extends DeepKeys<TParentData>,
-  TData = DeepValue<TParentData, TName>,
+  ValidatorType,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
-  fieldOptions: FieldComponentProps<TParentData, TName>,
+  fieldOptions: FieldComponentProps<
+    TParentData,
+    TName,
+    ValidatorType,
+    FormValidator
+  >,
   context: SetupContext<
     {},
     SlotsType<{
       default: {
-        field: FieldApi<TParentData, TName, TData>
-        state: FieldApi<TParentData, TName, TData>['state']
+        field: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>
+        state: FieldApi<
+          TParentData,
+          TName,
+          ValidatorType,
+          FormValidator,
+          TData
+        >['state']
       }
     }>
   >,
 ) => any
 
 export const Field = defineComponent(
-  <TParentData, TName extends DeepKeys<TParentData>>(
-    fieldOptions: UseFieldOptions<TParentData, TName>,
+  <
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    ValidatorType,
+    FormValidator,
+  >(
+    fieldOptions: UseFieldOptions<
+      TParentData,
+      TName,
+      ValidatorType,
+      FormValidator
+    >,
     context: SetupContext,
   ) => {
     const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)

package/src/useForm.tsx

@@ -11,11 +11,11 @@ import {
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData> {
+  interface FormApi<TFormData, ValidatorType> {
     Provider: (props: Record<string, any> & {}) => any
     provideFormContext: () => void
-    Field: FieldComponent<TFormData>
-    useField: UseField<TFormData>
+    Field: FieldComponent<TFormData, ValidatorType>
+    useField: UseField<TFormData, ValidatorType>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => TSelected
@@ -31,19 +31,21 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
+export function useForm<TData, FormValidator>(
+  opts?: FormOptions<TData, FormValidator>,
+): FormApi<TData, FormValidator> {
   const formApi = (() => {
-    const api = new FormApi<TData>(opts)
+    const api = new FormApi<TData, FormValidator>(opts)
 
     api.Provider = defineComponent(
       (_, context) => {
-        provideFormContext({ formApi })
+        provideFormContext({ formApi: formApi as never })
         return () => context.slots.default!()
       },
       { name: 'Provider' },
     )
     api.provideFormContext = () => {
-      provideFormContext({ formApi })
+      provideFormContext({ formApi: formApi as never })
     }
     api.Field = Field as never
     api.useField = useField as never