@pindoba/react-tanstack-form 0.0.0-alpha-20260617191010

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { AnyFieldApi, AnyFormApi, 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 { FormSubmit, FormSubmitProps } from "./src/FormSubmit.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 };

package/dist/index.js

@@ -0,0 +1,8 @@
+import { getVisibleErrors, normalizeErrors } from "./src/field-errors.js";
+import { FormField } from "./src/FormField.js";
+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 { useForm, useStore } from "@tanstack/react-form";
+export { FormCheckbox, FormField, FormInput, FormSelect, FormSubmit, getVisibleErrors, normalizeErrors, useForm, useStore };

package/dist/src/FormCheckbox.d.ts

@@ -0,0 +1,25 @@
+import { AnyFormApi, FormFieldOwnProps } from "./types.js";
+import { FieldSize } from "@pindoba/core-field";
+import { JSX, ReactNode } from "react";
+
+//#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`). */
+  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 namespace FormCheckbox {
+  var displayName: string;
+}
+//#endregion
+export { FormCheckbox, FormCheckboxProps };
+//# sourceMappingURL=FormCheckbox.d.ts.map

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

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

package/dist/src/FormCheckbox.js

@@ -0,0 +1,26 @@
+import { FormField } from "./FormField.js";
+import { jsx } from "react/jsx-runtime";
+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 }) {
+	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
+		})
+	});
+}
+FormCheckbox.displayName = "FormCheckbox";
+//#endregion
+export { FormCheckbox };
+
+//# sourceMappingURL=FormCheckbox.js.map

package/dist/src/FormCheckbox.js.map

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

package/dist/src/FormField.d.ts

@@ -0,0 +1,34 @@
+import { AnyFieldApi, AnyFormApi, FormFieldOwnProps } from "./types.js";
+import { FieldControlProps } from "@pindoba/core-field";
+import { JSX, ReactNode } from "react";
+
+//#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). */
+  name: string;
+  /**
+   * Render-prop for the control. Receives the props bag to spread onto the
+   * control plus the raw TanStack field API for value/handler binding.
+   */
+  control: (controlProps: FieldControlProps, field: AnyFieldApi) => ReactNode;
+};
+/**
+ * FormField. Binds a TanStack React Form field to the presentational `<Field>`
+ * wrapper. Errors are surfaced through the shared `getVisibleErrors` helper
+ * (same visibility logic as the Svelte/Astro blocks); the consumer supplies the
+ * 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 {
+  var displayName: string;
+}
+//#endregion
+export { FormField, FormFieldProps };
+//# sourceMappingURL=FormField.d.ts.map

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

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

package/dist/src/FormField.js

@@ -0,0 +1,28 @@
+import { getVisibleErrors } from "./field-errors.js";
+import { Field } from "@tanstack/react-form";
+import Field$1 from "@pindoba/react-field";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormField.tsx
+/**
+* FormField. Binds a TanStack React Form field to the presentational `<Field>`
+* wrapper. Errors are surfaced through the shared `getVisibleErrors` helper
+* (same visibility logic as the Svelte/Astro blocks); the consumer supplies the
+* control via the `control` render-prop, which receives the Field's `controlProps`
+* bag plus the raw `field` API.
+*/
+function FormField({ form, name, control, errorMode = "touched", ...fieldProps }) {
+	return /* @__PURE__ */ jsx(Field, {
+		form,
+		name,
+		children: (field) => /* @__PURE__ */ jsx(Field$1, {
+			...fieldProps,
+			error: getVisibleErrors(field, errorMode),
+			control: (controlProps) => control(controlProps, field)
+		})
+	});
+}
+FormField.displayName = "FormField";
+//#endregion
+export { FormField };
+
+//# sourceMappingURL=FormField.js.map

package/dist/src/FormField.js.map

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

package/dist/src/FormInput.d.ts

@@ -0,0 +1,26 @@
+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>`. */
+  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 namespace FormInput {
+  var displayName: string;
+}
+//#endregion
+export { FormInput, FormInputProps };
+//# sourceMappingURL=FormInput.d.ts.map

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

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

package/dist/src/FormInput.js

@@ -0,0 +1,27 @@
+import { FormField } from "./FormField.js";
+import { jsx } from "react/jsx-runtime";
+import Input from "@pindoba/react-input";
+//#region src/FormInput.tsx
+/** FormInput — a text `<Input>` bound to a TanStack form field. */
+function FormInput({ form, name, type = "text", placeholder, size, ...fieldProps }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		form,
+		name,
+		size,
+		...fieldProps,
+		control: (props, field) => /* @__PURE__ */ jsx(Input, {
+			...props,
+			size,
+			type,
+			placeholder,
+			value: String(field.state.value ?? ""),
+			onChange: (event) => field.handleChange(event.target.value),
+			onBlur: () => field.handleBlur()
+		})
+	});
+}
+FormInput.displayName = "FormInput";
+//#endregion
+export { FormInput };
+
+//# sourceMappingURL=FormInput.js.map

package/dist/src/FormInput.js.map

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

package/dist/src/FormSelect.d.ts

@@ -0,0 +1,28 @@
+import { AnyFormApi, FormFieldOwnProps } from "./types.js";
+import { FieldSize } from "@pindoba/core-field";
+import { JSX } from "react";
+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`). */
+  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 namespace FormSelect {
+  var displayName: string;
+}
+//#endregion
+export { FormSelect, FormSelectProps };
+//# sourceMappingURL=FormSelect.d.ts.map

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

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

package/dist/src/FormSelect.js

@@ -0,0 +1,29 @@
+import { FormField } from "./FormField.js";
+import { jsx } from "react/jsx-runtime";
+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 }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		form,
+		name,
+		size,
+		...fieldProps,
+		control: (props, field) => /* @__PURE__ */ jsx(Select, {
+			...props,
+			size,
+			items,
+			placeholder,
+			value: typeof field.state.value === "string" && field.state.value ? field.state.value : null,
+			onValueChange: (next) => field.handleChange(typeof next === "string" ? next : ""),
+			onOpenChange: (open) => {
+				if (!open) field.handleBlur();
+			}
+		})
+	});
+}
+FormSelect.displayName = "FormSelect";
+//#endregion
+export { FormSelect };
+
+//# sourceMappingURL=FormSelect.js.map

package/dist/src/FormSelect.js.map

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

package/dist/src/FormSubmit.d.ts

@@ -0,0 +1,36 @@
+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;
+  /**
+   * 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". */
+  children?: ReactNode;
+};
+/**
+ * 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`.
+ */
+declare function FormSubmit({
+  form,
+  disableWhenInvalid,
+  emphasis,
+  size,
+  children
+}: FormSubmitProps): JSX.Element;
+declare namespace FormSubmit {
+  var displayName: string;
+}
+//#endregion
+export { FormSubmit, FormSubmitProps };
+//# sourceMappingURL=FormSubmit.d.ts.map

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

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

package/dist/src/FormSubmit.js

@@ -0,0 +1,34 @@
+import { useStore } from "@tanstack/react-form";
+import { jsx } from "react/jsx-runtime";
+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`.
+*/
+function FormSubmit({ form, disableWhenInvalid = false, emphasis = "primary", size, children }) {
+	const { canSubmit, isSubmitting } = useStore(form.store, (state) => ({
+		canSubmit: state.canSubmit,
+		isSubmitting: state.isSubmitting
+	}));
+	return /* @__PURE__ */ jsx(Loading, {
+		loading: isSubmitting,
+		variant: "busy",
+		indicator: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			emphasis,
+			size,
+			disabled: isSubmitting || disableWhenInvalid && !canSubmit,
+			"aria-busy": isSubmitting ? "true" : void 0,
+			children: children ?? "Submit"
+		})
+	});
+}
+FormSubmit.displayName = "FormSubmit";
+//#endregion
+export { FormSubmit };
+
+//# sourceMappingURL=FormSubmit.js.map

package/dist/src/FormSubmit.js.map

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

package/dist/src/field-errors.d.ts

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

package/dist/src/field-errors.js

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

package/dist/src/types.d.ts

@@ -0,0 +1,38 @@
+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 { ReactNode } from "react";
+
+//#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;
+  /** 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;
+}
+//#endregion
+export { type AnyFieldApi, type AnyFormApi, type FormFieldErrorMode, FormFieldOwnProps };
+//# sourceMappingURL=types.d.ts.map

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

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

package/dist/src/types.js

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

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@pindoba/react-tanstack-form",
+  "version": "0.0.0-alpha-20260617191010",
+  "homepage": "https://github.com/EduardoLopes/pindoba/tree/main/packages/blocks/react/tanstack-form#README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EduardoLopes/pindoba.git",
+    "directory": "packages/blocks/react/tanstack-form"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "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": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsdown": "^0.22.2",
+    "typescript": "^6.0.3",
+    "zod": "^4.4.3",
+    "@repo/typescript-config": "0.0.0-alpha-20260320034942"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0"
+  },
+  "dependencies": {
+    "@tanstack/react-form": "^1.33.0",
+    "@pindoba/core-field": "0.0.0-alpha-20260617191010",
+    "@pindoba/core-tanstack-form": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-affix": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-checkbox": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-field": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-button": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-input": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-loading": "0.0.0-alpha-20260617191010",
+    "@pindoba/react-select": "0.0.0-alpha-20260617191010",
+    "@pindoba/styled-system": "0.0.0-alpha-20260617191010",
+    "@pindoba/core-listbox": "0.0.0-alpha-20260617191010"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check": "tsc --noEmit",
+    "lint": "TIMING=1 eslint . --max-warnings 0",
+    "lint:fix": "TIMING=1 eslint . --fix --max-warnings 0",
+    "link": "pnpm link",
+    "unlink": "pnpm unlink",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "format": "prettier --check . --ignore-path \"$PRETTIER_IGNORE_PATH\"",
+    "format:fix": "prettier --write . --ignore-path \"$PRETTIER_IGNORE_PATH\""
+  }
+}