@pindoba/react-tanstack-form 0.0.0-alpha-20260619021129 → 0.0.0-alpha-20260906200353

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import { FormInput, FormInputProps } from "./src/FormInput.js";
 import { FormSelect, FormSelectProps } from "./src/FormSelect.js";
 import { FormCheckbox, 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";
-export { type AnyFieldApi, type AnyFormApi, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldErrorMode, type FormFieldOwnProps, type FormFieldProps, FormInput, type FormInputProps, FormSelect, type FormSelectProps, FormSubmit, type FormSubmitProps, getVisibleErrors, normalizeErrors, useForm, useStore };
+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 };

package/dist/index.js

@@ -4,5 +4,6 @@ import { FormInput } from "./src/FormInput.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, useForm, useStore };
+export { FormCheckbox, FormField, FormInput, FormSelect, FormSubmit, getVisibleErrors, normalizeErrors, useFocusInvalidOnSubmit, useForm, useStore };

package/dist/src/FormCheckbox.d.ts

@@ -1,22 +1,19 @@
 import { AnyFormApi, FormFieldOwnProps } from "./types.js";
-import { FieldSize } from "@pindoba/core-field";
 import { JSX, ReactNode } from "react";
-
+import { FieldSize } from "@pindoba/core-field";
 //#region src/FormCheckbox.d.ts
 type FormCheckboxProps = Omit<FormFieldOwnProps, "size"> & {
-  /** The TanStack form instance returned by `useForm(...)`. */form: AnyFormApi; /** Field name (a boolean key of the form's data). */
-  name: string; /** Inline text/content rendered beside the checkbox. */
-  children?: ReactNode; /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
+  /** Field name (a boolean key of the form's data). */
+  name: string;
+  /** Inline text/content rendered beside the checkbox. */
+  children?: ReactNode;
+  /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */
   size?: Exclude<FieldSize, "xs">;
 };
 /** FormCheckbox — a `<Checkbox>` bound to a boolean TanStack form field. */
-declare function FormCheckbox({
-  form,
-  name,
-  children,
-  size,
-  ...fieldProps
-}: FormCheckboxProps): JSX.Element;
+declare function FormCheckbox({ form, name, children, size, ...fieldProps }: FormCheckboxProps): JSX.Element;
 declare namespace FormCheckbox {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.d.ts","names":[],"sources":["../../src/FormCheckbox.tsx"],"mappings":";;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,iBAAA;+DAEnC,IAAA,EAAM,UAAA,EAFqB;EAI3B,IAAA,UAJmC;EAMnC,QAAA,GAAW,SAAA,EAJL;EAMN,IAAA,GAAO,OAAA,CAAQ,SAAA;AAAA;;iBAID,YAAA;EACd,IAAA;EACA,IAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAoB,GAAA,CAAI,OAAA;AAAA,kBANX,YAAA;EAAA,IAAY,WAAA;AAAA"}
+{"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"}

package/dist/src/FormField.d.ts

@@ -1,10 +1,11 @@
 import { AnyFieldApi, AnyFormApi, FormFieldOwnProps } from "./types.js";
-import { FieldControlProps } from "@pindoba/core-field";
 import { JSX, ReactNode } from "react";
-
+import { FieldControlProps } from "@pindoba/core-field";
 //#region src/FormField.d.ts
 type FormFieldProps = FormFieldOwnProps & {
-  /** The TanStack form instance returned by `useForm(...)`. */form: AnyFormApi; /** Field name (a key of the form's data). */
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
+  /** Field name (a key of the form's data). */
   name: string;
   /**
    * Render-prop for the control. Receives the props bag to spread onto the
@@ -19,13 +20,7 @@ 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 function FormField({ form, name, control, errorMode, ...fieldProps }: FormFieldProps): JSX.Element;
 declare namespace FormField {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","names":[],"sources":["../../src/FormField.tsx"],"mappings":";;;;;KAOY,cAAA,GAAiB,iBAAA;+DAE3B,IAAA,EAAM,UAAA,EAFkB;EAIxB,IAAA;EAJ2B;;;;EAS3B,OAAA,GAAU,YAAA,EAAc,iBAAA,EAAmB,KAAA,EAAO,WAAA,KAAgB,SAAA;AAAA;;;;;;;;iBAUpD,SAAA;EACd,IAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,GAAiB,GAAA,CAAI,OAAA;AAAA,kBANR,SAAA;EAAA,IAAS,WAAA;AAAA"}
+{"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"}

package/dist/src/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["TanStackField","Field"],"sources":["../../src/FormField.tsx"],"sourcesContent":["import type { FieldControlProps } from \"@pindoba/core-field\";\nimport Field from \"@pindoba/react-field\";\nimport { Field as TanStackField } from \"@tanstack/react-form\";\nimport type { JSX, ReactNode } from \"react\";\nimport { getVisibleErrors } from \"./field-errors\";\nimport type { AnyFieldApi, AnyFormApi, FormFieldOwnProps } from \"./types\";\n\nexport type FormFieldProps = 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  /**\n   * Render-prop for the control. Receives the props bag to spread onto the\n   * control plus the raw TanStack field API for value/handler binding.\n   */\n  control: (controlProps: FieldControlProps, field: AnyFieldApi) => ReactNode;\n};\n\n/**\n * FormField. Binds a TanStack React Form field to the presentational `<Field>`\n * wrapper. Errors are surfaced through the shared `getVisibleErrors` helper\n * (same visibility logic as the Svelte/Astro blocks); the consumer supplies the\n * control via the `control` render-prop, which receives the Field's `controlProps`\n * bag plus the raw `field` API.\n */\nexport function FormField({\n  form,\n  name,\n  control,\n  errorMode = \"touched\",\n  ...fieldProps\n}: FormFieldProps): JSX.Element {\n  return (\n    <TanStackField form={form} name={name}>\n      {(field) => (\n        <Field\n          {...fieldProps}\n          error={getVisibleErrors(field, errorMode)}\n          control={(controlProps) => control(controlProps, field)}\n        />\n      )}\n    </TanStackField>\n  );\n}\n\nFormField.displayName = \"FormField\";\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,UAAU,EACxB,MACA,MACA,SACA,YAAY,WACZ,GAAG,cAC2B;CAC9B,OACE,oBAACA,OAAD;EAAqB;EAAY;aAC7B,UACA,oBAACC,SAAD;GACE,GAAI;GACJ,OAAO,iBAAiB,OAAO,SAAS;GACxC,UAAU,iBAAiB,QAAQ,cAAc,KAAK;EACvD,CAAA;CAEU,CAAA;AAEnB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormField.js","names":["TanStackField","Field"],"sources":["../../src/FormField.tsx"],"sourcesContent":["import type { FieldControlProps } from \"@pindoba/core-field\";\nimport Field from \"@pindoba/react-field\";\nimport { Field as TanStackField } from \"@tanstack/react-form\";\nimport type { JSX, ReactNode } from \"react\";\nimport { getVisibleErrors } from \"./field-errors\";\nimport type { AnyFieldApi, AnyFormApi, FormFieldOwnProps } from \"./types\";\n\nexport type FormFieldProps = 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  /**\n   * Render-prop for the control. Receives the props bag to spread onto the\n   * control plus the raw TanStack field API for value/handler binding.\n   */\n  control: (controlProps: FieldControlProps, field: AnyFieldApi) => ReactNode;\n};\n\n/**\n * FormField. Binds a TanStack React Form field to the presentational `<Field>`\n * wrapper. Errors are surfaced through the shared `getVisibleErrors` helper\n * (same visibility logic as the Svelte/Astro blocks); the consumer supplies the\n * control via the `control` render-prop, which receives the Field's `controlProps`\n * bag plus the raw `field` API.\n */\nexport function FormField({\n  form,\n  name,\n  control,\n  errorMode = \"touched\",\n  ...fieldProps\n}: FormFieldProps): JSX.Element {\n  return (\n    <TanStackField form={form} name={name}>\n      {(field) => (\n        <Field\n          {...fieldProps}\n          error={getVisibleErrors(field, errorMode)}\n          control={(controlProps) => control(controlProps, field)}\n        />\n      )}\n    </TanStackField>\n  );\n}\n\nFormField.displayName = \"FormField\";\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,UAAU,EACxB,MACA,MACA,SACA,YAAY,WACZ,GAAG,cAC2B;CAC9B,OACE,oBAACA,OAAD;EAAqB;EAAY;EAC7B,WAAA,UACA,oBAACC,SAAD;GACE,GAAI;GACJ,OAAO,iBAAiB,OAAO,SAAS;GACxC,UAAU,iBAAiB,QAAQ,cAAc,KAAK;EACvD,CAAA;CAEU,CAAA;AAEnB;AAEA,UAAU,cAAc"}

package/dist/src/FormInput.d.ts

@@ -1,23 +1,19 @@
 import { AnyFormApi, FormFieldOwnProps } from "./types.js";
 import { InputProps } from "@pindoba/react-input";
 import { JSX } from "react";
-
 //#region src/FormInput.d.ts
 type FormInputProps = FormFieldOwnProps & {
-  /** The TanStack form instance returned by `useForm(...)`. */form: AnyFormApi; /** Field name (a key of the form's data). */
-  name: string; /** HTML input type forwarded to the underlying `<Input>`. */
-  type?: InputProps["type"]; /** Placeholder forwarded to the underlying `<Input>`. */
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
+  /** Field name (a key of the form's data). */
+  name: string;
+  /** HTML input type forwarded to the underlying `<Input>`. */
+  type?: InputProps["type"];
+  /** Placeholder forwarded to the underlying `<Input>`. */
   placeholder?: string;
 };
 /** FormInput — a text `<Input>` bound to a TanStack form field. */
-declare function FormInput({
-  form,
-  name,
-  type,
-  placeholder,
-  size,
-  ...fieldProps
-}: FormInputProps): JSX.Element;
+declare function FormInput({ form, name, type, placeholder, size, ...fieldProps }: FormInputProps): JSX.Element;
 declare namespace FormInput {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.d.ts","names":[],"sources":["../../src/FormInput.tsx"],"mappings":";;;;;KAKY,cAAA,GAAiB,iBAAA;+DAE3B,IAAA,EAAM,UAAA,EAFkB;EAIxB,IAAA,UAJ2B;EAM3B,IAAA,GAAO,UAAA,UAAA;EAEP,WAAA;AAAA;;iBAIc,SAAA;EACd,IAAA;EACA,IAAA;EACA,IAAA;EACA,WAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,cAAA,GAAiB,GAAA,CAAI,OAAA;AAAA,kBAPR,SAAA;EAAA,IAAS,WAAA;AAAA"}
+{"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"}

package/dist/src/FormSelect.d.ts

@@ -1,25 +1,22 @@
 import { AnyFormApi, FormFieldOwnProps } from "./types.js";
-import { FieldSize } from "@pindoba/core-field";
 import { JSX } from "react";
+import { FieldSize } from "@pindoba/core-field";
 import { ListBoxNodeInput } from "@pindoba/core-listbox";
-
 //#region src/FormSelect.d.ts
 type FormSelectProps = Omit<FormFieldOwnProps, "size"> & {
-  /** The TanStack form instance returned by `useForm(...)`. */form: AnyFormApi; /** Field name (a key of the form's data holding the selected option key). */
-  name: string; /** Options to choose from. */
-  items: ListBoxNodeInput[]; /** Placeholder shown when nothing is selected. */
-  placeholder?: string; /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
+  /** Field name (a key of the form's data holding the selected option key). */
+  name: string;
+  /** Options to choose from. */
+  items: ListBoxNodeInput[];
+  /** Placeholder shown when nothing is selected. */
+  placeholder?: string;
+  /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */
   size?: Exclude<FieldSize, "xs">;
 };
 /** FormSelect — a single-select `<Select>` bound to a TanStack form field. */
-declare function FormSelect({
-  form,
-  name,
-  items,
-  placeholder,
-  size,
-  ...fieldProps
-}: FormSelectProps): JSX.Element;
+declare function FormSelect({ form, name, items, placeholder, size, ...fieldProps }: FormSelectProps): JSX.Element;
 declare namespace FormSelect {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.d.ts","names":[],"sources":["../../src/FormSelect.tsx"],"mappings":";;;;;;KAOY,eAAA,GAAkB,IAAA,CAAK,iBAAA;+DAEjC,IAAA,EAAM,UAAA,EAFmB;EAIzB,IAAA,UAJiC;EAMjC,KAAA,EAAO,gBAAA,IAJD;EAMN,WAAA,WAEe;EAAf,IAAA,GAAO,OAAA,CAAQ,SAAA;AAAA;;iBAID,UAAA;EACd,IAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAkB,GAAA,CAAI,OAAA;AAAA,kBAPT,UAAA;EAAA,IAAU,WAAA;AAAA"}
+{"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"}

package/dist/src/FormSubmit.d.ts

@@ -1,19 +1,22 @@
 import { AnyFormApi } from "./types.js";
 import { ButtonProps } from "@pindoba/react-button";
 import { JSX, ReactNode } from "react";
-
 //#region src/FormSubmit.d.ts
 type FormSubmitProps = {
-  /** The TanStack form instance returned by `useForm(...)`. */form: AnyFormApi;
+  /** The TanStack form instance returned by `useForm(...)`. */
+  form: AnyFormApi;
   /**
    * Also disable while the form is invalid (not just while submitting). Off by
    * default — the button stays clickable so submitting an invalid form surfaces
    * its errors instead of leaving the user stuck on a disabled control.
    * @default false
    */
-  disableWhenInvalid?: boolean; /** Emphasis forwarded to the underlying `<Button>`. */
-  emphasis?: ButtonProps["emphasis"]; /** Size forwarded to the underlying `<Button>`. */
-  size?: ButtonProps["size"]; /** Button label content. Falls back to "Submit". */
+  disableWhenInvalid?: boolean;
+  /** Emphasis forwarded to the underlying `<Button>`. */
+  emphasis?: ButtonProps["emphasis"];
+  /** Size forwarded to the underlying `<Button>`. */
+  size?: ButtonProps["size"];
+  /** Button label content. Falls back to "Submit". */
   children?: ReactNode;
 };
 /**
@@ -21,13 +24,7 @@ type FormSubmitProps = {
  * the `onSubmit` promise is in flight the label is blurred with a corner spinner
  * (`Loading variant="busy"`) and the button is disabled + `aria-busy`.
  */
-declare function FormSubmit({
-  form,
-  disableWhenInvalid,
-  emphasis,
-  size,
-  children
-}: FormSubmitProps): JSX.Element;
+declare function FormSubmit({ form, disableWhenInvalid, emphasis, size, children }: FormSubmitProps): JSX.Element;
 declare namespace FormSubmit {
   var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormSubmit.d.ts","names":[],"sources":["../../src/FormSubmit.tsx"],"mappings":";;;;;KAMY,eAAA;+DAEV,IAAA,EAAM,UAAA;EAFmB;;;;;;EASzB,kBAAA,YAMoB;EAJpB,QAAA,GAAW,WAAA,cATL;EAWN,IAAA,GAAO,WAAA,UAFP;EAIA,QAAA,GAAW,SAAA;AAAA;;;;;AAAS;iBAQN,UAAA;EACd,IAAA;EACA,kBAAA;EACA,QAAA;EACA,IAAA;EACA;AAAA,GACC,eAAA,GAAkB,GAAA,CAAI,OAAA;AAAA,kBANT,UAAA;EAAA,IAAU,WAAA;AAAA"}
+{"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"}

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;YAC7C,oBAAC,QAAD;GACE,MAAK;GACK;GACJ;GACN,UAAU,gBAAiB,sBAAsB,CAAC;GAClD,aAAW,eAAe,SAAS,KAAA;aAElC,YAAY;EACP,CAAA;CACD,CAAA;AAEb;AAEA,WAAW,cAAc"}
+{"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"}

package/dist/src/types.d.ts

@@ -1,35 +1,16 @@
 import { AnyFieldApi, AnyFormApi } from "@tanstack/react-form";
-import { FormFieldErrorMode, FormFieldErrorMode as FormFieldErrorMode$1 } from "@pindoba/core-tanstack-form";
-import { FieldFeedback, FieldOrientation, FieldPassThrough, FieldSize } from "@pindoba/core-field";
+import { FormFieldBaseProps, FormFieldErrorMode } from "@pindoba/core-tanstack-form";
 import { ReactNode } from "react";
-
+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
  * presentational `<Field>` props; the adapter supplies `error` from TanStack.
  */
-interface FormFieldOwnProps {
-  /** Label text shown above (or beside) the control. */
-  label?: string;
-  /** Help text rendered under the control. */
-  description?: string;
-  /** Renders a required `*` after the label. */
-  required?: boolean;
-  /** Optional-hint text after the label when not required. */
-  optionalText?: string;
-  /** Disables the field and forwards `disabled` to the control. */
-  disabled?: boolean;
-  /** Size variant, kept in sync with the control. */
-  size?: FieldSize;
-  /** Label/control layout direction. */
-  orientation?: FieldOrientation;
-  /** Explicit feedback override; defaults to error-derived danger / neutral. */
-  feedback?: FieldFeedback;
+interface FormFieldOwnProps extends Omit<FormFieldBaseProps, "form" | "name" | "labelTooltip" | "passThrough"> {
   /** Tooltip attached to an info trigger next to the label. */
   labelTooltip?: ReactNode;
-  /** When the field's errors become visible. @default "touched" */
-  errorMode?: FormFieldErrorMode$1;
   /** Per-slot escape hatch for styling and attributes. */
   passThrough?: FieldPassThrough;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;;;AAmBA;;;;UAAiB,iBAAA;EAgBJ;EAdX,KAAA;EAkBY;EAhBZ,WAAA;EAkB8B;EAhB9B,QAAA;EAJA;EAMA,YAAA;EAFA;EAIA,QAAA;EAAA;EAEA,IAAA,GAAO,SAAA;EAAA;EAEP,WAAA,GAAc,gBAAA;EAAA;EAEd,QAAA,GAAW,aAAA;EAAA;EAEX,YAAA,GAAe,SAAA;EAAA;EAEf,SAAA,GAAY,oBAAA;EAAA;EAEZ,WAAA,GAAc,gBAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;;;;;;UAciB,0BAA0B,KACzC;;EAIA,eAAe;;EAEf,cAAc"}

package/dist/src/useFocusInvalidOnSubmit.d.ts

@@ -0,0 +1,27 @@
+import { AnyFormApi } from "./types.js";
+import { FocusInvalidOptions } from "@pindoba/core-tanstack-form";
+//#region src/useFocusInvalidOnSubmit.d.ts
+/**
+ * Returns a ref to attach to your `<form>` that moves focus to the first
+ * invalid control after a failed submit:
+ *
+ * ```tsx
+ * const formRef = useFocusInvalidOnSubmit(form);
+ * return (
+ *   <form ref={formRef} onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
+ *     …
+ *   </form>
+ * );
+ * ```
+ *
+ * It reads the form's submit-attempt / validation state, and once an attempt
+ * ends invalid (after async validators settle) focuses the first control marked
+ * `aria-invalid="true"` inside the form. The state is read via `useStore`, so
+ * the focus effect runs after React has committed the error render and the
+ * 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>;
+//#endregion
+export { useFocusInvalidOnSubmit };
+//# sourceMappingURL=useFocusInvalidOnSubmit.d.ts.map

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

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

package/dist/src/useFocusInvalidOnSubmit.js

@@ -0,0 +1,48 @@
+import { useStore } from "@tanstack/react-form";
+import { createSubmitFocusTracker, focusFirstInvalidControl } from "@pindoba/core-tanstack-form";
+import { useEffect, useRef } from "react";
+//#region src/useFocusInvalidOnSubmit.ts
+/**
+* Returns a ref to attach to your `<form>` that moves focus to the first
+* invalid control after a failed submit:
+*
+* ```tsx
+* const formRef = useFocusInvalidOnSubmit(form);
+* return (
+*   <form ref={formRef} onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
+*     …
+*   </form>
+* );
+* ```
+*
+* It reads the form's submit-attempt / validation state, and once an attempt
+* ends invalid (after async validators settle) focuses the first control marked
+* `aria-invalid="true"` inside the form. The state is read via `useStore`, so
+* the focus effect runs after React has committed the error render and the
+* 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).
+*/
+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 isValid = useStore(form.store, (s) => s.isValid);
+	const trackerRef = useRef(null);
+	if (trackerRef.current === null) trackerRef.current = createSubmitFocusTracker(() => focusFirstInvalidControl(formRef.current, options), submissionAttempts);
+	useEffect(() => {
+		trackerRef.current?.({
+			submissionAttempts,
+			isValidating,
+			isValid
+		});
+	}, [
+		submissionAttempts,
+		isValidating,
+		isValid
+	]);
+	return formRef;
+}
+//#endregion
+export { useFocusInvalidOnSubmit };
+
+//# sourceMappingURL=useFocusInvalidOnSubmit.js.map

package/dist/src/useFocusInvalidOnSubmit.js.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pindoba/react-tanstack-form",
-  "version": "0.0.0-alpha-20260619021129",
+  "version": "0.0.0-alpha-20260906200353",
   "homepage": "https://github.com/EduardoLopes/pindoba/tree/main/packages/blocks/react/tanstack-form#README.md",
   "repository": {
     "type": "git",
@@ -26,31 +26,31 @@
     "./demos/generic-field": "./src/demos/generic-field.tsx"
   },
   "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "tsdown": "^0.22.2",
+    "@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",
     "typescript": "^6.0.3",
-    "zod": "^4.4.3",
-    "@repo/typescript-config": "0.0.0-alpha-20260320034942"
+    "zod": "^4.5.1"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0"
   },
   "dependencies": {
-    "@tanstack/react-form": "^1.33.0",
-    "@pindoba/core-field": "0.0.0-alpha-20260619021129",
-    "@pindoba/core-listbox": "0.0.0-alpha-20260619021129",
-    "@pindoba/core-tanstack-form": "0.0.0-alpha-20260617191010",
-    "@pindoba/react-button": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-affix": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-checkbox": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-field": "0.0.0-alpha-20260619021129",
-    "@pindoba/styled-system": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-input": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-loading": "0.0.0-alpha-20260619021129",
-    "@pindoba/react-select": "0.0.0-alpha-20260619021129"
+    "@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-20260906200353",
+    "@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",
+    "@tanstack/react-form": "^1.33.5"
   },
   "publishConfig": {
     "access": "public"