@octanejs/tanstack-form 0.0.1

package/src/useField.tsrx.d.ts

@@ -0,0 +1,55 @@
+// Declaration companion generated from useField.tsrx.
+import { FieldApi } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FieldValidators, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import type { UseFieldOptions, UseFieldOptionsBound } from './types';
+type FieldRenderable = unknown;
+type FieldFunctionComponent<P = object> = (props: P) => FieldRenderable;
+/**
+ * A type representing a hook for using a field in a form with the given form data type.
+ *
+ * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
+ */
+export type UseField<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>, TPatentSubmitMeta> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(opts: UseFieldOptionsBound<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>) => FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+/**
+ * A hook for managing a field in a form.
+ * @param opts An object with field options.
+ *
+ * @returns The `FieldApi` instance for the specified field.
+ */
+export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, 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>, TPatentSubmitMeta>(opts: UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>;
+/**
+ * @param children A render function that takes a field API instance and returns a renderable value.
+ */
+interface FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, 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>, TPatentSubmitMeta, ExtendedApi = {}> extends UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta> {
+    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta> & ExtendedApi) => FieldRenderable;
+}
+interface FieldComponentBoundProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, 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>, TPatentSubmitMeta, ExtendedApi = {}> extends UseFieldOptionsBound<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync> {
+    children: (fieldApi: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta> & ExtendedApi) => FieldRenderable;
+}
+/**
+ * A type alias representing a field component for a specific form data type.
+ */
+export type FieldComponent<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 TPatentSubmitMeta, in out ExtendedApi = {}> = <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>({ children, ...fieldOptions }: FieldComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta, ExtendedApi>) => ReturnType<FieldFunctionComponent>;
+/**
+ * A type alias representing a field component for a form lens data type.
+ */
+export type LensFieldComponent<in out TLensData, in out TParentSubmitMeta, in out ExtendedApi = {}> = <TName extends DeepKeys<TLensData>, TData extends DeepValue<TLensData, TName>, TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>, TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>>({ children, ...fieldOptions }: Omit<FieldComponentBoundProps<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, TParentSubmitMeta, ExtendedApi>, 'name' | 'validators'> & {
+    name: TName;
+    validators?: Omit<FieldValidators<unknown, string, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, 'onChangeListenTo' | 'onBlurListenTo'> & {
+        /**
+         * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+         */
+        onChangeListenTo?: DeepKeys<TLensData>[];
+        /**
+         * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+         */
+        onBlurListenTo?: DeepKeys<TLensData>[];
+    };
+}) => ReturnType<FieldFunctionComponent>;
+/**
+ * A function component that takes field options and a render function as children.
+ *
+ * The `Field` component uses the `useField` hook internally to manage the field instance.
+ */
+export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, 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>, TPatentSubmitMeta>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TPatentSubmitMeta>) => ReturnType<FieldFunctionComponent>;
+export {};

package/src/useFieldGroup.tsrx

@@ -0,0 +1,252 @@
+import { useState } from 'octane';
+import { useSelector } from '@octanejs/tanstack-store';
+import { FieldGroupApi, functionalUpdate } from '@tanstack/form-core';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import type {
+	AnyFieldGroupApi,
+	DeepKeysOfType,
+	FieldGroupState,
+	FieldsMap,
+	FormAsyncValidateOrFn,
+	FormValidateOrFn,
+} from '@tanstack/form-core';
+import type { AppFieldExtendedOctaneFormApi } from './createFormHook.tsrx';
+import type { LensFieldComponent } from './useField.tsrx';
+
+type FieldGroupRenderable = unknown;
+type FieldGroupPropsWithChildren<P = object> = P & { children?: FieldGroupRenderable };
+type FieldGroupFunctionComponent<P = object> = (props: P) => FieldGroupRenderable;
+type FieldGroupComponentType<P = object> = FieldGroupFunctionComponent<P>;
+
+function LocalSubscribe({
+	lens,
+	selector = (state) => state,
+	children,
+}: FieldGroupPropsWithChildren<{
+	lens: AnyFieldGroupApi;
+	selector?: (state: FieldGroupState<any>) => FieldGroupState<any>;
+}>): ReturnType<FieldGroupFunctionComponent> {
+	const data = useSelector(lens.store, selector);
+
+	return <>{functionalUpdate(children, data)}</>;
+}
+
+/**
+ * @private
+ */
+export type AppFieldExtendedOctaneFieldGroupApi<
+	TFormData,
+	TFieldGroupData,
+	TFields extends
+		| DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+		| FieldsMap<TFormData, TFieldGroupData>,
+	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,
+	TFieldComponents extends Record<string, FieldGroupComponentType<any>>,
+	TFormComponents extends Record<string, FieldGroupComponentType<any>>,
+> = FieldGroupApi<
+	TFormData,
+	TFieldGroupData,
+	TFields,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TOnServer,
+	TSubmitMeta
+> &
+	NoInfer<TFormComponents> & {
+		AppField: LensFieldComponent<TFieldGroupData, TSubmitMeta, NoInfer<TFieldComponents>>;
+		AppForm: FieldGroupComponentType<FieldGroupPropsWithChildren<{}>>;
+		/**
+		 * A component to render form fields. With this, you can render and manage individual form fields.
+		 */
+		Field: LensFieldComponent<TFieldGroupData, 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<FieldGroupState<TFieldGroupData>>>(props: {
+			selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected;
+			children: ((state: NoInfer<TSelected>) => FieldGroupRenderable) | FieldGroupRenderable;
+		}) => ReturnType<FieldGroupFunctionComponent>;
+	};
+
+export function useFieldGroup<
+	TFormData,
+	TFieldGroupData,
+	TFields extends
+		| DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+		| FieldsMap<TFormData, TFieldGroupData>,
+	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>,
+	TComponents extends Record<string, FieldGroupComponentType<any>>,
+	TFormComponents extends Record<string, FieldGroupComponentType<any>>,
+	TSubmitMeta = never,
+>(opts: {
+	form:
+		| AppFieldExtendedOctaneFormApi<
+				TFormData,
+				TOnMount,
+				TOnChange,
+				TOnChangeAsync,
+				TOnBlur,
+				TOnBlurAsync,
+				TOnSubmit,
+				TOnSubmitAsync,
+				TOnDynamic,
+				TOnDynamicAsync,
+				TOnServer,
+				TSubmitMeta,
+				TComponents,
+				TFormComponents
+		  >
+		| AppFieldExtendedOctaneFieldGroupApi<
+				// Since this only occurs if you nest it within other form lenses, it can be more
+				// lenient with the types.
+				unknown,
+				TFormData,
+				string | FieldsMap<unknown, TFormData>,
+				any,
+				any,
+				any,
+				any,
+				any,
+				any,
+				any,
+				any,
+				any,
+				any,
+				TSubmitMeta,
+				TComponents,
+				TFormComponents
+		  >;
+	fields: TFields;
+	defaultValues?: TFieldGroupData;
+	onSubmitMeta?: TSubmitMeta;
+	formComponents: TFormComponents;
+}): AppFieldExtendedOctaneFieldGroupApi<
+	TFormData,
+	TFieldGroupData,
+	TFields,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TOnServer,
+	TSubmitMeta,
+	TComponents,
+	TFormComponents
+> {
+	const [formLensApi] = useState(() => {
+		const api = new FieldGroupApi(opts);
+		const form =
+			opts.form instanceof FieldGroupApi
+				? (opts.form.form as AppFieldExtendedOctaneFormApi<
+						TFormData,
+						TOnMount,
+						TOnChange,
+						TOnChangeAsync,
+						TOnBlur,
+						TOnBlurAsync,
+						TOnSubmit,
+						TOnSubmitAsync,
+						TOnDynamic,
+						TOnDynamicAsync,
+						TOnServer,
+						TSubmitMeta,
+						TComponents,
+						TFormComponents
+					>)
+				: opts.form;
+
+		const extendedApi: AppFieldExtendedOctaneFieldGroupApi<
+			TFormData,
+			TFieldGroupData,
+			TFields,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TOnServer,
+			TSubmitMeta,
+			TComponents,
+			TFormComponents
+		> = api as never;
+
+		extendedApi.AppForm = function AppForm(appFormProps) {
+			return <form.AppForm {...appFormProps} />;
+		};
+
+		extendedApi.AppField = function AppField(props) {
+			return <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />;
+		};
+
+		extendedApi.Field = function Field(props) {
+			return <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />;
+		};
+
+		extendedApi.Subscribe = function Subscribe(props: any) {
+			return (
+				<LocalSubscribe lens={formLensApi} selector={props.selector} children={props.children} />
+			);
+		};
+
+		return Object.assign(extendedApi, {
+			...opts.formComponents,
+		}) as AppFieldExtendedOctaneFieldGroupApi<
+			TFormData,
+			TFieldGroupData,
+			TFields,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TOnServer,
+			TSubmitMeta,
+			TComponents,
+			TFormComponents
+		>;
+	});
+
+	useIsomorphicLayoutEffect(formLensApi.mount, [formLensApi]);
+
+	return formLensApi;
+}

package/src/useFieldGroup.tsrx.d.ts

@@ -0,0 +1,37 @@
+// Declaration companion generated from useFieldGroup.tsrx.
+import { FieldGroupApi } from '@tanstack/form-core';
+import type { DeepKeysOfType, FieldGroupState, FieldsMap, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
+import type { AppFieldExtendedOctaneFormApi } from './createFormHook.tsrx';
+import type { LensFieldComponent } from './useField.tsrx';
+type FieldGroupRenderable = unknown;
+type FieldGroupPropsWithChildren<P = object> = P & {
+    children?: FieldGroupRenderable;
+};
+type FieldGroupFunctionComponent<P = object> = (props: P) => FieldGroupRenderable;
+type FieldGroupComponentType<P = object> = FieldGroupFunctionComponent<P>;
+/**
+ * @private
+ */
+export type AppFieldExtendedOctaneFieldGroupApi<TFormData, TFieldGroupData, TFields extends DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | FieldsMap<TFormData, TFieldGroupData>, 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, TFieldComponents extends Record<string, FieldGroupComponentType<any>>, TFormComponents extends Record<string, FieldGroupComponentType<any>>> = FieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<TFormComponents> & {
+    AppField: LensFieldComponent<TFieldGroupData, TSubmitMeta, NoInfer<TFieldComponents>>;
+    AppForm: FieldGroupComponentType<FieldGroupPropsWithChildren<{}>>;
+    /**
+     * A component to render form fields. With this, you can render and manage individual form fields.
+     */
+    Field: LensFieldComponent<TFieldGroupData, 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<FieldGroupState<TFieldGroupData>>>(props: {
+        selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected;
+        children: ((state: NoInfer<TSelected>) => FieldGroupRenderable) | FieldGroupRenderable;
+    }) => ReturnType<FieldGroupFunctionComponent>;
+};
+export declare function useFieldGroup<TFormData, TFieldGroupData, TFields extends DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | FieldsMap<TFormData, TFieldGroupData>, 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>, TComponents extends Record<string, FieldGroupComponentType<any>>, TFormComponents extends Record<string, FieldGroupComponentType<any>>, TSubmitMeta = never>(opts: {
+    form: AppFieldExtendedOctaneFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents> | AppFieldExtendedOctaneFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, TSubmitMeta, TComponents, TFormComponents>;
+    fields: TFields;
+    defaultValues?: TFieldGroupData;
+    onSubmitMeta?: TSubmitMeta;
+    formComponents: TFormComponents;
+}): AppFieldExtendedOctaneFieldGroupApi<TFormData, TFieldGroupData, TFields, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+export {};

package/src/useForm.tsrx

@@ -0,0 +1,296 @@
+import { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core';
+import { useSelector } from '@octanejs/tanstack-store';
+import { useMemo, useRef, useState } from 'octane';
+import { Field } from './useField.tsrx';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import { useFormId } from './useFormId';
+import { FormGroup } from './useFormGroup.tsrx';
+import type { FormGroupComponent } from './useFormGroup.tsrx';
+import type {
+	AnyFormApi,
+	AnyFormState,
+	FormAsyncValidateOrFn,
+	FormOptions,
+	FormState,
+	FormValidateOrFn,
+} from '@tanstack/form-core';
+import type { FieldComponent } from './useField.tsrx';
+
+type FormRenderable = unknown;
+type FormPropsWithChildren<P = object> = P & { children?: FormRenderable };
+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
+	>;
+
+function LocalSubscribe({
+	form,
+	selector = (state) => state,
+	children,
+}: FormPropsWithChildren<{
+	form: AnyFormApi;
+	selector?: (state: AnyFormState) => AnyFormState;
+}>): ReturnType<FormFunctionComponent> {
+	const data = useSelector(form.store, selector);
+
+	return <>{functionalUpdate(children, data)}</>;
+}
+
+/**
+ * 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 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
+	>,
+) {
+	const fallbackFormId = useFormId();
+	const formId = opts?.formId ?? fallbackFormId;
+	const [prevFormId, setPrevFormId] = useState(formId);
+
+	const [formApi, setFormApi] = useState(() => {
+		return new FormApi<
+			TFormData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TOnServer,
+			TSubmitMeta
+		>({ ...opts, formId });
+	});
+
+	if (prevFormId !== formId) {
+		setFormApi(new FormApi({ ...opts, formId }));
+		setPrevFormId(formId);
+	}
+
+	const extendedFormApi = useMemo(() => {
+		const extendedApi: OctaneFormExtendedApi<
+			TFormData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TOnServer,
+			TSubmitMeta
+		> = {
+			...formApi,
+			handleSubmit: ((...props: never[]) => {
+				return formApi._handleSubmit(...props);
+			}) as typeof formApi.handleSubmit,
+			// We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those
+			get formId(): string {
+				return formApi._formId;
+			},
+			get state() {
+				return formApi.store.state;
+			},
+		} as never;
+
+		extendedApi.Field = function APIField(props) {
+			return <Field {...props} form={formApi} />;
+		};
+
+		extendedApi.FormGroup = function APIFormGroup(props) {
+			return <FormGroup {...props} form={formApi} />;
+		};
+
+		extendedApi.Subscribe = function Subscribe(props: any) {
+			return <LocalSubscribe form={formApi} selector={props.selector} children={props.children} />;
+		};
+
+		return extendedApi;
+	}, [formApi]);
+
+	useIsomorphicLayoutEffect(formApi.mount, [formApi]);
+
+	/**
+	 * formApi.update should not have any side effects. Think of it like a `useRef`
+	 * that we need to keep updated every render with the most up-to-date information.
+	 */
+	useIsomorphicLayoutEffect(() => {
+		formApi.update(opts);
+	});
+
+	const hasRan = useRef(false);
+
+	useIsomorphicLayoutEffect(() => {
+		if (!hasRan.current) return;
+		if (!opts?.transform) return;
+		mergeAndUpdate(formApi, opts.transform as never);
+	}, [formApi, opts?.transform]);
+
+	useIsomorphicLayoutEffect(() => {
+		hasRan.current = true;
+	});
+
+	return extendedFormApi;
+}