@tanstack/vue-form 1.33.4 → 2.0.0-alpha.0

package/dist/AppForm/Components.lib.js

@@ -0,0 +1,16 @@
+import { attachVueFormComponents } from "../VueForm/Components.lib.js";
+import { FieldContext, FormContext } from "./contexts.lib.js";
+import { defineComponent, provide } from "vue";
+
+//#region src/AppForm/Components.lib.ts
+function attachVueAppFormComponents(form, formComponents, fieldComponents) {
+	const resultForm = attachVueFormComponents(form, fieldComponents, FieldContext);
+	resultForm.AppForm = defineComponent((_props, { slots }) => {
+		provide(FormContext, resultForm);
+		return () => slots.default?.();
+	}, { name: "TanStackForm.AppForm" });
+	return Object.assign(resultForm, formComponents);
+}
+
+//#endregion
+export { attachVueAppFormComponents };

package/dist/AppForm/VueAppFormApi.public.d.ts

@@ -0,0 +1,14 @@
+import { AnyVueFormComponentMap } from "./componentMap.public.js";
+import { VueComponentInstance } from "../vueTypes.lib.js";
+import { VueFormApi } from "../VueForm/formApiTypes.public.js";
+import { FormErrorTypes } from "@tanstack/form-core";
+import { PublicProps } from "vue";
+//#region src/AppForm/VueAppFormApi.public.d.ts
+type AppFormComponent = new (props: PublicProps) => VueComponentInstance<{}, {
+  default: {};
+}>;
+type VueAppFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TComponents extends AnyVueFormComponentMap> = VueFormApi<TFormData, TFormErrorTypes, TComponents> & {
+  AppForm: AppFormComponent;
+};
+//#endregion
+export { AppFormComponent, VueAppFormApi };

package/dist/AppForm/appFormOptions.public.d.ts

@@ -0,0 +1,14 @@
+import { AnyVueFormComponentMap } from "./componentMap.public.js";
+import { FormOptions, FormValidatorData, FormValidators, InferUnion, NullableSchemaData } from "@tanstack/form-core";
+//#region src/AppForm/appFormOptions.public.d.ts
+declare const componentsSymbol: unique symbol;
+interface AppFormOptions<TFormData, TFormValidators extends FormValidators<TFormData>, TSubmitReturn, TComponents extends AnyVueFormComponentMap> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
+  [componentsSymbol]: TComponents;
+}
+interface AppFormOptionsApi<TComponents extends AnyVueFormComponentMap> {
+  <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>;
+  strictSchema: <const TFormValidators extends FormValidators<any>, TFormData extends FormValidatorData<TFormValidators>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => AppFormOptions<FormValidatorData<TFormValidators>, TFormValidators, TSubmitReturn, TComponents>;
+  looseSchema: <const TFormValidators extends FormValidators<any>, const TFormData extends NullableSchemaData<TFormValidators>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => AppFormOptions<InferUnion<TFormData, FormValidatorData<TFormValidators>>, TFormValidators, TSubmitReturn, TComponents>;
+}
+//#endregion
+export { AppFormOptions, AppFormOptionsApi };

package/dist/AppForm/componentMap.public.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "vue";
+//#region src/AppForm/componentMap.public.d.ts
+interface VueFormComponentMap<TFormComponents extends Record<string, Component>, TFieldComponents extends Record<string, Component>> {
+  formComponents: TFormComponents;
+  fieldComponents: TFieldComponents;
+}
+type AnyVueFormComponentMap = VueFormComponentMap<Record<string, Component>, Record<string, Component>>;
+type DefaultVueFormComponentMap = VueFormComponentMap<Record<never, never>, Record<never, never>>;
+//#endregion
+export { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap };

package/dist/AppForm/contexts.lib.js

@@ -0,0 +1,18 @@
+import { inject } from "vue";
+
+//#region src/AppForm/contexts.lib.ts
+const FormContext = Symbol("TanStackForm.FormContext");
+const FieldContext = Symbol("TanStackForm.FieldContext");
+function useFieldContext() {
+	const field = inject(FieldContext);
+	if (field === void 0) throw new Error("TanStack Form: Field components must be used within a `form.Field` component.");
+	return field;
+}
+function useFormContext() {
+	const form = inject(FormContext);
+	if (form === void 0) throw new Error("TanStack Form: Form components must be used within a `form.AppForm` component.");
+	return form;
+}
+
+//#endregion
+export { FieldContext, FormContext, useFieldContext, useFormContext };

package/dist/AppForm/createFormHook.public.d.ts

@@ -0,0 +1,6 @@
+import { AnyVueFormComponentMap } from "./componentMap.public.js";
+import { AppFormHookResult } from "./createFormHookTypes.public.js";
+//#region src/AppForm/createFormHook.public.d.ts
+declare function createFormHook<const TComponents extends AnyVueFormComponentMap>(createOptions: TComponents): AppFormHookResult<TComponents>;
+//#endregion
+export { createFormHook };

package/dist/AppForm/createFormHook.public.js

@@ -0,0 +1,24 @@
+import { useInternalForm } from "../VueForm/VueFormApi.lib.js";
+import { defineFieldGroup } from "../FieldGroup/withFields.public.js";
+import { useFormContext } from "./contexts.lib.js";
+import { createAppFormInitializer } from "./initializeAppForm.lib.js";
+
+//#region src/AppForm/createFormHook.public.ts
+const appFormOptions = ((opts) => opts);
+appFormOptions.strictSchema = (opts) => opts;
+appFormOptions.looseSchema = (opts) => opts;
+function createFormHook(createOptions) {
+	const initializeAppForm = createAppFormInitializer(createOptions);
+	function useExtendedForm(options) {
+		return useInternalForm(options, initializeAppForm);
+	}
+	return {
+		useFormContext,
+		appFormOptions,
+		defineAppFieldGroup: defineFieldGroup,
+		useAppForm: useExtendedForm
+	};
+}
+
+//#endregion
+export { createFormHook };

package/dist/AppForm/createFormHookTypes.public.d.ts

@@ -0,0 +1,15 @@
+import { AnyVueFormComponentMap } from "./componentMap.public.js";
+import { AppFormOptionsApi } from "./appFormOptions.public.js";
+import { DefineFieldGroupFn } from "../FieldGroup/withFields.public.js";
+import { VueAppFormApi } from "./VueAppFormApi.public.js";
+import { FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
+//#region src/AppForm/createFormHookTypes.public.d.ts
+type UseAppFormHook<TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => VueAppFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
+interface AppFormHookResult<TComponents extends AnyVueFormComponentMap> {
+  appFormOptions: AppFormOptionsApi<TComponents>;
+  defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>;
+  useAppForm: UseAppFormHook<TComponents>;
+  useFormContext: () => VueAppFormApi<any, any, TComponents>;
+}
+//#endregion
+export { AppFormHookResult, UseAppFormHook };

package/dist/AppForm/fieldComponentHelpers.lib.js

@@ -0,0 +1,22 @@
+import { useFieldContext } from "./contexts.lib.js";
+import { defineComponent, h } from "vue";
+
+//#region src/AppForm/fieldComponentHelpers.lib.ts
+function wrapField(component, fieldPropKey) {
+	return defineComponent((_props, context) => {
+		const field = useFieldContext();
+		return () => h(component, {
+			...context.attrs,
+			[fieldPropKey]: field
+		}, context.slots);
+	}, {
+		name: "TanStackForm.FieldComponent",
+		inheritAttrs: false
+	});
+}
+function brandComponentFactory() {
+	return (component) => component;
+}
+
+//#endregion
+export { brandComponentFactory, wrapField };

package/dist/AppForm/getFormHookHelpers.public.d.ts

@@ -0,0 +1,37 @@
+import { VueComponentInstance } from "../vueTypes.lib.js";
+import { FieldWithValue } from "@tanstack/form-core";
+import { Component, PublicProps } from "vue";
+//#region src/AppForm/getFormHookHelpers.public.d.ts
+type ExactFieldBrand<out TValue> = {
+  readonly __tanstackFieldExactType: TValue;
+};
+type AcceptsFieldBrand<out TAcceptedValue> = {
+  readonly __tanstackFieldAcceptsType: TAcceptedValue;
+};
+type AnyFieldComponent = Component;
+type PropsOf<TComponent> = TComponent extends (new (...args: any[]) => {
+  $props: infer TProps;
+}) ? Omit<TProps, keyof PublicProps> : never;
+type FieldValuePropKeys<TProps> = { [K in keyof TProps]-?: TProps[K] extends FieldWithValue<any> ? K : never; }[keyof TProps];
+type FieldValueFromProp<TProp> = TProp extends FieldWithValue<infer TValue> ? TValue : never;
+type FieldValueFromComponentProp<TProps, TFieldPropKey extends keyof TProps> = FieldValueFromProp<TProps[TFieldPropKey]>;
+type PublicPropsReplacingField<TProps, TFieldPropKey extends keyof TProps> = Omit<TProps, TFieldPropKey>;
+type StrictInjectedFieldComponent<TComponent extends AnyFieldComponent, TProps = PropsOf<TComponent>, TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>> = (new (props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps) => VueComponentInstance<PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>, {}>) & ExactFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>;
+type LooseInjectedFieldComponent<TComponent extends AnyFieldComponent, TProps = PropsOf<TComponent>, TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>> = (new (props: PublicPropsReplacingField<TProps, TFieldPropKey> & PublicProps) => VueComponentInstance<PublicPropsReplacingField<TProps, TFieldPropKey> & Record<string, any>, {}>) & AcceptsFieldBrand<FieldValueFromComponentProp<TProps, TFieldPropKey>>;
+type StrictBrandedFieldComponent<TComponent, TValue> = TComponent & ExactFieldBrand<TValue>;
+type LooseBrandedFieldComponent<TComponent, TValue> = TComponent & AcceptsFieldBrand<TValue>;
+interface FieldComponentHelper {
+  strict: <TComponent extends AnyFieldComponent, TProps = PropsOf<TComponent>, TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>>(component: TComponent, fieldPropKey: TFieldPropKey) => StrictInjectedFieldComponent<TComponent, TProps, TFieldPropKey>;
+  loose: <TComponent extends AnyFieldComponent, TProps = PropsOf<TComponent>, TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>>(component: TComponent, fieldPropKey: TFieldPropKey) => LooseInjectedFieldComponent<TComponent, TProps, TFieldPropKey>;
+}
+interface FieldBrandHelper {
+  strict: <TValue>() => <TComponent extends AnyFieldComponent>(component: TComponent) => StrictBrandedFieldComponent<TComponent, TValue>;
+  loose: <TValue>() => <TComponent extends AnyFieldComponent>(component: TComponent) => LooseBrandedFieldComponent<TComponent, TValue>;
+}
+interface FormHookHelpers {
+  fieldBrand: FieldBrandHelper;
+  fieldComponent: FieldComponentHelper;
+}
+declare function getFormHookHelpers(): FormHookHelpers;
+//#endregion
+export { FormHookHelpers, getFormHookHelpers };

package/dist/AppForm/getFormHookHelpers.public.js

@@ -0,0 +1,18 @@
+import { brandComponentFactory, wrapField } from "./fieldComponentHelpers.lib.js";
+
+//#region src/AppForm/getFormHookHelpers.public.ts
+function getFormHookHelpers() {
+	return {
+		fieldComponent: {
+			loose: wrapField,
+			strict: wrapField
+		},
+		fieldBrand: {
+			loose: brandComponentFactory,
+			strict: brandComponentFactory
+		}
+	};
+}
+
+//#endregion
+export { getFormHookHelpers };

package/dist/AppForm/initializeAppForm.lib.js

@@ -0,0 +1,10 @@
+import { attachVueAppFormComponents } from "./Components.lib.js";
+import { InternalFormApi } from "@tanstack/form-core/internals";
+
+//#region src/AppForm/initializeAppForm.lib.ts
+function createAppFormInitializer(createOptions) {
+	return (options) => attachVueAppFormComponents(new InternalFormApi(options), createOptions.formComponents, createOptions.fieldComponents);
+}
+
+//#endregion
+export { createAppFormInitializer };

package/dist/FieldGroup/FieldGroupApi.public.d.ts

@@ -0,0 +1,30 @@
+import { VueComponentInstance } from "../vueTypes.lib.js";
+import { VueFieldApi, VueFormFieldProps, VueFormSubscribeProps } from "../VueForm/Components.public.js";
+import { DeepKeys, DeepKeysWhereValueIncludes, DeepValue, FieldValidators, FormApiArrayMethods, FormApiFieldMethods, FormErrorTypes, FormState, ToFieldError, ValidationIssue } from "@tanstack/form-core";
+import { ReadonlyAtom } from "@tanstack/vue-store";
+import { Component, PublicProps } from "vue";
+//#region src/FieldGroup/FieldGroupApi.public.d.ts
+type FieldGroupFieldComponent<in out TFieldData, in out TFieldComponents extends Record<string, Component>> = new <const TFieldName extends DeepKeys<TFieldData>>(props: VueFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TFieldData, TFieldName>, ToFieldError<FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, FormErrorTypes>, unknown, FormErrorTypes, TFieldComponents>;
+  };
+}>;
+type FieldGroupArrayFieldComponent<in out TFieldData, in out TFieldComponents extends Record<string, Component>> = new <const TFieldName extends DeepKeysWhereValueIncludes<TFieldData, Array<any>>>(props: VueFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>, FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, unknown, FormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TFieldData, TFieldName>, ToFieldError<FieldValidators<TFieldData, TFieldName, DeepValue<TFieldData, TFieldName>>, ValidationIssue, FormErrorTypes>, unknown, FormErrorTypes, TFieldComponents>;
+  };
+}>;
+type FieldGroupSubscribeProps<TSelected> = VueFormSubscribeProps<unknown, FormErrorTypes, TSelected>;
+type FieldGroupSubscribeComponent = new <TSelected>(props: FieldGroupSubscribeProps<TSelected> & PublicProps) => VueComponentInstance<FieldGroupSubscribeProps<TSelected>, {
+  default: NoInfer<TSelected>;
+}>;
+interface FieldGroupApi<in out TFieldData, in out TFieldComponents extends Record<string, Component> = Record<never, never>> extends FormApiFieldMethods<TFieldData>, FormApiArrayMethods<TFieldData> {
+  atom: ReadonlyAtom<TFieldData>;
+  Field: FieldGroupFieldComponent<TFieldData, TFieldComponents>;
+  ArrayField: FieldGroupArrayFieldComponent<TFieldData, TFieldComponents>;
+  Subscribe: FieldGroupSubscribeComponent;
+}
+type AnyFieldGroupApi = FieldGroupApi<any, Record<string, Component>>;
+type FieldGroupFormState = FormState<unknown, FormErrorTypes>;
+//#endregion
+export { AnyFieldGroupApi, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupFieldComponent, FieldGroupFormState, FieldGroupSubscribeComponent, FieldGroupSubscribeProps };

package/dist/FieldGroup/withFields.lib.js

@@ -0,0 +1,62 @@
+import { InternalFieldGroupApi, defineFieldGroupFieldsRuntime, fieldGroupHelperRuntime } from "@tanstack/form-core/internals";
+import { computed, defineComponent, h } from "vue";
+
+//#region src/FieldGroup/withFields.lib.ts
+function attachVueFieldGroupComponents(group, form) {
+	const forwardField = (component, name) => defineComponent((_props, context) => {
+		const resolved = computed(() => {
+			const options = { ...context.attrs };
+			return group._getFormFieldOptions(options, (base, overrides) => ({
+				...base,
+				...overrides
+			}));
+		});
+		return () => h(component, resolved.value, context.slots);
+	}, {
+		name,
+		inheritAttrs: false
+	});
+	const Field = forwardField(form.Field, "TanStackForm.FieldGroup.Field");
+	const ArrayField = forwardField(form.ArrayField, "TanStackForm.FieldGroup.ArrayField");
+	const Subscribe = defineComponent((_props, context) => () => h(form.Subscribe, { ...context.attrs }, context.slots), {
+		name: "TanStackForm.FieldGroup.Subscribe",
+		inheritAttrs: false
+	});
+	return Object.assign(group, {
+		Field,
+		ArrayField,
+		Subscribe
+	});
+}
+function defineFieldGroupRuntime(defineFieldGroupFn) {
+	const fields = defineFieldGroupFieldsRuntime(defineFieldGroupFn(fieldGroupHelperRuntime));
+	return {
+		fields,
+		bindComponent: (component, fieldsPropName) => withFieldsRuntime(fields, component, fieldsPropName)
+	};
+}
+function withFieldsRuntime(fields, component, fieldsPropName) {
+	const fieldNames = Object.keys(fields);
+	return defineComponent((_props, context) => {
+		const form = context.attrs.form;
+		if (!form) throw new Error("TanStack Form: Field groups must receive a `form` prop.");
+		const fieldGroupApi = attachVueFieldGroupComponents(new InternalFieldGroupApi({
+			form,
+			fieldNames,
+			getBindings: () => context.attrs[fieldsPropName]
+		}), form);
+		return () => {
+			const componentProps = { ...context.attrs };
+			delete componentProps.form;
+			delete componentProps[fieldsPropName];
+			componentProps[fieldsPropName] = fieldGroupApi;
+			return h(component, componentProps, context.slots);
+		};
+	}, {
+		name: "TanStackForm.FieldGroup",
+		inheritAttrs: false
+	});
+}
+
+//#endregion
+export { defineFieldGroupRuntime };

package/dist/FieldGroup/withFields.public.d.ts

@@ -0,0 +1,57 @@
+import { VueComponentInstance } from "../vueTypes.lib.js";
+import { VueTanStackFormComponents } from "../VueForm/Components.public.js";
+import { FieldGroupApi } from "./FieldGroupApi.public.js";
+import { DeepKeys, DeepKeysWhereValueIncludes, DeepValue, FormApi } from "@tanstack/form-core";
+import { Component, PublicProps } from "vue";
+//#region src/FieldGroup/withFields.public.d.ts
+declare const fieldGroupFieldSlotValueSymbol: unique symbol;
+declare const fieldGroupFieldsSymbol: unique symbol;
+type FieldGroupFieldSlotMode = 'strict' | 'loose';
+interface FieldGroupFieldSlot<out TValue, out TMode extends FieldGroupFieldSlotMode = FieldGroupFieldSlotMode> {
+  readonly mode: TMode;
+  readonly [fieldGroupFieldSlotValueSymbol]: TValue;
+}
+type AnyFieldGroupFieldSlot = FieldGroupFieldSlot<any>;
+type StrictFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<TValue, 'strict'>;
+type LooseFieldGroupFieldSlot<TValue> = FieldGroupFieldSlot<TValue, 'loose'>;
+type FieldGroupFieldSlotValue<TSlot> = TSlot extends FieldGroupFieldSlot<infer TValue> ? TValue : never;
+type FieldGroupFieldSlotModeOf<TSlot> = TSlot extends FieldGroupFieldSlot<any, infer TMode> ? TMode : never;
+type IsSame<TTypeA, TTypeB> = [TTypeA] extends [TTypeB] ? [TTypeB] extends [TTypeA] ? true : false : false;
+type FieldGroupFieldSlotAllows<TSlot, TValue> = TSlot extends FieldGroupFieldSlot<infer TAcceptedValue, infer TMode> ? TMode extends 'strict' ? IsSame<TValue, TAcceptedValue> : [TValue] extends [TAcceptedValue] ? true : false : false;
+type FieldGroupFieldNameForSlot<TFieldData, TSlot extends AnyFieldGroupFieldSlot> = { [TFieldName in DeepKeys<TFieldData>]: FieldGroupFieldSlotAllows<TSlot, DeepValue<TFieldData, TFieldName>> extends true ? TFieldName : never; }[DeepKeys<TFieldData>];
+type FieldGroupFields = Record<string, AnyFieldGroupFieldSlot>;
+type FieldGroupFieldNames<TFieldData, TFields extends FieldGroupFields> = { [TFieldName in keyof TFields]: FieldGroupFieldNameForSlot<TFieldData, TFields[TFieldName]>; };
+type FieldGroupFieldData<TFields extends FieldGroupFields> = { [TFieldName in keyof TFields]: TFields[TFieldName] extends FieldGroupFieldSlot<infer TValue, any> ? TValue : never; };
+type FieldGroupFieldsOf<TFieldGroup> = TFieldGroup extends {
+  readonly [fieldGroupFieldsSymbol]: infer TFields;
+} ? TFields : never;
+type VueFieldGroup<TFields extends FieldGroupFields, TFieldComponents extends Record<string, Component> = Record<never, never>> = FieldGroupApi<FieldGroupFieldData<TFields>, TFieldComponents> & {
+  readonly [fieldGroupFieldsSymbol]: TFields;
+};
+type FieldGroupFieldComponentsOf<TFieldGroup> = TFieldGroup extends VueFieldGroup<any, infer TFieldComponents> ? TFieldComponents : never;
+type FieldGroupForm<TFieldComponents extends Record<string, Component> = Record<never, never>, TFormData = any> = FormApi<TFormData, any> & VueTanStackFormComponents<TFormData, any, TFieldComponents>;
+type FieldGroupFieldBindingForSlot<TFormData, TSlot extends AnyFieldGroupFieldSlot> = TSlot extends FieldGroupFieldSlot<infer TValue, infer TMode> ? TMode extends 'strict' ? FieldGroupFieldNameForSlot<TFormData, TSlot> : DeepKeysWhereValueIncludes<TFormData, TValue> : never;
+type FieldGroupFieldBindings<TFields extends FieldGroupFields, TFormData = any> = { [TFieldName in keyof TFields]: FieldGroupFieldBindingForSlot<TFormData, TFields[TFieldName]>; };
+type FieldGroupFieldBindingsOf<TFieldGroup, TFormData> = FieldGroupFieldsOf<TFieldGroup> extends FieldGroupFields ? FieldGroupFieldBindings<FieldGroupFieldsOf<TFieldGroup>, TFormData> : never;
+type FieldGroupFieldsPropName<TProps, TFieldGroup extends VueFieldGroup<any, any>> = { [TPropName in keyof TProps]-?: IsSame<TProps[TPropName], TFieldGroup> extends true ? TPropName : never; }[keyof TProps];
+type FieldGroupWithFieldsFn<TFieldGroup extends VueFieldGroup<any, any>> = <TProps extends object, const TFieldsPropName extends PropertyKey>(component: Component & (new (props: TProps & PublicProps) => any), fieldsPropName: TFieldsPropName & FieldGroupFieldsPropName<TProps, TFieldGroup>) => new <TFormData>(props: Omit<TProps, TFieldsPropName | 'form'> & {
+  form: FieldGroupForm<FieldGroupFieldComponentsOf<TFieldGroup>, TFormData>;
+} & { [TPropName in TFieldsPropName]: FieldGroupFieldBindingsOf<TFieldGroup, TFormData>; } & PublicProps) => VueComponentInstance<Omit<TProps, TFieldsPropName | 'form'> & {
+  form: FieldGroupForm<FieldGroupFieldComponentsOf<TFieldGroup>, TFormData>;
+} & { [TPropName in TFieldsPropName]: FieldGroupFieldBindingsOf<TFieldGroup, TFormData>; } & Record<string, any>, {}>;
+interface FieldGroupHelper {
+  strict: <TValue>() => StrictFieldGroupFieldSlot<TValue>;
+  loose: <TValue>() => LooseFieldGroupFieldSlot<TValue>;
+}
+interface FieldGroupDefinition<TFields extends FieldGroupFields, TFieldComponents extends Record<string, Component>> {
+  /** The virtual field-group API injected into the bound component. */
+  fields: VueFieldGroup<TFields, TFieldComponents>;
+  /** Binds a component's virtual field API to concrete paths in a form. */
+  bindComponent: FieldGroupWithFieldsFn<VueFieldGroup<TFields, TFieldComponents>>;
+}
+/** Signature shared by `defineFieldGroup` and app-form field-group definers. */
+type DefineFieldGroupFn<TFieldComponents extends Record<string, Component>> = <const TFields extends FieldGroupFields>(defineFn: (helper: FieldGroupHelper) => TFields) => FieldGroupDefinition<TFields, TFieldComponents>;
+/** Defines a reusable group of virtual fields. */
+declare const defineFieldGroup: DefineFieldGroupFn<Record<never, never>>;
+//#endregion
+export { AnyFieldGroupFieldSlot, DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupHelper, FieldGroupWithFieldsFn, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, VueFieldGroup, defineFieldGroup };

package/dist/FieldGroup/withFields.public.js

@@ -0,0 +1,8 @@
+import { defineFieldGroupRuntime } from "./withFields.lib.js";
+
+//#region src/FieldGroup/withFields.public.ts
+/** Defines a reusable group of virtual fields. */
+const defineFieldGroup = defineFieldGroupRuntime;
+
+//#endregion
+export { defineFieldGroup };

package/dist/Subscribe.public.d.ts

@@ -0,0 +1,15 @@
+import { VueComponentWithSlots } from "./vueTypes.lib.js";
+import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
+//#region src/Subscribe.public.d.ts
+type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
+interface SubscribeProps<in out TSourceData, in out TSelected> {
+  source: SubscribeSource<TSourceData>;
+  selector: (state: TSourceData) => TSelected;
+  when?: (selected: NoInfer<TSelected>) => boolean;
+}
+type SubscribeComponent = new <TSourceData, const TSelected>(props: SubscribeProps<TSourceData, TSelected>) => InstanceType<VueComponentWithSlots<SubscribeProps<TSourceData, TSelected>, {
+  default: NoInfer<TSelected>;
+}>>;
+declare const Subscribe: SubscribeComponent;
+//#endregion
+export { Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource };

package/dist/Subscribe.public.js

@@ -0,0 +1,22 @@
+import { shallow, useSelector } from "@tanstack/vue-store";
+import { defineComponent } from "vue";
+
+//#region src/Subscribe.public.ts
+const SubscribeImpl = defineComponent((props, { slots }) => {
+	const selected = useSelector(props.source, props.selector, { compare: shallow });
+	return () => {
+		if (props.when?.(selected.value) === false) return null;
+		return slots.default?.(selected.value);
+	};
+}, {
+	name: "TanStackForm.Subscribe",
+	props: [
+		"source",
+		"selector",
+		"when"
+	]
+});
+const Subscribe = SubscribeImpl;
+
+//#endregion
+export { Subscribe };

package/dist/VueForm/Components.lib.js

@@ -0,0 +1,94 @@
+import { Subscribe } from "../Subscribe.public.js";
+import { createArrayFieldSubscription, createValueFieldSubscription } from "./fieldSubscriptions.lib.js";
+import { useField } from "./useField.lib.js";
+import { shallow, useSelector } from "@tanstack/vue-store";
+import { InternalFormGroupApi } from "@tanstack/form-core/internals";
+import { defineComponent, h, onMounted, onUnmounted, provide, watchEffect } from "vue";
+
+//#region src/VueForm/Components.lib.ts
+function attachVueFormComponents(form, fieldComponents, fieldContext) {
+	const resultForm = form;
+	resultForm.Field = createFieldComponent(form, fieldComponents, false, fieldContext);
+	resultForm.ArrayField = createFieldComponent(form, fieldComponents, true, fieldContext);
+	resultForm.Subscribe = createSubscribeComponent(form);
+	resultForm.FormGroup = createFormGroupComponent(resultForm);
+	return resultForm;
+}
+function createFieldComponent(form, fieldComponents, array, fieldContext) {
+	return defineComponent((_props, context) => {
+		const options = () => ({
+			...context.attrs,
+			form
+		});
+		const fieldApi = useField(options, fieldComponents);
+		const selection = array ? createArrayFieldSubscription(fieldApi) : createValueFieldSubscription(fieldApi);
+		if (fieldContext) provide(fieldContext, fieldApi.value);
+		return () => {
+			selection.value;
+			return context.slots.default?.({ field: fieldApi.value });
+		};
+	}, {
+		name: array ? "TanStackForm.ArrayField" : "TanStackForm.Field",
+		inheritAttrs: false
+	});
+}
+function createSubscribeComponent(form) {
+	return defineComponent((_props, context) => () => h(Subscribe, {
+		...context.attrs,
+		source: form.atom
+	}, context.slots), {
+		name: "TanStackForm.Subscribe",
+		inheritAttrs: false
+	});
+}
+function createFormGroupComponent(form) {
+	return defineComponent((_props, context) => {
+		const options = () => ({
+			...context.attrs,
+			form
+		});
+		const group = attachVueFormGroupComponents(new InternalFormGroupApi(options()), form);
+		watchEffect(() => group.update(options()));
+		let mounted = false;
+		onMounted(() => {
+			mounted = true;
+			group.mount();
+		});
+		onUnmounted(() => {
+			if (mounted) group._cleanup();
+		});
+		const state = useSelector(group.atom, (value) => value, { compare: shallow });
+		return () => {
+			state.value;
+			return context.slots.default?.({ group });
+		};
+	}, {
+		name: "TanStackForm.FormGroup",
+		inheritAttrs: false
+	});
+}
+function forwardToField(component, group) {
+	return defineComponent((_props, context) => () => {
+		const options = { ...context.attrs };
+		return h(component, group._getFormFieldOptions(options, (base, overrides) => ({
+			...base,
+			...overrides
+		})), context.slots);
+	}, { inheritAttrs: false });
+}
+function attachVueFormGroupComponents(group, form) {
+	const resultGroup = group;
+	resultGroup.Field = forwardToField(form.Field, group);
+	resultGroup.ArrayField = forwardToField(form.ArrayField, group);
+	resultGroup.Subscribe = defineComponent((_props, context) => () => h(Subscribe, {
+		...context.attrs,
+		source: group.atom
+	}, context.slots), {
+		name: "TanStackForm.FormGroup.Subscribe",
+		inheritAttrs: false
+	});
+	return resultGroup;
+}
+
+//#endregion
+export { attachVueFormComponents };

package/dist/VueForm/Components.public.d.ts

@@ -0,0 +1,71 @@
+import { VueComponentInstance } from "../vueTypes.lib.js";
+import { DeepKeys, DeepKeysWhereValueIncludes, DeepValue, FieldApi, FieldApiOptions, FieldValidators, FormErrorTypes, FormGroupApi, FormGroupOptions, FormGroupState, FormGroupValidators, FormState, ToFieldError, ToFormGroupErrorTypes } from "@tanstack/form-core";
+import { Component, PublicProps } from "vue";
+//#region src/VueForm/Components.public.d.ts
+declare const fieldComponentsType: unique symbol;
+type ExactFieldBrand<out TValue> = {
+  readonly __tanstackFieldExactType: TValue;
+};
+type AcceptsFieldBrand<out TAcceptedValue> = {
+  readonly __tanstackFieldAcceptsType: TAcceptedValue;
+};
+type CompatibleFieldKey<TKey, TComponent, TTargetValue> = TComponent extends ExactFieldBrand<infer TExact> ? [TExact] extends [TTargetValue] ? [TTargetValue] extends [TExact] ? TKey : never : never : TComponent extends AcceptsFieldBrand<infer TLoose> ? [TTargetValue] extends [TLoose] ? TKey : never : TKey;
+type FilteredFieldComponents<TFieldComponents extends Record<string, Component>, TTargetValue> = { [K in keyof TFieldComponents as CompatibleFieldKey<K, TFieldComponents[K], TTargetValue>]: TFieldComponents[K]; };
+type FieldComponentsMatchingType<TFieldComponents extends Record<string, Component>, TTargetValue> = unknown extends TTargetValue ? TFieldComponents : string extends keyof TFieldComponents ? TFieldComponents : FilteredFieldComponents<TFieldComponents, TTargetValue>;
+type VueFieldApi<TFieldName, TFieldValue, TFieldError, TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component>> = FieldApi<TFieldName, TFieldValue, TFieldError, TFormData, TFormErrorTypes> & FieldComponentsMatchingType<TFieldComponents, TFieldValue>;
+interface VueSubscribeProps<in out TSourceData, in out TSelected> {
+  selector: (state: TSourceData) => TSelected;
+  when?: (selected: NoInfer<TSelected>) => boolean;
+}
+type VueFormSubscribeProps<TFormData, TFormErrorTypes extends FormErrorTypes, TSelected> = VueSubscribeProps<FormState<TFormData, TFormErrorTypes>, TSelected>;
+type VueFormSubscribeComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes> = new <TSelected>(props: VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormSubscribeProps<TFormData, TFormErrorTypes, TSelected>, {
+  default: NoInfer<TSelected>;
+}>;
+interface VueFormFieldProps<in out TFieldData, in out TFieldName, in out TFieldValue, in out TFieldValidators extends FieldValidators<TFieldData, TFieldName, TFieldValue>, in out TGroupFieldError, in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> extends FieldApiOptions<TFieldData, TFieldName, TFieldValue, TFieldValidators, TGroupFieldError, TFormData, TFormErrorTypes> {
+  readonly [fieldComponentsType]?: TFieldComponents;
+}
+type VueFormFieldComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TFieldName extends DeepKeys<TFormData>, const TFieldValidators extends FieldValidators<TFormData, TFieldName, DeepValue<TFormData, TFieldName>>>(props: VueFormFieldProps<TFormData, TFieldName, DeepValue<TFormData, TFieldName>, TFieldValidators, never, TFormData, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TFormData, TFieldName, DeepValue<TFormData, TFieldName>, TFieldValidators, never, TFormData, TFormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TFormData, TFieldName>, ToFieldError<NoInfer<TFieldValidators>, never, TFormErrorTypes>, TFormData, TFormErrorTypes, TFieldComponents>;
+  };
+}>;
+type VueFormArrayFieldComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TFieldName extends DeepKeysWhereValueIncludes<TFormData, Array<any>>, const TFieldValidators extends FieldValidators<TFormData, TFieldName, DeepValue<TFormData, TFieldName>>>(props: VueFormFieldProps<TFormData, TFieldName, DeepValue<TFormData, TFieldName>, TFieldValidators, never, TFormData, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TFormData, TFieldName, DeepValue<TFormData, TFieldName>, TFieldValidators, never, TFormData, TFormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TFormData, TFieldName>, ToFieldError<NoInfer<TFieldValidators>, never, TFormErrorTypes>, TFormData, TFormErrorTypes, TFieldComponents>;
+  };
+}>;
+type VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes extends FormErrorTypes, TSelected> = VueSubscribeProps<FormGroupState<TGroupValue, TGroupErrorTypes>, TSelected>;
+type VueFormGroupSubscribeComponent<in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes> = new <TSelected>(props: VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected> & PublicProps) => VueComponentInstance<VueFormGroupSubscribeProps<TGroupValue, TGroupErrorTypes, TSelected>, {
+  default: NoInfer<TSelected>;
+}>;
+type VueFormGroupFieldComponent<in out TFormData, in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TFieldName extends DeepKeys<TGroupValue>, const TFieldValidators extends FieldValidators<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>>>(props: VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TGroupValue, TFieldName>, ToFieldError<NoInfer<TFieldValidators>, TGroupErrorTypes['fieldError'], TFormErrorTypes>, TFormData, TFormErrorTypes, TFieldComponents>;
+  };
+}>;
+type VueFormGroupArrayFieldComponent<in out TFormData, in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TFieldName extends DeepKeysWhereValueIncludes<TGroupValue, Array<any>>, const TFieldValidators extends FieldValidators<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>>>(props: VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormFieldProps<TGroupValue, TFieldName, DeepValue<TGroupValue, TFieldName>, TFieldValidators, TGroupErrorTypes['fieldError'], TFormData, TFormErrorTypes, TFieldComponents>, {
+  default: {
+    field: VueFieldApi<TFieldName, DeepValue<TGroupValue, TFieldName>, ToFieldError<NoInfer<TFieldValidators>, TGroupErrorTypes['fieldError'], TFormErrorTypes>, TFormData, TFormErrorTypes, TFieldComponents>;
+  };
+}>;
+interface VueFormGroupApi<in out TFormData, in out TGroupName, in out TGroupValue, in out TGroupErrorTypes extends FormErrorTypes, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> extends FormGroupApi<TFormData, TGroupName, TGroupValue, TGroupErrorTypes, TFormErrorTypes> {
+  Field: VueFormGroupFieldComponent<TFormData, TGroupValue, TGroupErrorTypes, TFormErrorTypes, TFieldComponents>;
+  ArrayField: VueFormGroupArrayFieldComponent<TFormData, TGroupValue, TGroupErrorTypes, TFormErrorTypes, TFieldComponents>;
+  Subscribe: VueFormGroupSubscribeComponent<TGroupValue, TGroupErrorTypes>;
+}
+interface VueFormGroupProps<in out TFormData, in out TGroupName, in out TGroupValue, in out TGroupValidators extends FormGroupValidators<TGroupValue>, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> extends Omit<FormGroupOptions<TFormData, TGroupName, TGroupValue, TGroupValidators, TFormErrorTypes>, 'form'> {
+  readonly [fieldComponentsType]?: TFieldComponents;
+}
+type VueFormGroupComponent<in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component>> = new <TGroupName extends DeepKeys<TFormData>, TGroupValue extends DeepValue<TFormData, TGroupName>, const TGroupValidators extends FormGroupValidators<TGroupValue>>(props: VueFormGroupProps<TFormData, TGroupName, TGroupValue, TGroupValidators, TFormErrorTypes, TFieldComponents> & PublicProps) => VueComponentInstance<VueFormGroupProps<TFormData, TGroupName, TGroupValue, TGroupValidators, TFormErrorTypes, TFieldComponents>, {
+  default: {
+    group: VueFormGroupApi<TFormData, TGroupName, TGroupValue, ToFormGroupErrorTypes<NoInfer<TGroupValidators>>, TFormErrorTypes, TFieldComponents>;
+  };
+}>;
+interface VueTanStackFormComponents<in out TFormData, in out TFormErrorTypes extends FormErrorTypes, in out TFieldComponents extends Record<string, Component> = Record<never, never>> {
+  Field: VueFormFieldComponent<TFormData, TFormErrorTypes, TFieldComponents>;
+  ArrayField: VueFormArrayFieldComponent<TFormData, TFormErrorTypes, TFieldComponents>;
+  Subscribe: VueFormSubscribeComponent<TFormData, TFormErrorTypes>;
+  FormGroup: VueFormGroupComponent<TFormData, TFormErrorTypes, TFieldComponents>;
+}
+//#endregion
+export { VueFieldApi, VueFormArrayFieldComponent, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueTanStackFormComponents };

package/dist/VueForm/VueFormApi.lib.js

@@ -0,0 +1,26 @@
+import { attachVueFormComponents } from "./Components.lib.js";
+import { InternalFormApi } from "@tanstack/form-core/internals";
+import { onMounted, onUnmounted, useId, watchEffect } from "vue";
+
+//#region src/VueForm/VueFormApi.lib.ts
+function initializeForm(options) {
+	return attachVueFormComponents(new InternalFormApi(options), null);
+}
+function useInternalForm(options, initializeFn) {
+	const vueFormId = useId();
+	const resolveOptions = () => options.formId === void 0 ? {
+		...options,
+		formId: vueFormId
+	} : options;
+	const form = initializeFn(resolveOptions());
+	watchEffect(() => form._update(resolveOptions()));
+	let unmount;
+	onMounted(() => {
+		unmount = form.mount();
+	});
+	onUnmounted(() => unmount?.());
+	return form;
+}
+
+//#endregion
+export { initializeForm, useInternalForm };