@pindoba/react-tanstack-form 0.0.0-alpha-20260907031008 → 0.0.0-alpha-20261110151933

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import { AnyFieldApi, AnyFormApi, FormFieldErrorMode, FormFieldOwnProps } from "./src/types.js";
+import { AnyFieldApi, AnyFormApi, FormControlReservedAttribute, FormFieldErrorMode, FormFieldOwnProps } from "./src/types.js";
 import { FormField, FormFieldProps } from "./src/FormField.js";
-import { FormInput, FormInputProps } from "./src/FormInput.js";
-import { FormSelect, FormSelectProps } from "./src/FormSelect.js";
-import { FormCheckbox, FormCheckboxProps } from "./src/FormCheckbox.js";
+import { FormInput, FormInputAttributes, FormInputProps } from "./src/FormInput.js";
+import { FormTextarea, FormTextareaAttributes, FormTextareaProps } from "./src/FormTextarea.js";
+import { FormSelect, FormSelectAttributes, FormSelectProps } from "./src/FormSelect.js";
+import { FormCheckbox, FormCheckboxAttributes, FormCheckboxProps } from "./src/FormCheckbox.js";
 import { FormSubmit, FormSubmitProps } from "./src/FormSubmit.js";
 import { useFocusInvalidOnSubmit } from "./src/useFocusInvalidOnSubmit.js";
 import { getVisibleErrors, normalizeErrors } from "./src/field-errors.js";
 import { useForm, useStore } from "@tanstack/react-form";
 import { FocusInvalidOptions } from "@pindoba/core-tanstack-form";
-export { type AnyFieldApi, type AnyFormApi, type FocusInvalidOptions, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldErrorMode, type FormFieldOwnProps, type FormFieldProps, FormInput, type FormInputProps, FormSelect, type FormSelectProps, FormSubmit, type FormSubmitProps, getVisibleErrors, normalizeErrors, useFocusInvalidOnSubmit, useForm, useStore };
+export { type AnyFieldApi, type AnyFormApi, type FocusInvalidOptions, FormCheckbox, type FormCheckboxAttributes, type FormCheckboxProps, type FormControlReservedAttribute, FormField, type FormFieldErrorMode, type FormFieldOwnProps, type FormFieldProps, FormInput, type FormInputAttributes, type FormInputProps, FormSelect, type FormSelectAttributes, type FormSelectProps, FormSubmit, type FormSubmitProps, FormTextarea, type FormTextareaAttributes, type FormTextareaProps, getVisibleErrors, normalizeErrors, useFocusInvalidOnSubmit, useForm, useStore };

package/dist/index.js

@@ -1,9 +1,10 @@
 import { getVisibleErrors, normalizeErrors } from "./src/field-errors.js";
 import { FormField } from "./src/FormField.js";
 import { FormInput } from "./src/FormInput.js";
+import { FormTextarea } from "./src/FormTextarea.js";
 import { FormSelect } from "./src/FormSelect.js";
 import { FormCheckbox } from "./src/FormCheckbox.js";
 import { FormSubmit } from "./src/FormSubmit.js";
 import { useFocusInvalidOnSubmit } from "./src/useFocusInvalidOnSubmit.js";
 import { useForm, useStore } from "@tanstack/react-form";
-export { FormCheckbox, FormField, FormInput, FormSelect, FormSubmit, getVisibleErrors, normalizeErrors, useFocusInvalidOnSubmit, useForm, useStore };
+export { FormCheckbox, FormField, FormInput, FormSelect, FormSubmit, FormTextarea, getVisibleErrors, normalizeErrors, useFocusInvalidOnSubmit, useForm, useStore };

package/dist/src/FormCheckbox.d.ts

@@ -1,22 +1,33 @@
-import { AnyFormApi, FormFieldOwnProps } from "./types.js";
-import { JSX, ReactNode } from "react";
+import { AnyFormApi, FormControlReservedAttribute, FormFieldOwnProps } from "./types.js";
+import React, { InputHTMLAttributes, ReactNode } from "react";
 import { FieldSize } from "@pindoba/core-field";
 //#region src/FormCheckbox.d.ts
-type FormCheckboxProps = Omit<FormFieldOwnProps, "size"> & {
+/**
+ * Native attributes for the checkbox `<input>` (`value`, `autoFocus`,
+ * `data-*`, …). Routed through `passThrough.input.props` so they land on the
+ * `<input>`, not the Checkbox's root `<label>`.
+ */
+export type FormCheckboxAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, Exclude<FormControlReservedAttribute, "value"> | "type">;
+export type FormCheckboxProps = Omit<FormFieldOwnProps, "size"> & FormCheckboxAttributes & {
   /** The TanStack form instance returned by `useForm(...)`. */
   form: AnyFormApi;
-  /** Field name (a boolean key of the form's data). */
+  /**
+   * Field name (a boolean key of the form's data). Also the native `name`
+   * of the checkbox `<input>`.
+   */
   name: string;
   /** Inline text/content rendered beside the checkbox. */
   children?: ReactNode;
   /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */
   size?: Exclude<FieldSize, "xs">;
+  /**
+   * Ref forwarded to the native checkbox `<input>` (through the underlying
+   * `<Checkbox>`) — the focus target, not the root `<label>`.
+   * @group Advanced
+   */
+  ref?: React.Ref<HTMLInputElement>;
 };
 /** FormCheckbox — a `<Checkbox>` bound to a boolean TanStack form field. */
-declare function FormCheckbox({ form, name, children, size, ...fieldProps }: FormCheckboxProps): JSX.Element;
-declare namespace FormCheckbox {
-  var displayName: string;
-}
+export declare const FormCheckbox: React.ForwardRefExoticComponent<Omit<FormCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { FormCheckbox, FormCheckboxProps };
 //# sourceMappingURL=FormCheckbox.d.ts.map

package/dist/src/FormCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.d.ts","names":[],"sources":["../../src/FormCheckbox.tsx"],"mappings":";;;;KAMY,oBAAoB,KAAK;;EAEnC,MAAM;;EAEN;;EAEA,WAAW;;EAEX,OAAO,QAAQ;;;iBAID,eACd,MACA,MACA,UACA,SACG,cACF,oBAAoB,IAAI;kBANX;MAAA"}
+{"version":3,"file":"FormCheckbox.d.ts","names":[],"sources":["../../src/FormCheckbox.tsx"],"mappings":";;;;;;;;;YAuBY,yBAAyB,KACnC,oBAAoB,mBAEpB,QAAQ;YAGE,oBAAoB,KAAK,6BACnC;;EAEE,MAAM;;;;;EAKN;;EAEA,WAAW;;EAEX,OAAO,QAAQ;;;;;;EAMf,MAAM,MAAM,IAAI;;;qBAIP,cAAY,MAAA,0BAAA,KAAA,4BAAA,MAAA,cAAA"}

package/dist/src/FormCheckbox.js

@@ -1,24 +1,41 @@
 import { FormField } from "./FormField.js";
+import { routeCheckboxControlProps, splitFormFieldProps } from "@pindoba/core-tanstack-form";
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import Checkbox from "@pindoba/react-checkbox";
 //#region src/FormCheckbox.tsx
 /** FormCheckbox — a `<Checkbox>` bound to a boolean TanStack form field. */
-function FormCheckbox({ form, name, children, size, ...fieldProps }) {
+const FormCheckbox = React.forwardRef(function FormCheckbox({ form, name, children, ...rest }, ref) {
+	const { fieldProps, controlAttrs } = splitFormFieldProps(rest);
+	const { onChange, onBlur, ...inputAttrs } = controlAttrs;
 	return /* @__PURE__ */ jsx(FormField, {
 		form,
 		name,
-		size,
 		...fieldProps,
-		control: (props, field) => /* @__PURE__ */ jsx(Checkbox, {
-			...props,
-			size,
-			checked: Boolean(field.state.value),
-			onChange: (event) => field.handleChange(event.target.checked),
-			onBlur: () => field.handleBlur(),
-			children
-		})
+		control: (props, field) => {
+			const { checkboxProps, inputProps } = routeCheckboxControlProps(props, {
+				...inputAttrs,
+				name
+			});
+			return /* @__PURE__ */ jsx(Checkbox, {
+				...checkboxProps,
+				ref,
+				size: fieldProps.size,
+				passThrough: { input: { props: inputProps } },
+				checked: Boolean(field.state.value),
+				onChange: (event) => {
+					field.handleChange(event.target.checked);
+					onChange?.(event);
+				},
+				onBlur: (event) => {
+					field.handleBlur();
+					onBlur?.(event);
+				},
+				children
+			});
+		}
 	});
-}
+});
 FormCheckbox.displayName = "FormCheckbox";
 //#endregion
 export { FormCheckbox };

package/dist/src/FormCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.js","names":[],"sources":["../../src/FormCheckbox.tsx"],"sourcesContent":["import type { FieldSize } from \"@pindoba/core-field\";\nimport Checkbox from \"@pindoba/react-checkbox\";\nimport type { JSX, ReactNode } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type { AnyFormApi, FormFieldOwnProps } from \"./types\";\n\nexport type FormCheckboxProps = Omit<FormFieldOwnProps, \"size\"> & {\n  /** The TanStack form instance returned by `useForm(...)`. */\n  form: AnyFormApi;\n  /** Field name (a boolean key of the form's data). */\n  name: string;\n  /** Inline text/content rendered beside the checkbox. */\n  children?: ReactNode;\n  /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */\n  size?: Exclude<FieldSize, \"xs\">;\n};\n\n/** FormCheckbox — a `<Checkbox>` bound to a boolean TanStack form field. */\nexport function FormCheckbox({\n  form,\n  name,\n  children,\n  size,\n  ...fieldProps\n}: FormCheckboxProps): JSX.Element {\n  return (\n    <FormField\n      form={form}\n      name={name}\n      size={size}\n      {...fieldProps}\n      control={(props, field) => (\n        <Checkbox\n          {...props}\n          size={size}\n          checked={Boolean(field.state.value)}\n          onChange={(event) => field.handleChange(event.target.checked)}\n          onBlur={() => field.handleBlur()}\n        >\n          {children}\n        </Checkbox>\n      )}\n    />\n  );\n}\n\nFormCheckbox.displayName = \"FormCheckbox\";\n"],"mappings":";;;;;AAkBA,SAAgB,aAAa,EAC3B,MACA,MACA,UACA,MACA,GAAG,cAC8B;CACjC,OACE,oBAAC,WAAD;EACQ;EACA;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,UAAD;GACE,GAAI;GACE;GACN,SAAS,QAAQ,MAAM,MAAM,KAAK;GAClC,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,OAAO;GAC5D,cAAc,MAAM,WAAW;GAE9B;EACO,CAAA;CAEb,CAAA;AAEL;AAEA,aAAa,cAAc"}
+{"version":3,"file":"FormCheckbox.js","names":[],"sources":["../../src/FormCheckbox.tsx"],"sourcesContent":["import type { FieldSize } from \"@pindoba/core-field\";\nimport {\n  routeCheckboxControlProps,\n  splitFormFieldProps,\n} from \"@pindoba/core-tanstack-form\";\nimport Checkbox from \"@pindoba/react-checkbox\";\nimport React, {\n  type InputHTMLAttributes,\n  type JSX,\n  type ReactNode,\n} from \"react\";\nimport { FormField } from \"./FormField\";\nimport type {\n  AnyFormApi,\n  FormControlReservedAttribute,\n  FormFieldOwnProps,\n} from \"./types\";\n\n/**\n * Native attributes for the checkbox `<input>` (`value`, `autoFocus`,\n * `data-*`, …). Routed through `passThrough.input.props` so they land on the\n * `<input>`, not the Checkbox's root `<label>`.\n */\nexport type FormCheckboxAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `value` stays: it is the checkbox's native submission value.\n  Exclude<FormControlReservedAttribute, \"value\"> | \"type\"\n>;\n\nexport type FormCheckboxProps = Omit<FormFieldOwnProps, \"size\"> &\n  FormCheckboxAttributes & {\n    /** The TanStack form instance returned by `useForm(...)`. */\n    form: AnyFormApi;\n    /**\n     * Field name (a boolean key of the form's data). Also the native `name`\n     * of the checkbox `<input>`.\n     */\n    name: string;\n    /** Inline text/content rendered beside the checkbox. */\n    children?: ReactNode;\n    /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */\n    size?: Exclude<FieldSize, \"xs\">;\n    /**\n     * Ref forwarded to the native checkbox `<input>` (through the underlying\n     * `<Checkbox>`) — the focus target, not the root `<label>`.\n     * @group Advanced\n     */\n    ref?: React.Ref<HTMLInputElement>;\n  };\n\n/** FormCheckbox — a `<Checkbox>` bound to a boolean TanStack form field. */\nexport const FormCheckbox = React.forwardRef<\n  HTMLInputElement,\n  FormCheckboxProps\n>(function FormCheckbox({ form, name, children, ...rest }, ref): JSX.Element {\n  const { fieldProps, controlAttrs } = splitFormFieldProps(rest);\n  const { onChange, onBlur, ...inputAttrs } = controlAttrs;\n  return (\n    <FormField\n      form={form}\n      name={name}\n      {...fieldProps}\n      control={(props, field) => {\n        // The Field's aria wiring must reach the `<input>`: Checkbox spreads\n        // unknown props onto its root `<label>`.\n        const { checkboxProps, inputProps } = routeCheckboxControlProps(props, {\n          ...inputAttrs,\n          name,\n        });\n        return (\n          <Checkbox\n            {...checkboxProps}\n            ref={ref}\n            size={fieldProps.size}\n            passThrough={{ input: { props: inputProps } }}\n            checked={Boolean(field.state.value)}\n            onChange={(event) => {\n              field.handleChange(event.target.checked);\n              onChange?.(event);\n            }}\n            onBlur={(event) => {\n              field.handleBlur();\n              onBlur?.(event);\n            }}\n          >\n            {children}\n          </Checkbox>\n        );\n      }}\n    />\n  );\n});\n\nFormCheckbox.displayName = \"FormCheckbox\";\n"],"mappings":";;;;;;;AAmDA,MAAa,eAAe,MAAM,WAGhC,SAAS,aAAa,EAAE,MAAM,MAAM,UAAU,GAAG,QAAQ,KAAkB;CAC3E,MAAM,EAAE,YAAY,iBAAiB,oBAAoB,IAAI;CAC7D,MAAM,EAAE,UAAU,QAAQ,GAAG,eAAe;CAC5C,OACE,oBAAC,WAAD;EACQ;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UAAU;GAGzB,MAAM,EAAE,eAAe,eAAe,0BAA0B,OAAO;IACrE,GAAG;IACH;GACF,CAAC;GACD,OACE,oBAAC,UAAD;IACE,GAAI;IACC;IACL,MAAM,WAAW;IACjB,aAAa,EAAE,OAAO,EAAE,OAAO,WAAW,EAAE;IAC5C,SAAS,QAAQ,MAAM,MAAM,KAAK;IAClC,WAAW,UAAU;KACnB,MAAM,aAAa,MAAM,OAAO,OAAO;KACvC,WAAW,KAAK;IAClB;IACA,SAAS,UAAU;KACjB,MAAM,WAAW;KACjB,SAAS,KAAK;IAChB;IAEC;GACO,CAAA;EAEd;CACD,CAAA;AAEL,CAAC;AAED,aAAa,cAAc"}

package/dist/src/FormField.d.ts

@@ -2,7 +2,7 @@ import { AnyFieldApi, AnyFormApi, FormFieldOwnProps } from "./types.js";
 import { JSX, ReactNode } from "react";
 import { FieldControlProps } from "@pindoba/core-field";
 //#region src/FormField.d.ts
-type FormFieldProps = FormFieldOwnProps & {
+export type FormFieldProps = FormFieldOwnProps & {
   /** The TanStack form instance returned by `useForm(...)`. */
   form: AnyFormApi;
   /** Field name (a key of the form's data). */
@@ -20,10 +20,9 @@ type FormFieldProps = FormFieldOwnProps & {
  * control via the `control` render-prop, which receives the Field's `controlProps`
  * bag plus the raw `field` API.
  */
-declare function FormField({ form, name, control, errorMode, ...fieldProps }: FormFieldProps): JSX.Element;
-declare namespace FormField {
+export declare function FormField({ form, name, control, errorMode, ...fieldProps }: FormFieldProps): JSX.Element;
+export declare namespace FormField {
   var displayName: string;
 }
 //#endregion
-export { FormField, FormFieldProps };
 //# sourceMappingURL=FormField.d.ts.map

package/dist/src/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","names":[],"sources":["../../src/FormField.tsx"],"mappings":";;;;KAOY,iBAAiB;;EAE3B,MAAM;;EAEN;;;;;EAKA,UAAU,cAAc,mBAAmB,OAAO,gBAAgB;;;;;;;;;iBAUpD,YACd,MACA,MACA,SACA,cACG,cACF,iBAAiB,IAAI;kBANR;MAAA"}
+{"version":3,"file":"FormField.d.ts","names":[],"sources":["../../src/FormField.tsx"],"mappings":";;;;YAOY,iBAAiB;;EAE3B,MAAM;;EAEN;;;;;EAKA,UAAU,cAAc,mBAAmB,OAAO,gBAAgB;;;;;;;;;wBAUpD,YACd,MACA,MACA,SACA,cACG,cACF,iBAAiB,IAAI;yBANR;MAAA"}

package/dist/src/FormInput.d.ts

@@ -1,22 +1,39 @@
-import { AnyFormApi, FormFieldOwnProps } from "./types.js";
+import { AnyFormApi, FormControlReservedAttribute, FormFieldOwnProps } from "./types.js";
 import { InputProps } from "@pindoba/react-input";
-import { JSX } from "react";
+import React from "react";
 //#region src/FormInput.d.ts
-type FormInputProps = FormFieldOwnProps & {
+/**
+ * Native `<input>` attributes a consumer may pass straight through
+ * (`autoComplete`, `inputMode`, `autoCapitalize`, `spellCheck`,
+ * `enterKeyHint`, `pattern`, `min`/`max`/`step`, `maxLength`, `data-*`, …).
+ * The form owns the value and the Field owns the id/aria wiring, so those are
+ * reserved.
+ */
+export type FormInputAttributes = Omit<InputProps, FormControlReservedAttribute | "type" | "placeholder" | "ref">;
+export type FormInputProps = FormFieldOwnProps & FormInputAttributes & {
   /** The TanStack form instance returned by `useForm(...)`. */
   form: AnyFormApi;
-  /** Field name (a key of the form's data). */
+  /**
+   * Field name (a key of the form's data). Also rendered as the native
+   * `name` attribute, so browsers and password managers can autofill.
+   */
   name: string;
   /** HTML input type forwarded to the underlying `<Input>`. */
   type?: InputProps["type"];
   /** Placeholder forwarded to the underlying `<Input>`. */
   placeholder?: string;
+  /**
+   * Ref forwarded to the native `<input>` (through the underlying
+   * `<Input>`) — the focus target (`ref.current.focus()`).
+   * @group Advanced
+   */
+  ref?: React.Ref<HTMLInputElement>;
 };
-/** FormInput — a text `<Input>` bound to a TanStack form field. */
-declare function FormInput({ form, name, type, placeholder, size, ...fieldProps }: FormInputProps): JSX.Element;
-declare namespace FormInput {
-  var displayName: string;
-}
+/**
+ * FormInput — a text `<Input>` bound to a TanStack form field. Every prop
+ * that isn't a Field prop (label, description, …) is forwarded to the
+ * `<input>`; consumer `onChange`/`onBlur` run after the form's own handlers.
+ */
+export declare const FormInput: React.ForwardRefExoticComponent<Omit<FormInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { FormInput, FormInputProps };
 //# sourceMappingURL=FormInput.d.ts.map

package/dist/src/FormInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.d.ts","names":[],"sources":["../../src/FormInput.tsx"],"mappings":";;;;KAKY,iBAAiB;;EAE3B,MAAM;;EAEN;;EAEA,OAAO;;EAEP;;;iBAIc,YACd,MACA,MACA,MACA,aACA,SACG,cACF,iBAAiB,IAAI;kBAPR;MAAA"}
+{"version":3,"file":"FormInput.d.ts","names":[],"sources":["../../src/FormInput.tsx"],"mappings":";;;;;;;;;;;YAiBY,sBAAsB,KAChC,YACA;YAGU,iBAAiB,oBAC3B;;EAEE,MAAM;;;;;EAKN;;EAEA,OAAO;;EAEP;;;;;;EAMA,MAAM,MAAM,IAAI;;;;;;;qBAQP,WAAS,MAAA,0BAAA,KAAA,yBAAA,MAAA,cAAA"}

package/dist/src/FormInput.js

@@ -1,25 +1,41 @@
 import { FormField } from "./FormField.js";
+import { splitFormFieldProps } from "@pindoba/core-tanstack-form";
 import { jsx } from "react/jsx-runtime";
 import Input from "@pindoba/react-input";
+import React from "react";
 //#region src/FormInput.tsx
-/** FormInput — a text `<Input>` bound to a TanStack form field. */
-function FormInput({ form, name, type = "text", placeholder, size, ...fieldProps }) {
+/**
+* FormInput — a text `<Input>` bound to a TanStack form field. Every prop
+* that isn't a Field prop (label, description, …) is forwarded to the
+* `<input>`; consumer `onChange`/`onBlur` run after the form's own handlers.
+*/
+const FormInput = React.forwardRef(function FormInput({ form, name, type = "text", placeholder, ...rest }, ref) {
+	const { fieldProps, controlAttrs } = splitFormFieldProps(rest);
+	const { onChange, onBlur, ...inputAttrs } = controlAttrs;
 	return /* @__PURE__ */ jsx(FormField, {
 		form,
 		name,
-		size,
 		...fieldProps,
 		control: (props, field) => /* @__PURE__ */ jsx(Input, {
+			...inputAttrs,
 			...props,
-			size,
+			ref,
+			name,
+			size: fieldProps.size,
 			type,
 			placeholder,
 			value: String(field.state.value ?? ""),
-			onChange: (event) => field.handleChange(event.target.value),
-			onBlur: () => field.handleBlur()
+			onChange: (event) => {
+				field.handleChange(event.target.value);
+				onChange?.(event);
+			},
+			onBlur: (event) => {
+				field.handleBlur();
+				onBlur?.(event);
+			}
 		})
 	});
-}
+});
 FormInput.displayName = "FormInput";
 //#endregion
 export { FormInput };

package/dist/src/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","names":[],"sources":["../../src/FormInput.tsx"],"sourcesContent":["import Input, { type InputProps } from \"@pindoba/react-input\";\nimport type { JSX } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type { AnyFormApi, FormFieldOwnProps } from \"./types\";\n\nexport type FormInputProps = FormFieldOwnProps & {\n  /** The TanStack form instance returned by `useForm(...)`. */\n  form: AnyFormApi;\n  /** Field name (a key of the form's data). */\n  name: string;\n  /** HTML input type forwarded to the underlying `<Input>`. */\n  type?: InputProps[\"type\"];\n  /** Placeholder forwarded to the underlying `<Input>`. */\n  placeholder?: string;\n};\n\n/** FormInput — a text `<Input>` bound to a TanStack form field. */\nexport function FormInput({\n  form,\n  name,\n  type = \"text\",\n  placeholder,\n  size,\n  ...fieldProps\n}: FormInputProps): JSX.Element {\n  return (\n    <FormField\n      form={form}\n      name={name}\n      size={size}\n      {...fieldProps}\n      control={(props, field) => (\n        <Input\n          {...props}\n          size={size}\n          type={type}\n          placeholder={placeholder}\n          value={String(field.state.value ?? \"\")}\n          onChange={(event) => field.handleChange(event.target.value)}\n          onBlur={() => field.handleBlur()}\n        />\n      )}\n    />\n  );\n}\n\nFormInput.displayName = \"FormInput\";\n"],"mappings":";;;;;AAiBA,SAAgB,UAAU,EACxB,MACA,MACA,OAAO,QACP,aACA,MACA,GAAG,cAC2B;CAC9B,OACE,oBAAC,WAAD;EACQ;EACA;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,OAAD;GACE,GAAI;GACE;GACA;GACO;GACb,OAAO,OAAO,MAAM,MAAM,SAAS,EAAE;GACrC,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,KAAK;GAC1D,cAAc,MAAM,WAAW;EAChC,CAAA;CAEJ,CAAA;AAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormInput.js","names":[],"sources":["../../src/FormInput.tsx"],"sourcesContent":["import { splitFormFieldProps } from \"@pindoba/core-tanstack-form\";\nimport Input, { type InputProps } from \"@pindoba/react-input\";\nimport React, { type JSX } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type {\n  AnyFormApi,\n  FormControlReservedAttribute,\n  FormFieldOwnProps,\n} from \"./types\";\n\n/**\n * Native `<input>` attributes a consumer may pass straight through\n * (`autoComplete`, `inputMode`, `autoCapitalize`, `spellCheck`,\n * `enterKeyHint`, `pattern`, `min`/`max`/`step`, `maxLength`, `data-*`, …).\n * The form owns the value and the Field owns the id/aria wiring, so those are\n * reserved.\n */\nexport type FormInputAttributes = Omit<\n  InputProps,\n  FormControlReservedAttribute | \"type\" | \"placeholder\" | \"ref\"\n>;\n\nexport type FormInputProps = FormFieldOwnProps &\n  FormInputAttributes & {\n    /** The TanStack form instance returned by `useForm(...)`. */\n    form: AnyFormApi;\n    /**\n     * Field name (a key of the form's data). Also rendered as the native\n     * `name` attribute, so browsers and password managers can autofill.\n     */\n    name: string;\n    /** HTML input type forwarded to the underlying `<Input>`. */\n    type?: InputProps[\"type\"];\n    /** Placeholder forwarded to the underlying `<Input>`. */\n    placeholder?: string;\n    /**\n     * Ref forwarded to the native `<input>` (through the underlying\n     * `<Input>`) — the focus target (`ref.current.focus()`).\n     * @group Advanced\n     */\n    ref?: React.Ref<HTMLInputElement>;\n  };\n\n/**\n * FormInput — a text `<Input>` bound to a TanStack form field. Every prop\n * that isn't a Field prop (label, description, …) is forwarded to the\n * `<input>`; consumer `onChange`/`onBlur` run after the form's own handlers.\n */\nexport const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(\n  function FormInput(\n    { form, name, type = \"text\", placeholder, ...rest },\n    ref,\n  ): JSX.Element {\n    const { fieldProps, controlAttrs } = splitFormFieldProps(rest);\n    const { onChange, onBlur, ...inputAttrs } = controlAttrs;\n    return (\n      <FormField\n        form={form}\n        name={name}\n        {...fieldProps}\n        control={(props, field) => (\n          <Input\n            {...inputAttrs}\n            {...props}\n            ref={ref}\n            name={name}\n            size={fieldProps.size}\n            type={type}\n            placeholder={placeholder}\n            value={String(field.state.value ?? \"\")}\n            onChange={(event) => {\n              field.handleChange(event.target.value);\n              onChange?.(event);\n            }}\n            onBlur={(event) => {\n              field.handleBlur();\n              onBlur?.(event);\n            }}\n          />\n        )}\n      />\n    );\n  },\n);\n\nFormInput.displayName = \"FormInput\";\n"],"mappings":";;;;;;;;;;;AAgDA,MAAa,YAAY,MAAM,WAC7B,SAAS,UACP,EAAE,MAAM,MAAM,OAAO,QAAQ,aAAa,GAAG,QAC7C,KACa;CACb,MAAM,EAAE,YAAY,iBAAiB,oBAAoB,IAAI;CAC7D,MAAM,EAAE,UAAU,QAAQ,GAAG,eAAe;CAC5C,OACE,oBAAC,WAAD;EACQ;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,OAAD;GACE,GAAI;GACJ,GAAI;GACC;GACC;GACN,MAAM,WAAW;GACX;GACO;GACb,OAAO,OAAO,MAAM,MAAM,SAAS,EAAE;GACrC,WAAW,UAAU;IACnB,MAAM,aAAa,MAAM,OAAO,KAAK;IACrC,WAAW,KAAK;GAClB;GACA,SAAS,UAAU;IACjB,MAAM,WAAW;IACjB,SAAS,KAAK;GAChB;EACD,CAAA;CAEJ,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/src/FormSelect.d.ts

@@ -1,12 +1,22 @@
-import { AnyFormApi, FormFieldOwnProps } from "./types.js";
-import { JSX } from "react";
+import { AnyFormApi, FormControlReservedAttribute, FormFieldOwnProps } from "./types.js";
+import React from "react";
+import { SelectProps } from "@pindoba/react-select";
 import { FieldSize } from "@pindoba/core-field";
 import { ListBoxNodeInput } from "@pindoba/core-listbox";
 //#region src/FormSelect.d.ts
-type FormSelectProps = Omit<FormFieldOwnProps, "size"> & {
+/**
+ * Select props and trigger attributes a consumer may pass through
+ * (`clearable`, `leading`, `listbox*`, `data-*`, `aria-*`, …). The form owns
+ * the (single) selection, so the value/selection-mode props are reserved.
+ */
+export type FormSelectAttributes = Omit<SelectProps, FormControlReservedAttribute | "items" | "placeholder" | "selectionMode" | "onValueChange" | "ref">;
+export type FormSelectProps = Omit<FormFieldOwnProps, "size"> & FormSelectAttributes & {
   /** The TanStack form instance returned by `useForm(...)`. */
   form: AnyFormApi;
-  /** Field name (a key of the form's data holding the selected option key). */
+  /**
+   * Field name (a key of the form's data holding the selected option key).
+   * Also the `name` of the hidden native `<select>` mirror.
+   */
   name: string;
   /** Options to choose from. */
   items: ListBoxNodeInput[];
@@ -14,12 +24,19 @@ type FormSelectProps = Omit<FormFieldOwnProps, "size"> & {
   placeholder?: string;
   /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */
   size?: Exclude<FieldSize, "xs">;
+  /**
+   * Autofill hint (e.g. `"country"`) set on the hidden native `<select>`
+   * mirror, which the browser autofills and the Select syncs from.
+   */
+  autoComplete?: string;
+  /**
+   * Ref forwarded to the Select's focusable trigger (`role="combobox"`) —
+   * the focus target (`ref.current.focus()`).
+   * @group Advanced
+   */
+  ref?: React.Ref<HTMLDivElement>;
 };
 /** FormSelect — a single-select `<Select>` bound to a TanStack form field. */
-declare function FormSelect({ form, name, items, placeholder, size, ...fieldProps }: FormSelectProps): JSX.Element;
-declare namespace FormSelect {
-  var displayName: string;
-}
+export declare const FormSelect: React.ForwardRefExoticComponent<Omit<FormSelectProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { FormSelect, FormSelectProps };
 //# sourceMappingURL=FormSelect.d.ts.map

package/dist/src/FormSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.d.ts","names":[],"sources":["../../src/FormSelect.tsx"],"mappings":";;;;;KAOY,kBAAkB,KAAK;;EAEjC,MAAM;;EAEN;;EAEA,OAAO;;EAEP;;EAEA,OAAO,QAAQ;;;iBAID,aACd,MACA,MACA,OACA,aACA,SACG,cACF,kBAAkB,IAAI;kBAPT;MAAA"}
+{"version":3,"file":"FormSelect.d.ts","names":[],"sources":["../../src/FormSelect.tsx"],"mappings":";;;;;;;;;;;YAsBY,uBAAuB,KACjC,aACE;YAQQ,kBAAkB,KAAK,6BACjC;;EAEE,MAAM;;;;;EAKN;;EAEA,OAAO;;EAEP;;EAEA,OAAO,QAAQ;;;;;EAKf;;;;;;EAMA,MAAM,MAAM,IAAI;;;qBAIP,YAAU,MAAA,0BAAA,KAAA,0BAAA,MAAA,cAAA"}

package/dist/src/FormSelect.js

@@ -1,27 +1,35 @@
 import { FormField } from "./FormField.js";
+import { fromSelectValue, markTouchedOnSelectClose, splitFormFieldProps, toSelectValue } from "@pindoba/core-tanstack-form";
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import Select from "@pindoba/react-select";
 //#region src/FormSelect.tsx
 /** FormSelect — a single-select `<Select>` bound to a TanStack form field. */
-function FormSelect({ form, name, items, placeholder, size, ...fieldProps }) {
+const FormSelect = React.forwardRef(function FormSelect({ form, name, items, placeholder, autoComplete, ...rest }, ref) {
+	const { fieldProps, controlAttrs } = splitFormFieldProps(rest);
+	const { onOpenChange, ...selectAttrs } = controlAttrs;
 	return /* @__PURE__ */ jsx(FormField, {
 		form,
 		name,
-		size,
 		...fieldProps,
 		control: (props, field) => /* @__PURE__ */ jsx(Select, {
+			...selectAttrs,
 			...props,
-			size,
+			ref,
+			name,
+			size: fieldProps.size,
 			items,
 			placeholder,
-			value: typeof field.state.value === "string" && field.state.value ? field.state.value : null,
-			onValueChange: (next) => field.handleChange(typeof next === "string" ? next : ""),
+			...autoComplete ? { passThrough: { hiddenSelect: { props: { autoComplete } } } } : {},
+			value: toSelectValue(field.state.value),
+			onValueChange: (next) => field.handleChange(fromSelectValue(next)),
 			onOpenChange: (open) => {
-				if (!open) field.handleBlur();
+				markTouchedOnSelectClose(field, open);
+				onOpenChange?.(open);
 			}
 		})
 	});
-}
+});
 FormSelect.displayName = "FormSelect";
 //#endregion
 export { FormSelect };

package/dist/src/FormSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.js","names":[],"sources":["../../src/FormSelect.tsx"],"sourcesContent":["import type { FieldSize } from \"@pindoba/core-field\";\nimport type { ListBoxNodeInput } from \"@pindoba/core-listbox\";\nimport Select from \"@pindoba/react-select\";\nimport type { JSX } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type { AnyFormApi, FormFieldOwnProps } from \"./types\";\n\nexport type FormSelectProps = Omit<FormFieldOwnProps, \"size\"> & {\n  /** The TanStack form instance returned by `useForm(...)`. */\n  form: AnyFormApi;\n  /** Field name (a key of the form's data holding the selected option key). */\n  name: string;\n  /** Options to choose from. */\n  items: ListBoxNodeInput[];\n  /** Placeholder shown when nothing is selected. */\n  placeholder?: string;\n  /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */\n  size?: Exclude<FieldSize, \"xs\">;\n};\n\n/** FormSelect — a single-select `<Select>` bound to a TanStack form field. */\nexport function FormSelect({\n  form,\n  name,\n  items,\n  placeholder,\n  size,\n  ...fieldProps\n}: FormSelectProps): JSX.Element {\n  return (\n    <FormField\n      form={form}\n      name={name}\n      size={size}\n      {...fieldProps}\n      control={(props, field) => (\n        <Select\n          {...props}\n          size={size}\n          items={items}\n          placeholder={placeholder}\n          value={\n            typeof field.state.value === \"string\" && field.state.value\n              ? field.state.value\n              : null\n          }\n          onValueChange={(next) =>\n            field.handleChange(typeof next === \"string\" ? next : \"\")\n          }\n          onOpenChange={(open) => {\n            // Mark touched when the dropdown closes — so `errorMode=\"touched\"`\n            // surfaces a required error after opening and dismissing without\n            // picking.\n            if (!open) field.handleBlur();\n          }}\n        />\n      )}\n    />\n  );\n}\n\nFormSelect.displayName = \"FormSelect\";\n"],"mappings":";;;;;AAqBA,SAAgB,WAAW,EACzB,MACA,MACA,OACA,aACA,MACA,GAAG,cAC4B;CAC/B,OACE,oBAAC,WAAD;EACQ;EACA;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,QAAD;GACE,GAAI;GACE;GACC;GACM;GACb,OACE,OAAO,MAAM,MAAM,UAAU,YAAY,MAAM,MAAM,QACjD,MAAM,MAAM,QACZ;GAEN,gBAAgB,SACd,MAAM,aAAa,OAAO,SAAS,WAAW,OAAO,EAAE;GAEzD,eAAe,SAAS;IAItB,IAAI,CAAC,MAAM,MAAM,WAAW;GAC9B;EACD,CAAA;CAEJ,CAAA;AAEL;AAEA,WAAW,cAAc"}
+{"version":3,"file":"FormSelect.js","names":[],"sources":["../../src/FormSelect.tsx"],"sourcesContent":["import type { FieldSize } from \"@pindoba/core-field\";\nimport type { ListBoxNodeInput } from \"@pindoba/core-listbox\";\nimport {\n  fromSelectValue,\n  markTouchedOnSelectClose,\n  splitFormFieldProps,\n  toSelectValue,\n} from \"@pindoba/core-tanstack-form\";\nimport Select, { type SelectProps } from \"@pindoba/react-select\";\nimport React, { type JSX } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type {\n  AnyFormApi,\n  FormControlReservedAttribute,\n  FormFieldOwnProps,\n} from \"./types\";\n\n/**\n * Select props and trigger attributes a consumer may pass through\n * (`clearable`, `leading`, `listbox*`, `data-*`, `aria-*`, …). The form owns\n * the (single) selection, so the value/selection-mode props are reserved.\n */\nexport type FormSelectAttributes = Omit<\n  SelectProps,\n  | FormControlReservedAttribute\n  | \"items\"\n  | \"placeholder\"\n  | \"selectionMode\"\n  | \"onValueChange\"\n  | \"ref\"\n>;\n\nexport type FormSelectProps = Omit<FormFieldOwnProps, \"size\"> &\n  FormSelectAttributes & {\n    /** The TanStack form instance returned by `useForm(...)`. */\n    form: AnyFormApi;\n    /**\n     * Field name (a key of the form's data holding the selected option key).\n     * Also the `name` of the hidden native `<select>` mirror.\n     */\n    name: string;\n    /** Options to choose from. */\n    items: ListBoxNodeInput[];\n    /** Placeholder shown when nothing is selected. */\n    placeholder?: string;\n    /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */\n    size?: Exclude<FieldSize, \"xs\">;\n    /**\n     * Autofill hint (e.g. `\"country\"`) set on the hidden native `<select>`\n     * mirror, which the browser autofills and the Select syncs from.\n     */\n    autoComplete?: string;\n    /**\n     * Ref forwarded to the Select's focusable trigger (`role=\"combobox\"`) —\n     * the focus target (`ref.current.focus()`).\n     * @group Advanced\n     */\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\n/** FormSelect — a single-select `<Select>` bound to a TanStack form field. */\nexport const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>(\n  function FormSelect(\n    { form, name, items, placeholder, autoComplete, ...rest },\n    ref,\n  ): JSX.Element {\n    const { fieldProps, controlAttrs } = splitFormFieldProps(rest);\n    const { onOpenChange, ...selectAttrs } = controlAttrs;\n    return (\n      <FormField\n        form={form}\n        name={name}\n        {...fieldProps}\n        control={(props, field) => (\n          <Select\n            {...selectAttrs}\n            {...props}\n            ref={ref}\n            name={name}\n            size={fieldProps.size}\n            items={items}\n            placeholder={placeholder}\n            {...(autoComplete\n              ? { passThrough: { hiddenSelect: { props: { autoComplete } } } }\n              : {})}\n            value={toSelectValue(field.state.value)}\n            onValueChange={(next) => field.handleChange(fromSelectValue(next))}\n            onOpenChange={(open) => {\n              // Mark touched when the dropdown closes — so `errorMode=\"touched\"`\n              // surfaces a required error after opening and dismissing without\n              // picking.\n              markTouchedOnSelectClose(field, open);\n              onOpenChange?.(open);\n            }}\n          />\n        )}\n      />\n    );\n  },\n);\n\nFormSelect.displayName = \"FormSelect\";\n"],"mappings":";;;;;;;AA6DA,MAAa,aAAa,MAAM,WAC9B,SAAS,WACP,EAAE,MAAM,MAAM,OAAO,aAAa,cAAc,GAAG,QACnD,KACa;CACb,MAAM,EAAE,YAAY,iBAAiB,oBAAoB,IAAI;CAC7D,MAAM,EAAE,cAAc,GAAG,gBAAgB;CACzC,OACE,oBAAC,WAAD;EACQ;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,QAAD;GACE,GAAI;GACJ,GAAI;GACC;GACC;GACN,MAAM,WAAW;GACV;GACM;GACb,GAAK,eACD,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,IAC7D,CAAC;GACL,OAAO,cAAc,MAAM,MAAM,KAAK;GACtC,gBAAgB,SAAS,MAAM,aAAa,gBAAgB,IAAI,CAAC;GACjE,eAAe,SAAS;IAItB,yBAAyB,OAAO,IAAI;IACpC,eAAe,IAAI;GACrB;EACD,CAAA;CAEJ,CAAA;AAEL,CACF;AAEA,WAAW,cAAc"}

package/dist/src/FormSubmit.d.ts

@@ -1,8 +1,8 @@
 import { AnyFormApi } from "./types.js";
+import React, { ReactNode } from "react";
 import { ButtonProps } from "@pindoba/react-button";
-import { JSX, ReactNode } from "react";
 //#region src/FormSubmit.d.ts
-type FormSubmitProps = {
+export type FormSubmitProps = {
   /** The TanStack form instance returned by `useForm(...)`. */
   form: AnyFormApi;
   /**
@@ -18,16 +18,20 @@ type FormSubmitProps = {
   size?: ButtonProps["size"];
   /** Button label content. Falls back to "Submit". */
   children?: ReactNode;
+  /**
+   * Ref forwarded to the native submit `<button>` (through the underlying
+   * `<Button>`).
+   * @group Advanced
+   */
+  ref?: React.Ref<HTMLButtonElement>;
 };
 /**
  * FormSubmit — a submit `<Button>` wired to the form's submit-readiness. While
- * the `onSubmit` promise is in flight the label is blurred with a corner spinner
- * (`Loading variant="busy"`) and the button is disabled + `aria-busy`.
+ * the `onSubmit` promise is in flight the button keeps its width and colour and
+ * its label is swapped for a spinner (`Loading variant="busy"
+ * indicator="inline"`); it's `aria-busy` and inert, not disabled — a disabled
+ * button would grey out as if the action weren't available.
  */
-declare function FormSubmit({ form, disableWhenInvalid, emphasis, size, children }: FormSubmitProps): JSX.Element;
-declare namespace FormSubmit {
-  var displayName: string;
-}
+export declare const FormSubmit: React.ForwardRefExoticComponent<Omit<FormSubmitProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
-export { FormSubmit, FormSubmitProps };
 //# sourceMappingURL=FormSubmit.d.ts.map

package/dist/src/FormSubmit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSubmit.d.ts","names":[],"sources":["../../src/FormSubmit.tsx"],"mappings":";;;;KAMY;;EAEV,MAAM;;;;;;;EAON;;EAEA,WAAW;;EAEX,OAAO;;EAEP,WAAW;;;;;;;iBAQG,aACd,MACA,oBACA,UACA,MACA,YACC,kBAAkB,IAAI;kBANT;MAAA"}
+{"version":3,"file":"FormSubmit.d.ts","names":[],"sources":["../../src/FormSubmit.tsx"],"mappings":";;;;YAOY;;EAEV,MAAM;;;;;;;EAON;;EAEA,WAAW;;EAEX,OAAO;;EAEP,WAAW;;;;;;EAMX,MAAM,MAAM,IAAI;;;;;;;;;qBAUL,YAAU,MAAA,0BAAA,KAAA,0BAAA,MAAA,cAAA"}

package/dist/src/FormSubmit.js

@@ -1,32 +1,41 @@
 import { useStore } from "@tanstack/react-form";
+import { getSubmitButtonState } from "@pindoba/core-tanstack-form";
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import Button from "@pindoba/react-button";
 import Loading from "@pindoba/react-loading";
 //#region src/FormSubmit.tsx
 /**
 * FormSubmit — a submit `<Button>` wired to the form's submit-readiness. While
-* the `onSubmit` promise is in flight the label is blurred with a corner spinner
-* (`Loading variant="busy"`) and the button is disabled + `aria-busy`.
+* the `onSubmit` promise is in flight the button keeps its width and colour and
+* its label is swapped for a spinner (`Loading variant="busy"
+* indicator="inline"`); it's `aria-busy` and inert, not disabled — a disabled
+* button would grey out as if the action weren't available.
 */
-function FormSubmit({ form, disableWhenInvalid = false, emphasis = "primary", size, children }) {
+const FormSubmit = React.forwardRef(function FormSubmit({ form, disableWhenInvalid = false, emphasis = "primary", size, children }, ref) {
 	const { canSubmit, isSubmitting } = useStore(form.store, (state) => ({
 		canSubmit: state.canSubmit,
 		isSubmitting: state.isSubmitting
 	}));
+	const button = getSubmitButtonState({
+		canSubmit,
+		isSubmitting
+	}, disableWhenInvalid);
 	return /* @__PURE__ */ jsx(Loading, {
-		loading: isSubmitting,
+		loading: button.busy,
 		variant: "busy",
-		indicator: true,
+		indicator: "inline",
 		children: /* @__PURE__ */ jsx(Button, {
+			ref,
 			type: "submit",
 			emphasis,
 			size,
-			disabled: isSubmitting || disableWhenInvalid && !canSubmit,
-			"aria-busy": isSubmitting ? "true" : void 0,
+			disabled: button.disabled,
+			"aria-busy": button.ariaBusy,
 			children: children ?? "Submit"
 		})
 	});
-}
+});
 FormSubmit.displayName = "FormSubmit";
 //#endregion
 export { FormSubmit };

package/dist/src/FormSubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSubmit.js","names":[],"sources":["../../src/FormSubmit.tsx"],"sourcesContent":["import Button, { type ButtonProps } from \"@pindoba/react-button\";\nimport Loading from \"@pindoba/react-loading\";\nimport { useStore } from \"@tanstack/react-form\";\nimport type { JSX, ReactNode } from \"react\";\nimport type { AnyFormApi } from \"./types\";\n\nexport type FormSubmitProps = {\n  /** The TanStack form instance returned by `useForm(...)`. */\n  form: AnyFormApi;\n  /**\n   * Also disable while the form is invalid (not just while submitting). Off by\n   * default — the button stays clickable so submitting an invalid form surfaces\n   * its errors instead of leaving the user stuck on a disabled control.\n   * @default false\n   */\n  disableWhenInvalid?: boolean;\n  /** Emphasis forwarded to the underlying `<Button>`. */\n  emphasis?: ButtonProps[\"emphasis\"];\n  /** Size forwarded to the underlying `<Button>`. */\n  size?: ButtonProps[\"size\"];\n  /** Button label content. Falls back to \"Submit\". */\n  children?: ReactNode;\n};\n\n/**\n * FormSubmit — a submit `<Button>` wired to the form's submit-readiness. While\n * the `onSubmit` promise is in flight the label is blurred with a corner spinner\n * (`Loading variant=\"busy\"`) and the button is disabled + `aria-busy`.\n */\nexport function FormSubmit({\n  form,\n  disableWhenInvalid = false,\n  emphasis = \"primary\",\n  size,\n  children,\n}: FormSubmitProps): JSX.Element {\n  const { canSubmit, isSubmitting } = useStore(form.store, (state) => ({\n    canSubmit: state.canSubmit,\n    isSubmitting: state.isSubmitting,\n  }));\n\n  return (\n    <Loading loading={isSubmitting} variant=\"busy\" indicator>\n      <Button\n        type=\"submit\"\n        emphasis={emphasis}\n        size={size}\n        disabled={isSubmitting || (disableWhenInvalid && !canSubmit)}\n        aria-busy={isSubmitting ? \"true\" : undefined}\n      >\n        {children ?? \"Submit\"}\n      </Button>\n    </Loading>\n  );\n}\n\nFormSubmit.displayName = \"FormSubmit\";\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,WAAW,EACzB,MACA,qBAAqB,OACrB,WAAW,WACX,MACA,YAC+B;CAC/B,MAAM,EAAE,WAAW,iBAAiB,SAAS,KAAK,QAAQ,WAAW;EACnE,WAAW,MAAM;EACjB,cAAc,MAAM;CACtB,EAAE;CAEF,OACE,oBAAC,SAAD;EAAS,SAAS;EAAc,SAAQ;EAAO,WAAA;EAC7C,UAAA,oBAAC,QAAD;GACE,MAAK;GACK;GACJ;GACN,UAAU,gBAAiB,sBAAsB,CAAC;GAClD,aAAW,eAAe,SAAS,KAAA;GAElC,UAAA,YAAY;EACP,CAAA;CACD,CAAA;AAEb;AAEA,WAAW,cAAc"}
+{"version":3,"file":"FormSubmit.js","names":[],"sources":["../../src/FormSubmit.tsx"],"sourcesContent":["import { getSubmitButtonState } from \"@pindoba/core-tanstack-form\";\nimport Button, { type ButtonProps } from \"@pindoba/react-button\";\nimport Loading from \"@pindoba/react-loading\";\nimport { useStore } from \"@tanstack/react-form\";\nimport React, { type JSX, type ReactNode } from \"react\";\nimport type { AnyFormApi } from \"./types\";\n\nexport type FormSubmitProps = {\n  /** The TanStack form instance returned by `useForm(...)`. */\n  form: AnyFormApi;\n  /**\n   * Also disable while the form is invalid (not just while submitting). Off by\n   * default — the button stays clickable so submitting an invalid form surfaces\n   * its errors instead of leaving the user stuck on a disabled control.\n   * @default false\n   */\n  disableWhenInvalid?: boolean;\n  /** Emphasis forwarded to the underlying `<Button>`. */\n  emphasis?: ButtonProps[\"emphasis\"];\n  /** Size forwarded to the underlying `<Button>`. */\n  size?: ButtonProps[\"size\"];\n  /** Button label content. Falls back to \"Submit\". */\n  children?: ReactNode;\n  /**\n   * Ref forwarded to the native submit `<button>` (through the underlying\n   * `<Button>`).\n   * @group Advanced\n   */\n  ref?: React.Ref<HTMLButtonElement>;\n};\n\n/**\n * FormSubmit — a submit `<Button>` wired to the form's submit-readiness. While\n * the `onSubmit` promise is in flight the button keeps its width and colour and\n * its label is swapped for a spinner (`Loading variant=\"busy\"\n * indicator=\"inline\"`); it's `aria-busy` and inert, not disabled — a disabled\n * button would grey out as if the action weren't available.\n */\nexport const FormSubmit = React.forwardRef<HTMLButtonElement, FormSubmitProps>(\n  function FormSubmit(\n    { form, disableWhenInvalid = false, emphasis = \"primary\", size, children },\n    ref,\n  ): JSX.Element {\n    const { canSubmit, isSubmitting } = useStore(form.store, (state) => ({\n      canSubmit: state.canSubmit,\n      isSubmitting: state.isSubmitting,\n    }));\n\n    const button = getSubmitButtonState(\n      { canSubmit, isSubmitting },\n      disableWhenInvalid,\n    );\n\n    return (\n      <Loading loading={button.busy} variant=\"busy\" indicator=\"inline\">\n        <Button\n          ref={ref}\n          type=\"submit\"\n          emphasis={emphasis}\n          size={size}\n          disabled={button.disabled}\n          aria-busy={button.ariaBusy}\n        >\n          {children ?? \"Submit\"}\n        </Button>\n      </Loading>\n    );\n  },\n);\n\nFormSubmit.displayName = \"FormSubmit\";\n"],"mappings":";;;;;;;;;;;;;;AAsCA,MAAa,aAAa,MAAM,WAC9B,SAAS,WACP,EAAE,MAAM,qBAAqB,OAAO,WAAW,WAAW,MAAM,YAChE,KACa;CACb,MAAM,EAAE,WAAW,iBAAiB,SAAS,KAAK,QAAQ,WAAW;EACnE,WAAW,MAAM;EACjB,cAAc,MAAM;CACtB,EAAE;CAEF,MAAM,SAAS,qBACb;EAAE;EAAW;CAAa,GAC1B,kBACF;CAEA,OACE,oBAAC,SAAD;EAAS,SAAS,OAAO;EAAM,SAAQ;EAAO,WAAU;EACtD,UAAA,oBAAC,QAAD;GACO;GACL,MAAK;GACK;GACJ;GACN,UAAU,OAAO;GACjB,aAAW,OAAO;GAEjB,UAAA,YAAY;EACP,CAAA;CACD,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}

package/dist/src/FormTextarea.d.ts

@@ -0,0 +1,34 @@
+import { AnyFormApi, FormControlReservedAttribute, FormFieldOwnProps } from "./types.js";
+import React from "react";
+import { TextareaProps } from "@pindoba/react-textarea";
+//#region src/FormTextarea.d.ts
+/**
+ * Native `<textarea>` attributes (`autoComplete`, `maxLength`, `spellCheck`,
+ * `wrap`, `data-*`, …) plus the Textarea's own `rows`/`resize`/`autoResize`.
+ * The form owns the value and the Field owns the id/aria wiring.
+ */
+export type FormTextareaAttributes = Omit<TextareaProps, FormControlReservedAttribute | "ref">;
+export type FormTextareaProps = FormFieldOwnProps & FormTextareaAttributes & {
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
+  /**
+   * Field name (a key of the form's data). Also rendered as the native
+   * `name` attribute.
+   */
+  name: string;
+  /**
+   * Ref forwarded to the native `<textarea>` (through the underlying
+   * `<Textarea>`) — the focus target (`ref.current.focus()`).
+   * @group Advanced
+   */
+  ref?: React.Ref<HTMLTextAreaElement>;
+};
+/**
+ * FormTextarea — a multi-line `<Textarea>` bound to a TanStack form field.
+ * Same wiring as `<FormInput>`: Field chrome, `aria-invalid` /
+ * `aria-describedby` / `aria-errormessage`, change + blur handlers. Consumer
+ * `onChange`/`onBlur` run after the form's own handlers.
+ */
+export declare const FormTextarea: React.ForwardRefExoticComponent<Omit<FormTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//# sourceMappingURL=FormTextarea.d.ts.map

package/dist/src/FormTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.d.ts","names":[],"sources":["../../src/FormTextarea.tsx"],"mappings":";;;;;;;;;YAeY,yBAAyB,KACnC,eACA;YAGU,oBAAoB,oBAC9B;;EAEE,MAAM;;;;;EAKN;;;;;;EAMA,MAAM,MAAM,IAAI;;;;;;;;qBASP,cAAY,MAAA,0BAAA,KAAA,4BAAA,MAAA,cAAA"}

package/dist/src/FormTextarea.js

@@ -0,0 +1,42 @@
+import { FormField } from "./FormField.js";
+import { splitFormFieldProps } from "@pindoba/core-tanstack-form";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Textarea from "@pindoba/react-textarea";
+//#region src/FormTextarea.tsx
+/**
+* FormTextarea — a multi-line `<Textarea>` bound to a TanStack form field.
+* Same wiring as `<FormInput>`: Field chrome, `aria-invalid` /
+* `aria-describedby` / `aria-errormessage`, change + blur handlers. Consumer
+* `onChange`/`onBlur` run after the form's own handlers.
+*/
+const FormTextarea = React.forwardRef(function FormTextarea({ form, name, ...rest }, ref) {
+	const { fieldProps, controlAttrs } = splitFormFieldProps(rest);
+	const { onChange, onBlur, ...textareaAttrs } = controlAttrs;
+	return /* @__PURE__ */ jsx(FormField, {
+		form,
+		name,
+		...fieldProps,
+		control: (props, field) => /* @__PURE__ */ jsx(Textarea, {
+			...textareaAttrs,
+			...props,
+			ref,
+			name,
+			size: fieldProps.size,
+			value: String(field.state.value ?? ""),
+			onChange: (event) => {
+				field.handleChange(event.target.value);
+				onChange?.(event);
+			},
+			onBlur: (event) => {
+				field.handleBlur();
+				onBlur?.(event);
+			}
+		})
+	});
+});
+FormTextarea.displayName = "FormTextarea";
+//#endregion
+export { FormTextarea };
+
+//# sourceMappingURL=FormTextarea.js.map

package/dist/src/FormTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.js","names":[],"sources":["../../src/FormTextarea.tsx"],"sourcesContent":["import { splitFormFieldProps } from \"@pindoba/core-tanstack-form\";\nimport Textarea, { type TextareaProps } from \"@pindoba/react-textarea\";\nimport React, { type JSX } from \"react\";\nimport { FormField } from \"./FormField\";\nimport type {\n  AnyFormApi,\n  FormControlReservedAttribute,\n  FormFieldOwnProps,\n} from \"./types\";\n\n/**\n * Native `<textarea>` attributes (`autoComplete`, `maxLength`, `spellCheck`,\n * `wrap`, `data-*`, …) plus the Textarea's own `rows`/`resize`/`autoResize`.\n * The form owns the value and the Field owns the id/aria wiring.\n */\nexport type FormTextareaAttributes = Omit<\n  TextareaProps,\n  FormControlReservedAttribute | \"ref\"\n>;\n\nexport type FormTextareaProps = FormFieldOwnProps &\n  FormTextareaAttributes & {\n    /** The TanStack form instance returned by `useForm(...)`. */\n    form: AnyFormApi;\n    /**\n     * Field name (a key of the form's data). Also rendered as the native\n     * `name` attribute.\n     */\n    name: string;\n    /**\n     * Ref forwarded to the native `<textarea>` (through the underlying\n     * `<Textarea>`) — the focus target (`ref.current.focus()`).\n     * @group Advanced\n     */\n    ref?: React.Ref<HTMLTextAreaElement>;\n  };\n\n/**\n * FormTextarea — a multi-line `<Textarea>` bound to a TanStack form field.\n * Same wiring as `<FormInput>`: Field chrome, `aria-invalid` /\n * `aria-describedby` / `aria-errormessage`, change + blur handlers. Consumer\n * `onChange`/`onBlur` run after the form's own handlers.\n */\nexport const FormTextarea = React.forwardRef<\n  HTMLTextAreaElement,\n  FormTextareaProps\n>(function FormTextarea({ form, name, ...rest }, ref): JSX.Element {\n  const { fieldProps, controlAttrs } = splitFormFieldProps(rest);\n  const { onChange, onBlur, ...textareaAttrs } = controlAttrs;\n  return (\n    <FormField\n      form={form}\n      name={name}\n      {...fieldProps}\n      control={(props, field) => (\n        <Textarea\n          {...textareaAttrs}\n          {...props}\n          ref={ref}\n          name={name}\n          size={fieldProps.size}\n          value={String(field.state.value ?? \"\")}\n          onChange={(event) => {\n            field.handleChange(event.target.value);\n            onChange?.(event);\n          }}\n          onBlur={(event) => {\n            field.handleBlur();\n            onBlur?.(event);\n          }}\n        />\n      )}\n    />\n  );\n});\n\nFormTextarea.displayName = \"FormTextarea\";\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAa,eAAe,MAAM,WAGhC,SAAS,aAAa,EAAE,MAAM,MAAM,GAAG,QAAQ,KAAkB;CACjE,MAAM,EAAE,YAAY,iBAAiB,oBAAoB,IAAI;CAC7D,MAAM,EAAE,UAAU,QAAQ,GAAG,kBAAkB;CAC/C,OACE,oBAAC,WAAD;EACQ;EACA;EACN,GAAI;EACJ,UAAU,OAAO,UACf,oBAAC,UAAD;GACE,GAAI;GACJ,GAAI;GACC;GACC;GACN,MAAM,WAAW;GACjB,OAAO,OAAO,MAAM,MAAM,SAAS,EAAE;GACrC,WAAW,UAAU;IACnB,MAAM,aAAa,MAAM,OAAO,KAAK;IACrC,WAAW,KAAK;GAClB;GACA,SAAS,UAAU;IACjB,MAAM,WAAW;IACjB,SAAS,KAAK;GAChB;EACD,CAAA;CAEJ,CAAA;AAEL,CAAC;AAED,aAAa,cAAc"}

package/dist/src/field-errors.js

@@ -1,2 +1 @@
-import { getVisibleErrors, normalizeErrors } from "@pindoba/core-tanstack-form";
-export { getVisibleErrors, normalizeErrors };
+export { getVisibleErrors, normalizeErrors } from "@pindoba/core-tanstack-form";

package/dist/src/types.d.ts

@@ -5,15 +5,21 @@ import { FieldPassThrough } from "@pindoba/core-field";
 //#region src/types.d.ts
 /**
  * Field-level presentation props shared by `<FormField>` and every convenience
- * wrapper (`<FormInput>`, `<FormSelect>`, `<FormCheckbox>`). These mirror the
+ * wrapper (`<FormInput>`, `<FormTextarea>`, `<FormSelect>`, `<FormCheckbox>`). These mirror the
  * presentational `<Field>` props; the adapter supplies `error` from TanStack.
  */
-interface FormFieldOwnProps extends Omit<FormFieldBaseProps, "form" | "name" | "labelTooltip" | "passThrough"> {
+export interface FormFieldOwnProps extends Omit<FormFieldBaseProps, "form" | "name" | "labelTooltip" | "passThrough"> {
   /** Tooltip attached to an info trigger next to the label. */
   labelTooltip?: ReactNode;
   /** Per-slot escape hatch for styling and attributes. */
   passThrough?: FieldPassThrough;
 }
+/**
+ * Keys a convenience wrapper never forwards from its native-attribute bucket:
+ * the TanStack binding owns `form`/`name`/value, the Field owns `id` + the
+ * shared `size`/`tone`/`disabled`/`required`/`passThrough` props.
+ */
+export type FormControlReservedAttribute = "form" | "name" | "value" | "defaultValue" | "checked" | "defaultChecked" | "id" | "size" | "tone" | "disabled" | "required" | "passThrough" | "children";
 //#endregion
-export { type AnyFieldApi, type AnyFormApi, type FormFieldErrorMode, FormFieldOwnProps };
+export type { AnyFieldApi, AnyFormApi, FormFieldErrorMode };
 //# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;;;;;;UAciB,0BAA0B,KACzC;;EAIA,eAAe;;EAEf,cAAc"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;;;;;;iBAciB,0BAA0B,KACzC;;EAIA,eAAe;;EAEf,cAAc;;;;;;;YAQJ"}

package/dist/src/useFocusInvalidOnSubmit.d.ts

@@ -21,7 +21,8 @@ import { FocusInvalidOptions } from "@pindoba/core-tanstack-form";
  * markers are in the DOM. TanStack Form does no DOM focus itself, so without
  * this a keyboard user is stranded on the submit button (WCAG 3.3.1).
  */
-declare function useFocusInvalidOnSubmit(form: AnyFormApi, options?: FocusInvalidOptions): React.RefObject<HTMLFormElement | null>;
+export declare function useFocusInvalidOnSubmit(form: AnyFormApi, options?: FocusInvalidOptions): {
+  current: HTMLFormElement | null;
+};
 //#endregion
-export { useFocusInvalidOnSubmit };
 //# sourceMappingURL=useFocusInvalidOnSubmit.d.ts.map

package/dist/src/useFocusInvalidOnSubmit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusInvalidOnSubmit.d.ts","names":[],"sources":["../../src/useFocusInvalidOnSubmit.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBA6BgB,wBACd,MAAM,YACN,UAAU,sBACT,MAAM,UAAU"}
+{"version":3,"file":"useFocusInvalidOnSubmit.d.ts","names":[],"sources":["../../src/useFocusInvalidOnSubmit.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;wBA6BgB,wBACd,MAAM,YACN,UAAU;EACP,SAAS"}

package/dist/src/useFocusInvalidOnSubmit.js

@@ -26,18 +26,20 @@ function useFocusInvalidOnSubmit(form, options) {
 	const formRef = useRef(null);
 	const submissionAttempts = useStore(form.store, (s) => s.submissionAttempts);
 	const isValidating = useStore(form.store, (s) => s.isValidating);
+	const isSubmitting = useStore(form.store, (s) => s.isSubmitting);
 	const isValid = useStore(form.store, (s) => s.isValid);
 	const trackerRef = useRef(null);
 	if (trackerRef.current === null) trackerRef.current = createSubmitFocusTracker(() => focusFirstInvalidControl(formRef.current, options), submissionAttempts);
+	const pipelineBusy = isValidating || isSubmitting;
 	useEffect(() => {
 		trackerRef.current?.({
 			submissionAttempts,
-			isValidating,
+			isValidating: pipelineBusy,
 			isValid
 		});
 	}, [
 		submissionAttempts,
-		isValidating,
+		pipelineBusy,
 		isValid
 	]);
 	return formRef;

package/dist/src/useFocusInvalidOnSubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusInvalidOnSubmit.js","names":[],"sources":["../../src/useFocusInvalidOnSubmit.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useStore } from \"@tanstack/react-form\";\nimport {\n  createSubmitFocusTracker,\n  focusFirstInvalidControl,\n  type FocusInvalidOptions,\n} from \"@pindoba/core-tanstack-form\";\nimport type { AnyFormApi } from \"./types\";\n\n/**\n * Returns a ref to attach to your `<form>` that moves focus to the first\n * invalid control after a failed submit:\n *\n * ```tsx\n * const formRef = useFocusInvalidOnSubmit(form);\n * return (\n *   <form ref={formRef} onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>\n *     …\n *   </form>\n * );\n * ```\n *\n * It reads the form's submit-attempt / validation state, and once an attempt\n * ends invalid (after async validators settle) focuses the first control marked\n * `aria-invalid=\"true\"` inside the form. The state is read via `useStore`, so\n * the focus effect runs after React has committed the error render and the\n * markers are in the DOM. TanStack Form does no DOM focus itself, so without\n * this a keyboard user is stranded on the submit button (WCAG 3.3.1).\n */\nexport function useFocusInvalidOnSubmit(\n  form: AnyFormApi,\n  options?: FocusInvalidOptions,\n): React.RefObject<HTMLFormElement | null> {\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const submissionAttempts = useStore(form.store, (s) => s.submissionAttempts);\n  const isValidating = useStore(form.store, (s) => s.isValidating);\n  const isValid = useStore(form.store, (s) => s.isValid);\n\n  // The tracker is stateful (it remembers the last attempt count), so it must\n  // survive re-renders. Seed it once with the current attempt count so a form\n  // mounted mid-flight doesn't focus spuriously.\n  const trackerRef = useRef<\n    | ((s: {\n        submissionAttempts: number;\n        isValidating: boolean;\n        isValid: boolean;\n      }) => void)\n    | null\n  >(null);\n  if (trackerRef.current === null) {\n    trackerRef.current = createSubmitFocusTracker(\n      () => focusFirstInvalidControl(formRef.current, options),\n      submissionAttempts,\n    );\n  }\n\n  // Runs after commit → aria-invalid markers are in the DOM.\n  useEffect(() => {\n    trackerRef.current?.({ submissionAttempts, isValidating, isValid });\n  }, [submissionAttempts, isValidating, isValid]);\n\n  return formRef;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,wBACd,MACA,SACyC;CACzC,MAAM,UAAU,OAAwB,IAAI;CAE5C,MAAM,qBAAqB,SAAS,KAAK,QAAQ,MAAM,EAAE,kBAAkB;CAC3E,MAAM,eAAe,SAAS,KAAK,QAAQ,MAAM,EAAE,YAAY;CAC/D,MAAM,UAAU,SAAS,KAAK,QAAQ,MAAM,EAAE,OAAO;CAKrD,MAAM,aAAa,OAOjB,IAAI;CACN,IAAI,WAAW,YAAY,MACzB,WAAW,UAAU,+BACb,yBAAyB,QAAQ,SAAS,OAAO,GACvD,kBACF;CAIF,gBAAgB;EACd,WAAW,UAAU;GAAE;GAAoB;GAAc;EAAQ,CAAC;CACpE,GAAG;EAAC;EAAoB;EAAc;CAAO,CAAC;CAE9C,OAAO;AACT"}
+{"version":3,"file":"useFocusInvalidOnSubmit.js","names":[],"sources":["../../src/useFocusInvalidOnSubmit.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useStore } from \"@tanstack/react-form\";\nimport {\n  createSubmitFocusTracker,\n  focusFirstInvalidControl,\n  type FocusInvalidOptions,\n} from \"@pindoba/core-tanstack-form\";\nimport type { AnyFormApi } from \"./types\";\n\n/**\n * Returns a ref to attach to your `<form>` that moves focus to the first\n * invalid control after a failed submit:\n *\n * ```tsx\n * const formRef = useFocusInvalidOnSubmit(form);\n * return (\n *   <form ref={formRef} onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>\n *     …\n *   </form>\n * );\n * ```\n *\n * It reads the form's submit-attempt / validation state, and once an attempt\n * ends invalid (after async validators settle) focuses the first control marked\n * `aria-invalid=\"true\"` inside the form. The state is read via `useStore`, so\n * the focus effect runs after React has committed the error render and the\n * markers are in the DOM. TanStack Form does no DOM focus itself, so without\n * this a keyboard user is stranded on the submit button (WCAG 3.3.1).\n */\nexport function useFocusInvalidOnSubmit(\n  form: AnyFormApi,\n  options?: FocusInvalidOptions,\n): { current: HTMLFormElement | null } {\n  // Returned as a structural `{ current }` box, not `React.RefObject`:\n  // RefObject<T> means `current: T | null` on @types/react@18 but `current: T`\n  // on 19, so no single RefObject spelling is a valid `<form ref>` on both.\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const submissionAttempts = useStore(form.store, (s) => s.submissionAttempts);\n  const isValidating = useStore(form.store, (s) => s.isValidating);\n  // TanStack's `handleSubmit` bumps `submissionAttempts` in a store write of\n  // its own, then flags `isSubmitting`, and only then awaits the validators —\n  // so a pristine form still reads `isValid: true` when the attempt lands.\n  // The whole submit pipeline counts as \"still validating\"; the attempt is\n  // judged once `isSubmitting` drops.\n  const isSubmitting = useStore(form.store, (s) => s.isSubmitting);\n  const isValid = useStore(form.store, (s) => s.isValid);\n\n  // The tracker is stateful (it remembers the last attempt count), so it must\n  // survive re-renders. Seed it once with the current attempt count so a form\n  // mounted mid-flight doesn't focus spuriously.\n  const trackerRef = useRef<\n    | ((s: {\n        submissionAttempts: number;\n        isValidating: boolean;\n        isValid: boolean;\n      }) => void)\n    | null\n  >(null);\n  if (trackerRef.current === null) {\n    trackerRef.current = createSubmitFocusTracker(\n      () => focusFirstInvalidControl(formRef.current, options),\n      submissionAttempts,\n    );\n  }\n\n  // Runs after commit → aria-invalid markers are in the DOM.\n  const pipelineBusy = isValidating || isSubmitting;\n  useEffect(() => {\n    trackerRef.current?.({\n      submissionAttempts,\n      isValidating: pipelineBusy,\n      isValid,\n    });\n  }, [submissionAttempts, pipelineBusy, isValid]);\n\n  return formRef;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,wBACd,MACA,SACqC;CAIrC,MAAM,UAAU,OAA+B,IAAI;CAEnD,MAAM,qBAAqB,SAAS,KAAK,QAAQ,MAAM,EAAE,kBAAkB;CAC3E,MAAM,eAAe,SAAS,KAAK,QAAQ,MAAM,EAAE,YAAY;CAM/D,MAAM,eAAe,SAAS,KAAK,QAAQ,MAAM,EAAE,YAAY;CAC/D,MAAM,UAAU,SAAS,KAAK,QAAQ,MAAM,EAAE,OAAO;CAKrD,MAAM,aAAa,OAOjB,IAAI;CACN,IAAI,WAAW,YAAY,MACzB,WAAW,UAAU,+BACb,yBAAyB,QAAQ,SAAS,OAAO,GACvD,kBACF;CAIF,MAAM,eAAe,gBAAgB;CACrC,gBAAgB;EACd,WAAW,UAAU;GACnB;GACA,cAAc;GACd;EACF,CAAC;CACH,GAAG;EAAC;EAAoB;EAAc;CAAO,CAAC;CAE9C,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pindoba/react-tanstack-form",
-  "version": "0.0.0-alpha-20260907031008",
+  "version": "0.0.0-alpha-20261110151933",
   "homepage": "https://github.com/EduardoLopes/pindoba/tree/main/packages/blocks/react/tanstack-form#README.md",
   "repository": {
     "type": "git",
@@ -10,7 +10,8 @@
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/__test__"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -19,37 +20,34 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./demos": "./src/demos/index.ts",
-    "./demos/basic": "./src/demos/basic.tsx",
-    "./demos/mixed-controls": "./src/demos/mixed-controls.tsx",
-    "./demos/generic-field": "./src/demos/generic-field.tsx"
+    }
   },
   "devDependencies": {
+    "@pindoba/build-config": "0.0.0",
     "@pindoba/typescript-config": "0.0.0-alpha-20260320034942",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tsdown": "^0.22.14",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
     "typescript": "^6.0.3",
-    "zod": "^4.5.1"
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0"
   },
   "dependencies": {
-    "@pindoba/core-field": "0.0.0-alpha-20260829223243",
-    "@pindoba/core-listbox": "0.0.0-alpha-20260829223243",
-    "@pindoba/core-tanstack-form": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-affix": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-button": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-checkbox": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-field": "0.0.0-alpha-20260907031008",
-    "@pindoba/react-input": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-loading": "0.0.0-alpha-20260829223243",
-    "@pindoba/react-select": "0.0.0-alpha-20260829223243",
-    "@pindoba/styled-system": "0.0.0-alpha-20260829223243",
+    "@pindoba/core-field": "0.0.0-alpha-20261110151933",
+    "@pindoba/core-listbox": "0.0.0-alpha-20261110151933",
+    "@pindoba/core-tanstack-form": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-button": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-checkbox": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-field": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-input": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-loading": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-select": "0.0.0-alpha-20261110151933",
+    "@pindoba/react-textarea": "0.0.0-alpha-20261110151933",
+    "@pindoba/styled-system": "0.0.0-alpha-20261110151933",
     "@tanstack/react-form": "^1.33.5"
   },
   "publishConfig": {

package/dist/src/types.js

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