@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/modules/tanstack-form/components/selectable-button-group/TanstackSelectableButtonGroup.d.ts

@@ -0,0 +1,27 @@
+import { SelectableButtonGroupProps } from '../../../../core/components/selectable-button-group/SelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupProps = Omit<SelectableButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableButtonGroup` is a selectable button group wired to the TanStack Form field context.
+ * It is based on the Unity `SelectableButtonGroup` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup selectionMode="single">
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableButtonGroup: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroup };

package/dist/esm/modules/tanstack-form/components/selectable-button-group/TanstackSelectableButtonGroup.js

@@ -0,0 +1,28 @@
+import { SelectableButtonGroup as e } from "../../../../core/components/selectable-button-group/SelectableButtonGroup.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r, useCallback as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-button-group/TanstackSelectableButtonGroup.tsx
+var o = r(({ onChange: r, ...o }, s) => {
+	let c = t(), l = n(), u = c.state.meta.isTouched && !c.state.meta.isValid, d = i((e) => {
+		let t = e.relatedTarget, n = e.currentTarget;
+		(!t || !n.contains(t)) && c.handleBlur();
+	}, [c]);
+	return /* @__PURE__ */ a(e, {
+		...o,
+		ref: s,
+		value: c.state.value,
+		onChange: (e) => {
+			c.handleChange(e), r?.(e);
+		},
+		onBlur: d,
+		isInvalid: u,
+		"aria-labelledby": l.labelId,
+		"aria-describedby": [l.helperTextId, l.feedbackTextId].filter(Boolean).join(" ") || void 0,
+		"aria-details": l.contextualLinkId
+	});
+});
+o.displayName = "TanstackSelectableButtonGroup";
+//#endregion
+export { o as TanstackSelectableButtonGroup };

package/dist/esm/modules/tanstack-form/components/selectable-button-group-field/TanstackSelectableButtonGroupField.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../../../../core/components/label/Label.js';
+import { TanstackSelectableButtonGroupProps } from '../selectable-button-group/TanstackSelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupFieldProps = TanstackSelectableButtonGroupProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+};
+/**
+ * The `TanstackSelectableButtonGroupField` component renders a full field (label, selectable button group)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackSelectableButtonGroup` with its children.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `selectionMode?: "single" | "multiple"` — determines how many options can be selected.
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackSelectableButtonGroup`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@payfit/unity-components"
+ * import { SelectableButton } from "@payfit/unity-components"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     choice: z.array(z.string()).min(1, { message: 'Select at least one option' })
+ *  })
+ *
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup
+ *             label="Choose your preferences"
+ *             helperText="Select one or more options"
+ *             selectionMode="multiple"
+ *           >
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `SelectableButtonGroupField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack form context.
+ */
+declare const TanstackSelectableButtonGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroupField };

package/dist/esm/modules/tanstack-form/components/selectable-button-group-field/TanstackSelectableButtonGroupField.js

@@ -0,0 +1,30 @@
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackSelectableButtonGroup as i } from "../selectable-button-group/TanstackSelectableButtonGroup.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-button-group-field/TanstackSelectableButtonGroupField.tsx
+function c({ label: a, helperText: c, contextualLink: l, isRequired: u, requiredVariant: d, isDisabled: f, children: p, ...m }, h) {
+	return /* @__PURE__ */ s(t, { children: [
+		/* @__PURE__ */ o(r, {
+			requiredVariant: d,
+			isRequired: u,
+			children: a
+		}),
+		c && /* @__PURE__ */ o(n, { children: c }),
+		/* @__PURE__ */ o(i, {
+			ref: h,
+			isDisabled: f,
+			...m,
+			children: p
+		}),
+		/* @__PURE__ */ o(e, {}),
+		l
+	] });
+}
+var l = a(c);
+l.displayName = "TanstackSelectableButtonGroupField";
+//#endregion
+export { l as TanstackSelectableButtonGroupField };

package/dist/esm/modules/tanstack-form/components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.d.ts

@@ -0,0 +1,26 @@
+import { SelectableCardCheckboxGroupProps } from '../../../../../core/components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js';
+export type TanstackSelectableCardCheckboxGroupProps = Omit<SelectableCardCheckboxGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableCardCheckboxGroup` is a controlled checkbox group wired to the TanStack Form field context. It is based on the Unity `SelectableCardCheckboxGroup` component.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm({ validators: {} })
+ *   return (
+ *     <form.Form>
+ *       <form.AppField name="options">
+ *         {(field) => (
+ *           <field.SelectableCardCheckboxGroup>
+ *             <SelectableCardCheckbox value="option1" title="Option 1" />
+ *             <SelectableCardCheckbox value="option2" title="Option 2" />
+ *           </field.SelectableCardCheckboxGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableCardCheckboxGroup: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardCheckboxGroup };

package/dist/esm/modules/tanstack-form/components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js

@@ -0,0 +1,29 @@
+import { SelectableCardCheckboxGroup as e } from "../../../../../core/components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
+import { useFieldContext as t } from "../../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.tsx
+var a = r(({ onBlur: r, onChange: a, children: o, ...s }, c) => {
+	let l = t(), u = n(), d = l.state.meta.isTouched && !l.state.meta.isValid, f = [u.helperTextId, u.feedbackTextId].filter(Boolean).join(" "), p = Array.isArray(l.state.value) ? l.state.value : [];
+	return /* @__PURE__ */ i(e, {
+		...s,
+		ref: c,
+		id: u.inputId,
+		value: p,
+		onChange: (e) => {
+			l.handleChange(e), a?.(e);
+		},
+		onBlur: (e) => {
+			l.handleBlur(), r?.(e);
+		},
+		isInvalid: d,
+		"aria-labelledby": u.labelId,
+		"aria-describedby": f.length > 0 ? f : void 0,
+		"aria-details": u.contextualLinkId,
+		children: o
+	});
+});
+a.displayName = "TanstackSelectableCardCheckboxGroup";
+//#endregion
+export { a as TanstackSelectableCardCheckboxGroup };

package/dist/esm/modules/tanstack-form/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.d.ts

@@ -0,0 +1,28 @@
+import { SelectableCardRadioGroupProps } from '../../../../../core/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js';
+export type TanstackSelectableCardRadioGroupProps = Omit<SelectableCardRadioGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableCardRadioGroup` is a controlled radio group wired to the TanStack Form field context. It is based on the Unity `SelectableCardRadioGroup` component.
+ *
+ * The TanstackSelectableCardRadioGroup component adapts to smaller screen sizes, with cards stacking vertically to maintain usability on mobile devices.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm({ validators: {} })
+ *   return (
+ *     <form.Form>
+ *       <form.AppField name="option">
+ *         {(field) => (
+ *           <field.SelectableCardRadioGroup>
+ *             <SelectableCardRadio value="option1" title="Option 1" />
+ *             <SelectableCardRadio value="option2" title="Option 2" />
+ *           </field.SelectableCardRadioGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableCardRadioGroup: import('react').ForwardRefExoticComponent<TanstackSelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardRadioGroup };

package/dist/esm/modules/tanstack-form/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js

@@ -0,0 +1,29 @@
+import { SelectableCardRadioGroup as e } from "../../../../../core/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
+import { useFieldContext as t } from "../../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.tsx
+var a = r(({ onBlur: r, onChange: a, children: o, ...s }, c) => {
+	let l = t(), u = n(), d = l.state.meta.isTouched && !l.state.meta.isValid, f = [u.helperTextId, u.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...s,
+		ref: c,
+		id: u.inputId,
+		value: l.state.value || void 0,
+		onChange: (e) => {
+			l.handleChange(e), a?.(e);
+		},
+		onBlur: (e) => {
+			l.handleBlur(), r?.(e);
+		},
+		isInvalid: d,
+		"aria-labelledby": u.labelId,
+		"aria-describedby": f.length > 0 ? f : void 0,
+		"aria-details": u.contextualLinkId,
+		children: o
+	});
+});
+a.displayName = "TanstackSelectableCardRadioGroup";
+//#endregion
+export { a as TanstackSelectableCardRadioGroup };

package/dist/esm/modules/tanstack-form/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { LabelProps } from '../../../../core/components/label/Label.js';
+export interface TanstackSelectableCardCheckboxGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+}
+declare const TanstackSelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardCheckboxGroupField };

package/dist/esm/modules/tanstack-form/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js

@@ -0,0 +1,30 @@
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackSelectableCardCheckboxGroup as i } from "../selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.tsx
+function c({ children: a, isRequired: c, requiredVariant: l, label: u, helperText: d, ...f }, p) {
+	return /* @__PURE__ */ s(t, { children: [
+		/* @__PURE__ */ s("div", {
+			className: "uy:flex uy:flex-col uy:gap-50",
+			children: [/* @__PURE__ */ o(r, {
+				requiredVariant: l,
+				isRequired: c,
+				children: u
+			}), d && /* @__PURE__ */ o(n, { children: d })]
+		}),
+		/* @__PURE__ */ o(i, {
+			ref: p,
+			...f,
+			children: a
+		}),
+		/* @__PURE__ */ o(e, {})
+	] });
+}
+var l = a(c);
+l.displayName = "TanstackSelectableCardCheckboxGroupField";
+//#endregion
+export { l as TanstackSelectableCardCheckboxGroupField };

package/dist/esm/modules/tanstack-form/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { LabelProps } from '../../../../core/components/label/Label.js';
+export interface TanstackSelectableCardRadioGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+}
+declare const TanstackSelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardRadioGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardRadioGroupField };

package/dist/esm/modules/tanstack-form/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js

@@ -0,0 +1,30 @@
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackSelectableCardRadioGroup as i } from "../selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.tsx
+function c({ children: a, isRequired: c, requiredVariant: l, label: u, helperText: d, ...f }, p) {
+	return /* @__PURE__ */ s(t, { children: [
+		/* @__PURE__ */ s("div", {
+			className: "uy:flex uy:flex-col uy:gap-50",
+			children: [/* @__PURE__ */ o(r, {
+				requiredVariant: l,
+				isRequired: c,
+				children: u
+			}), d && /* @__PURE__ */ o(n, { children: d })]
+		}),
+		/* @__PURE__ */ o(i, {
+			ref: p,
+			...f,
+			children: a
+		}),
+		/* @__PURE__ */ o(e, {})
+	] });
+}
+var l = a(c);
+l.displayName = "TanstackSelectableCardRadioGroupField";
+//#endregion
+export { l as TanstackSelectableCardRadioGroupField };

package/dist/esm/modules/tanstack-form/components/text-area/TanstackTextArea.d.ts

@@ -0,0 +1,21 @@
+import { TextAreaProps } from '../../../../core/components/text-area/TextArea.js';
+export type TanstackTextAreaProps = Omit<TextAreaProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackTextArea` is a controlled textarea wired to the TanStack Form field context.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ bio: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="bio">
+ *         {() => <TanstackTextArea placeholder="Short bio" rows={4} />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackTextArea: import('react').ForwardRefExoticComponent<TanstackTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TanstackTextArea };

package/dist/esm/modules/tanstack-form/components/text-area/TanstackTextArea.js

@@ -0,0 +1,30 @@
+import { TextArea as e } from "../../../../core/components/text-area/TextArea.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/text-area/TanstackTextArea.tsx
+var a = r(({ onChange: r, onBlur: a, isReadOnly: o, isDisabled: s, ...c }, l) => {
+	let u = t(), d = n(), f = u.state.meta.isTouched && !u.state.meta.isValid, p = [d.helperTextId, d.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...c,
+		ref: l,
+		id: d.inputId,
+		value: u.state.value,
+		onChange: (e) => {
+			u.handleChange(e.target.value), r?.(e);
+		},
+		onBlur: (e) => {
+			u.handleBlur(), a?.(e);
+		},
+		isReadOnly: o,
+		isDisabled: s,
+		isInvalid: f,
+		"aria-labelledby": d.labelId,
+		"aria-describedby": p.length > 0 ? p : void 0,
+		"aria-details": d.contextualLinkId
+	});
+});
+a.displayName = "TanstackTextArea";
+//#endregion
+export { a as TanstackTextArea };

package/dist/esm/modules/tanstack-form/components/text-field/TanstackTextField.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { TanstackInputProps } from '../input/TanstackInput.js';
+import { LabelProps } from '../../../../core/components/label/Label.js';
+import { TanstackTextAreaProps } from '../text-area/TanstackTextArea.js';
+interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The label for the text field. */
+    label: string;
+    /** If true, the text field will be a multi-line text area. */
+    multiline?: boolean;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+interface TextFieldWithInputProps extends FieldProps, TanstackInputProps {
+    multiline?: false;
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+}
+interface TextFieldWithTextAreaProps extends FieldProps, TanstackTextAreaProps {
+    multiline?: true;
+    type?: never;
+}
+export type TextFieldProps = TextFieldWithInputProps | TextFieldWithTextAreaProps;
+/**
+ * The `TanstackTextField` component renders a full field (label, input or textarea)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Single-line: renders `TanstackInput`.
+ * - Multi-line: renders `TanstackTextArea`.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `multiline?: boolean` — when true, renders a textarea; otherwise, an input.
+ * - `defaultValue?` — initial value passed to the native control (the field remains
+ *   controlled by the form context afterwards).
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackInput` or `TanstackTextArea` depending on `multiline`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackTextField } from "@/components/text-field/TanstackTextField"
+ * import { useTanstackUnityForm } from "../../hooks/use-tanstack-form.js"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     name: z.string(),
+ *     email: z.string().email()
+ *  })
+ *
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="name">
+ *         {() => (
+ *           <TanstackTextField label="Name" helperText="Your full name" />
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `TextField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack form context.
+ */
+declare const TanstackTextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export { TanstackTextField };

package/dist/esm/modules/tanstack-form/components/text-field/TanstackTextField.js

@@ -0,0 +1,40 @@
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackInput as i } from "../input/TanstackInput.js";
+import { TanstackTextArea as a } from "../text-area/TanstackTextArea.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/text-field/TanstackTextField.tsx
+function l({ label: o, helperText: l, contextualLink: u, multiline: d, isRequired: f, isLoading: p, isDisabled: m, isReadOnly: h, requiredVariant: g, ..._ }, v) {
+	let y = {
+		isLoading: p,
+		isDisabled: m,
+		isReadOnly: h
+	}, { onClearButtonPress: b } = d ? {} : _;
+	return /* @__PURE__ */ c(t, { children: [
+		/* @__PURE__ */ s(r, {
+			requiredVariant: g,
+			isRequired: f,
+			children: o
+		}),
+		l && /* @__PURE__ */ s(n, { children: l }),
+		d ? /* @__PURE__ */ s(a, {
+			ref: v,
+			...y,
+			..._
+		}) : /* @__PURE__ */ s(i, {
+			ref: v,
+			onClearButtonPress: b,
+			...y,
+			..._
+		}),
+		/* @__PURE__ */ s(e, {}),
+		u
+	] });
+}
+var u = o(l);
+u.displayName = "TanstackTextField";
+//#endregion
+export { u as TanstackTextField };

package/dist/esm/modules/tanstack-form/components/toggle-switch/TanstackToggleSwitch.d.ts

@@ -0,0 +1,46 @@
+import { ToggleSwitch } from '../../../../core/components/toggle-switch/ToggleSwitch.js';
+type BaseToggleSwitchProps = React.ComponentProps<typeof ToggleSwitch>;
+export type TanstackToggleSwitchProps = Omit<BaseToggleSwitchProps, 'isSelected' | 'defaultSelected'>;
+/**
+ * TanStack‑controlled toggle switch.
+ *
+ * `TanstackToggleSwitch` is the Unity `ToggleSwitch` wired to the TanStack Form
+ * field context. Its selected state (`isSelected`) is fully controlled by the
+ * form and updates through `field.handleChange` on user interaction.
+ *
+ * Accessibility:
+ * - Automatically links to the enclosing `TanstackFormField` feedback text via
+ *   `aria-describedby`.
+ * - Use a plain string `label` (or `isLabelSrOnly` for visually hidden labels)
+ *   to keep the control accessible.
+ *
+ * Usage:
+ * - Must be rendered inside `<form.AppField name="…">` from
+ *   `useTanstackUnityForm`.
+ * - Do not pass `isSelected`/`defaultSelected`; use form default values instead.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '../../hooks/use-tanstack-form.js'
+ * import { TanstackToggleSwitch } from '@/components/toggle-switch/TanstackToggleSwitch'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({ newsletter: z.boolean().optional() })
+ *
+ * export function Example() {
+ *   const form = useTanstackUnityForm({ validators: { onBlur: schema } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="newsletter">
+ *           {() => (
+ *             <TanstackToggleSwitch label="Subscribe to newsletter" />
+ *           )}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackToggleSwitch: import('react').ForwardRefExoticComponent<Omit<TanstackToggleSwitchProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackToggleSwitch };

package/dist/esm/modules/tanstack-form/components/toggle-switch/TanstackToggleSwitch.js

@@ -0,0 +1,22 @@
+import { ToggleSwitch as e } from "../../../../core/components/toggle-switch/ToggleSwitch.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/toggle-switch/TanstackToggleSwitch.tsx
+var a = r(({ onChange: r, isDisabled: a, ...o }, s) => {
+	let c = t(), l = [n().feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...o,
+		ref: s,
+		isDisabled: a,
+		isSelected: c.state.value,
+		onChange: (e) => {
+			c.handleChange(e), r?.(e);
+		},
+		"aria-describedby": l.length > 0 ? l : void 0
+	});
+});
+a.displayName = "TanstackToggleSwitch";
+//#endregion
+export { a as TanstackToggleSwitch };

package/dist/esm/modules/tanstack-form/components/toggle-switch-field/TanstackToggleSwitchField.js

@@ -0,0 +1,20 @@
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackToggleSwitch as n } from "../toggle-switch/TanstackToggleSwitch.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/modules/tanstack-form/components/toggle-switch-field/TanstackToggleSwitchField.tsx
+function o({ label: r, switchHelperText: o, isDisabled: s, isReadOnly: c, isLabelSrOnly: l }, u) {
+	return /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(n, {
+		ref: u,
+		label: r,
+		helperText: o,
+		isLabelSrOnly: l,
+		isDisabled: s,
+		isReadOnly: c
+	}), /* @__PURE__ */ i(e, {})] });
+}
+var s = r(o);
+s.displayName = "TanstackToggleSwitchField";
+//#endregion
+export { s as TanstackToggleSwitchField };