@octanejs/tanstack-form 0.0.1

package/src/useForm.tsrx.d.ts

@@ -0,0 +1,35 @@
+// Declaration companion generated from useForm.tsrx.
+import { FormApi } from '@tanstack/form-core';
+import type { FormGroupComponent } from './useFormGroup.tsrx';
+import type { FormAsyncValidateOrFn, FormOptions, FormState, FormValidateOrFn } from '@tanstack/form-core';
+import type { FieldComponent } from './useField.tsrx';
+type FormRenderable = unknown;
+type FormFunctionComponent<P = object> = (props: P) => FormRenderable;
+/**
+ * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
+ */
+export interface OctaneFormApi<in out TFormData, in out TOnMount extends undefined | FormValidateOrFn<TFormData>, in out TOnChange extends undefined | FormValidateOrFn<TFormData>, in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnBlur extends undefined | FormValidateOrFn<TFormData>, in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>, in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>, in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, in out TSubmitMeta> {
+    /**
+     * A component to render form fields. With this, you can render and manage individual form fields.
+     */
+    Field: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+    FormGroup: FormGroupComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+    /**
+     * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
+     */
+    Subscribe: <TSelected = NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>>(props: {
+        selector?: (state: NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>) => TSelected;
+        children: ((state: NoInfer<TSelected>) => FormRenderable) | FormRenderable;
+    }) => ReturnType<FormFunctionComponent>;
+}
+/**
+ * An extended version of the `FormApi` class that includes renderer-specific components from `OctaneFormApi`
+ */
+export type OctaneFormExtendedApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & OctaneFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+/**
+ * A custom hook that returns an extended instance of the `FormApi` class.
+ *
+ * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
+ */
+export declare function useForm<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(opts?: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>): OctaneFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+export {};

package/src/useFormGroup.tsrx

@@ -0,0 +1,633 @@
+import { useMemo, useState } from 'octane';
+import { useSelector } from '@octanejs/tanstack-store';
+import { FormGroupApi, functionalUpdate } from '@tanstack/form-core';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import type {
+	DeepKeys,
+	DeepValue,
+	FormAsyncValidateOrFn,
+	FormGroupApiOptions,
+	FormGroupAsyncValidateOrFn,
+	FormGroupOptions,
+	FormGroupValidateOrFn,
+	FormValidateOrFn,
+} from '@tanstack/form-core';
+
+type FormGroupRenderable = unknown;
+type FormGroupFunctionComponent<P = object> = (props: P) => FormGroupRenderable;
+
+export type UseFormGroup<
+	TParentData,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TParentSubmitMeta,
+> = <
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+>(
+	opts: FormGroupApiOptions<
+		TParentData,
+		TName,
+		TData,
+		TOnMount,
+		TOnChange,
+		TOnChangeAsync,
+		TOnBlur,
+		TOnBlurAsync,
+		TOnSubmit,
+		TOnSubmitAsync,
+		TOnDynamic,
+		TOnDynamicAsync,
+		TSubmitMeta,
+		TFormOnMount,
+		TFormOnChange,
+		TFormOnChangeAsync,
+		TFormOnBlur,
+		TFormOnBlurAsync,
+		TFormOnSubmit,
+		TFormOnSubmitAsync,
+		TFormOnDynamic,
+		TFormOnDynamicAsync,
+		TFormOnServer,
+		TParentSubmitMeta
+	>,
+) => FormGroupApi<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TSubmitMeta,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TParentSubmitMeta
+>;
+
+export function useFormGroup<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TParentSubmitMeta,
+>(
+	opts: FormGroupApiOptions<
+		TParentData,
+		TName,
+		TData,
+		TOnMount,
+		TOnChange,
+		TOnChangeAsync,
+		TOnBlur,
+		TOnBlurAsync,
+		TOnSubmit,
+		TOnSubmitAsync,
+		TOnDynamic,
+		TOnDynamicAsync,
+		TSubmitMeta,
+		TFormOnMount,
+		TFormOnChange,
+		TFormOnChangeAsync,
+		TFormOnBlur,
+		TFormOnBlurAsync,
+		TFormOnSubmit,
+		TFormOnSubmitAsync,
+		TFormOnDynamic,
+		TFormOnDynamicAsync,
+		TFormOnServer,
+		TParentSubmitMeta
+	>,
+) {
+	// Keep a snapshot of options so compiler optimizations do not treat
+	// formGroupApi as immutable.
+	const [prevOptions, setPrevOptions] = useState(() => ({
+		form: opts.form,
+		name: opts.name,
+	}));
+
+	const [formGroupApiState, setFormGroupApi] = useState(() => {
+		return new FormGroupApi({
+			...opts,
+		});
+	});
+	let formGroupApi = formGroupApiState;
+
+	// We only want to
+	// update on name changes since those are at risk of becoming stale. The field
+	// state must be up to date for the internal JSX render.
+	// The other options can freely be in `fieldApi.update`
+	if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {
+		// Use the replacement for the rest of this render so selectors and the
+		// render prop never observe state from the previous form or group name.
+		formGroupApi = new FormGroupApi({
+			...opts,
+		});
+		setFormGroupApi(formGroupApi);
+		setPrevOptions({ form: opts.form, name: opts.name });
+	}
+
+	const reactiveStateValue = useSelector(formGroupApi.store, (state) => state.value);
+
+	const reactiveMetaIsTouched = useSelector(formGroupApi.store, (state) => state.meta.isTouched);
+	const reactiveMetaIsBlurred = useSelector(formGroupApi.store, (state) => state.meta.isBlurred);
+	const reactiveMetaIsDirty = useSelector(formGroupApi.store, (state) => state.meta.isDirty);
+	const reactiveMetaErrorMap = useSelector(formGroupApi.store, (state) => state.meta.errorMap);
+	const reactiveMetaErrorSourceMap = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.errorSourceMap,
+	);
+	const reactiveMetaIsValidating = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isValidating,
+	);
+
+	// Submission lifecycle and aggregated validity now live on `state.meta`
+	// (mirroring `FieldApi.state.meta`). Subscribe to the fields callers
+	// typically read so the compiled renderer tracks them as dependencies.
+	const reactiveMetaIsSubmitting = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isSubmitting,
+	);
+	const reactiveMetaIsSubmitted = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isSubmitted,
+	);
+	const reactiveMetaSubmissionAttempts = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.submissionAttempts,
+	);
+	const reactiveMetaIsSubmitSuccessful = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isSubmitSuccessful,
+	);
+	const reactiveMetaCanSubmit = useSelector(formGroupApi.store, (state) => state.meta.canSubmit);
+	const reactiveMetaIsValid = useSelector(formGroupApi.store, (state) => state.meta.isValid);
+	const reactiveMetaIsFieldsValid = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isFieldsValid,
+	);
+	const reactiveMetaIsFieldsValidating = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isFieldsValidating,
+	);
+	const reactiveMetaIsGroupValid = useSelector(
+		formGroupApi.store,
+		(state) => state.meta.isGroupValid,
+	);
+
+	// Materialize the reactive snapshots in the extended API returned to render callbacks.
+	const extendedFieldApi = useMemo(() => {
+		const reactiveFieldApi = {
+			...formGroupApi,
+			handleSubmit: ((...props: never[]) => {
+				return formGroupApi._handleSubmit(...props);
+			}) as typeof formGroupApi.handleSubmit,
+			get state() {
+				return {
+					...formGroupApi.state,
+					value: reactiveStateValue,
+					get meta() {
+						return {
+							...formGroupApi.state.meta,
+							isTouched: reactiveMetaIsTouched,
+							isBlurred: reactiveMetaIsBlurred,
+							isDirty: reactiveMetaIsDirty,
+							errorMap: reactiveMetaErrorMap,
+							errorSourceMap: reactiveMetaErrorSourceMap,
+							isValidating: reactiveMetaIsValidating,
+							isSubmitting: reactiveMetaIsSubmitting,
+							isSubmitted: reactiveMetaIsSubmitted,
+							submissionAttempts: reactiveMetaSubmissionAttempts,
+							isSubmitSuccessful: reactiveMetaIsSubmitSuccessful,
+							canSubmit: reactiveMetaCanSubmit,
+							isValid: reactiveMetaIsValid,
+							isFieldsValid: reactiveMetaIsFieldsValid,
+							isFieldsValidating: reactiveMetaIsFieldsValidating,
+							isGroupValid: reactiveMetaIsGroupValid,
+						} satisfies typeof formGroupApi.state.meta;
+					},
+				} satisfies typeof formGroupApi.state;
+			},
+		};
+
+		const extendedApi: FormGroupApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TSubmitMeta,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TParentSubmitMeta
+		> = reactiveFieldApi as never;
+
+		return extendedApi;
+	}, [
+		formGroupApi,
+		reactiveStateValue,
+		reactiveMetaIsTouched,
+		reactiveMetaIsBlurred,
+		reactiveMetaIsDirty,
+		reactiveMetaErrorMap,
+		reactiveMetaErrorSourceMap,
+		reactiveMetaIsValidating,
+		reactiveMetaIsSubmitting,
+		reactiveMetaIsSubmitted,
+		reactiveMetaSubmissionAttempts,
+		reactiveMetaIsSubmitSuccessful,
+		reactiveMetaCanSubmit,
+		reactiveMetaIsValid,
+		reactiveMetaIsFieldsValid,
+		reactiveMetaIsFieldsValidating,
+		reactiveMetaIsGroupValid,
+	]);
+
+	useIsomorphicLayoutEffect(formGroupApi.mount, [formGroupApi]);
+
+	useIsomorphicLayoutEffect(() => {
+		formGroupApi.update(opts);
+	});
+
+	return extendedFieldApi;
+}
+
+interface FormGroupComponentProps<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TParentSubmitMeta,
+	ExtendedApi = {},
+> extends FormGroupApiOptions<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TSubmitMeta,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TParentSubmitMeta
+> {
+	children: (
+		formGroupApi: FormGroupApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TSubmitMeta,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TParentSubmitMeta
+		> &
+			ExtendedApi,
+	) => FormGroupRenderable;
+}
+
+interface FormGroupComponentBoundProps<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TParentSubmitMeta,
+	ExtendedApi = {},
+> extends FormGroupOptions<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TSubmitMeta,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TParentSubmitMeta
+> {
+	children: (
+		formGroupApi: FormGroupApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TSubmitMeta,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TParentSubmitMeta
+		> &
+			ExtendedApi,
+	) => FormGroupRenderable;
+}
+
+export type FormGroupComponent<
+	in out TParentData,
+	in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TParentSubmitMeta,
+	in out ExtendedApi = {},
+> = <
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+>({
+	children,
+	...formGroupOptions
+}: FormGroupComponentBoundProps<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TSubmitMeta,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TParentSubmitMeta,
+	ExtendedApi
+>) => ReturnType<FormGroupFunctionComponent>;
+
+export const FormGroup = (<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FormGroupValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FormGroupAsyncValidateOrFn<TParentData, TName, TData>,
+	TSubmitMeta,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TParentSubmitMeta,
+>({
+	children,
+	...formGroupOptions
+}: FormGroupComponentProps<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TSubmitMeta,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TParentSubmitMeta
+>): ReturnType<FormGroupFunctionComponent> => {
+	const formGroupApi = useFormGroup(formGroupOptions as any);
+
+	const jsxToDisplay = useMemo(
+		() => functionalUpdate(children, formGroupApi as any),
+		[children, formGroupApi],
+	);
+	return (<>{jsxToDisplay}</>) as never;
+}) satisfies FormGroupFunctionComponent<
+	FormGroupComponentProps<
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any
+	>
+>;