@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/filter-toolbar/parts/AddFilterItem.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ListBoxItemProps } from 'react-aria-components';
+export declare const addFilterItem: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface AddFilterItemProps extends VariantProps<typeof addFilterItem>, ListBoxItemProps {
+}
+/**
+ * Internal component that renders individual filter options in the add filter menu.
+ * Each item represents a filter that can be added to the toolbar.
+ * @param props - AddFilterItem component props
+ * @param props.id - Unique identifier for the filter item
+ * @param props.children - Label content to display for the filter
+ * @internal
+ */
+declare const AddFilterItem: {
+    ({ id, children, ...rest }: AddFilterItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AddFilterItem };

package/dist/esm/components/filter-toolbar/parts/AddFilterItem.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { uyTv as o } from "@payfit/unity-themes";
+import { ListBoxItem as i } from "react-aria-components";
+const s = o({
+  base: [
+    "uy:flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+    "uy:px-150 uy:py-100",
+    "uy:rounded-50 uy:cursor-pointer",
+    "uy:hover:bg-surface-neutral-hover",
+    "uy:active:bg-surface-neutral-pressed",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+  ]
+}), y = ({ id: e, children: t, ...u }) => /* @__PURE__ */ r(i, { className: s(), id: e, ...u, children: t });
+y.displayName = "AddFilterItem";
+export {
+  y as AddFilterItem,
+  s as addFilterItem
+};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.d.ts

@@ -0,0 +1,93 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { AppliedFilter } from '../FilterToolbar.types.js';
+/**
+ * Adapters for converting FilterToolbar's AppliedFilter format to and from external formats.
+ *
+ * Use these adapters to integrate FilterToolbar with other libraries like Tanstack Table.
+ * Each adapter provides bidirectional conversion methods.
+ * @example
+ * ```tsx
+ * import { FilterAdapters } from '@payfit/unity-components'
+ *
+ * // Convert FilterToolbar filters to Tanstack Table format
+ * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+ *
+ * // Convert Tanstack Table filters back to FilterToolbar format
+ * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(columnFilters)
+ * ```
+ */
+export declare const FilterAdapters: {
+    /**
+     * Adapter for Tanstack Table integration.
+     *
+     * Handles conversion between FilterToolbar's AppliedFilter format and
+     * Tanstack Table's ColumnFiltersState format.
+     * @example
+     * ```tsx
+     * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
+     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+     *
+     * const table = useReactTable({
+     *   state: { columnFilters },
+     *   // ... other config
+     * })
+     *
+     * return (
+     *   <>
+     *     <FilterToolbar
+     *       filterDefs={filterDefs}
+     *       initialValue={appliedFilters}
+     *       onChange={setAppliedFilters}
+     *     />
+     *     <DataTable table={table} />
+     *   </>
+     * )
+     * ```
+     * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
+     */
+    TanstackTable: {
+        /**
+         * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
+         *
+         * This method handles two key transformations:
+         * 1. Filters out empty filters (filters without values) so the table shows all results
+         * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
+         * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
+         * @returns Column filters compatible with Tanstack Table's state.columnFilters
+         * @remarks
+         * - Empty filters (undefined values or empty Sets) are excluded from the result
+         * - This ensures that adding a filter without selecting values doesn't hide all table rows
+         * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
+         * @example
+         * ```tsx
+         * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
+         *   { id: 'status', value: new Set(['active', 'pending']) },
+         *   { id: 'department', value: undefined }, // Will be filtered out
+         * ])
+         * // Result: [{ id: 'status', value: ['active', 'pending'] }]
+         * ```
+         */
+        toColumnFilters(appliedFilters: AppliedFilter[]): ColumnFiltersState;
+        /**
+         * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
+         *
+         * This is useful when you need to initialize FilterToolbar from existing table state,
+         * URL parameters, or server-side filter state.
+         * @param columnFilters - Column filters from Tanstack Table's state
+         * @returns Array of applied filters compatible with FilterToolbar's initialValue
+         * @remarks
+         * - Array values are converted to Sets for compatibility with React Aria's SelectList
+         * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
+         *   to derive table state instead of syncing bidirectionally
+         * @example
+         * ```tsx
+         * // Initialize FilterToolbar from URL params
+         * const urlFilters = parseUrlToColumnFilters(searchParams)
+         * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
+         *
+         * return <FilterToolbar initialValue={appliedFilters} />
+         * ```
+         */
+        fromColumnFilters(columnFilters: ColumnFiltersState): AppliedFilter[];
+    };
+};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.js

@@ -0,0 +1,88 @@
+const u = {
+  /**
+   * Adapter for Tanstack Table integration.
+   *
+   * Handles conversion between FilterToolbar's AppliedFilter format and
+   * Tanstack Table's ColumnFiltersState format.
+   * @example
+   * ```tsx
+   * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
+   * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+   *
+   * const table = useReactTable({
+   *   state: { columnFilters },
+   *   // ... other config
+   * })
+   *
+   * return (
+   *   <>
+   *     <FilterToolbar
+   *       filterDefs={filterDefs}
+   *       initialValue={appliedFilters}
+   *       onChange={setAppliedFilters}
+   *     />
+   *     <DataTable table={table} />
+   *   </>
+   * )
+   * ```
+   * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
+   */
+  TanstackTable: {
+    /**
+     * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
+     *
+     * This method handles two key transformations:
+     * 1. Filters out empty filters (filters without values) so the table shows all results
+     * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
+     * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
+     * @returns Column filters compatible with Tanstack Table's state.columnFilters
+     * @remarks
+     * - Empty filters (undefined values or empty Sets) are excluded from the result
+     * - This ensures that adding a filter without selecting values doesn't hide all table rows
+     * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
+     * @example
+     * ```tsx
+     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
+     *   { id: 'status', value: new Set(['active', 'pending']) },
+     *   { id: 'department', value: undefined }, // Will be filtered out
+     * ])
+     * // Result: [{ id: 'status', value: ['active', 'pending'] }]
+     * ```
+     */
+    toColumnFilters(e) {
+      return e.filter((a) => a.value instanceof Set ? a.value.size > 0 : a.value !== void 0 && a.value !== null).map((a) => ({
+        id: a.id,
+        value: a.value instanceof Set ? Array.from(a.value) : a.value
+      }));
+    },
+    /**
+     * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
+     *
+     * This is useful when you need to initialize FilterToolbar from existing table state,
+     * URL parameters, or server-side filter state.
+     * @param columnFilters - Column filters from Tanstack Table's state
+     * @returns Array of applied filters compatible with FilterToolbar's initialValue
+     * @remarks
+     * - Array values are converted to Sets for compatibility with React Aria's SelectList
+     * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
+     *   to derive table state instead of syncing bidirectionally
+     * @example
+     * ```tsx
+     * // Initialize FilterToolbar from URL params
+     * const urlFilters = parseUrlToColumnFilters(searchParams)
+     * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
+     *
+     * return <FilterToolbar initialValue={appliedFilters} />
+     * ```
+     */
+    fromColumnFilters(e) {
+      return e.map((a) => ({
+        id: a.id,
+        value: Array.isArray(a.value) ? new Set(a.value) : a.value
+      }));
+    }
+  }
+};
+export {
+  u as FilterAdapters
+};

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Normalizes filter values to serializable formats (string or string array).
+ * This ensures filter values can be safely serialized to URLs or JSON.
+ * Handles various JavaScript types including primitives, arrays, Sets, Dates, and objects.
+ * @param value - The filter value to normalize (can be any type)
+ * @returns A string, string array, or undefined
+ * @example
+ * ```ts
+ * // React Aria Selection (Set)
+ * normalizeFilterValue(new Set(['apple', 'banana'])) // ['apple', 'banana']
+ *
+ * // Arrays
+ * normalizeFilterValue(['apple', 'banana', 123]) // ['apple', 'banana', '123']
+ *
+ * // Primitives
+ * normalizeFilterValue(42) // '42'
+ * normalizeFilterValue('hello') // 'hello'
+ *
+ * // Objects
+ * normalizeFilterValue({ key: 'value' }) // '{"key":"value"}'
+ * ```
+ * @internal
+ */
+export declare function normalizeFilterValue(value: unknown): string | string[] | undefined;

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.js

@@ -0,0 +1,19 @@
+function i(r) {
+  if (r != null) {
+    if (Array.isArray(r))
+      return r.map((t) => String(t));
+    if (typeof r == "object" && Symbol.iterator in r)
+      return Array.from(r).map((t) => String(t));
+    if (r instanceof Date)
+      return r.toISOString();
+    if (typeof r == "object")
+      return JSON.stringify(r);
+    if (typeof r == "string")
+      return r;
+    if (typeof r == "number" || typeof r == "boolean")
+      return String(r);
+  }
+}
+export {
+  i as normalizeFilterValue
+};

package/dist/esm/components/form/Form.d.ts

@@ -36,6 +36,8 @@ type FormComponent = {
  * ```bash
  * $ yarn add zod react-hook-form
  * ```
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const Form: FormComponent;
 export { Form };

package/dist/esm/components/form/TanstackForm.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `TanstackForm` is a form wrapper bound to the TanStack form context.
+ * It prevents the default browser submission, delegates to the TanStack form
+ * `handleSubmit`, and then invokes the provided `onSubmit` (if any).
+ *
+ * Behavior:
+ * - `onSubmit` handler: prevents default, calls `form.handleSubmit(event)`, then
+ *   forwards the event to the user-provided `onSubmit`.
+ * - Exposes a standard `<form>` element API via `ComponentProps<'form'>`.
+ *
+ * Usage:
+ * ```tsx
+ * function Example() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <TanstackForm>
+ *       <form.AppField name="name">{() => <TanstackInput />}</form.AppField>
+ *     </TanstackForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackForm: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
+export { TanstackForm };

package/dist/esm/components/form/TanstackForm.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { useFormContext as f } from "../../hooks/tanstack-form-context.js";
+const u = c({
+  base: []
+}), d = p(
+  ({ children: t, onSubmit: r, className: a, ...m }, s) => {
+    const i = f();
+    return /* @__PURE__ */ n(
+      "form",
+      {
+        "data-dd-privacy": "mask",
+        onSubmit: (o) => {
+          o.preventDefault(), o.stopPropagation(), i.handleSubmit(o), r?.(o);
+        },
+        ...m,
+        ref: s,
+        noValidate: !0,
+        className: u({ className: a }),
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "TanstackForm";
+export {
+  d as TanstackForm
+};

package/dist/esm/components/form-field/FormField.d.ts

@@ -54,6 +54,8 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues,
  * }
  * ```
  * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
 export { FormField };

package/dist/esm/components/form-field/TanstackFormField.context.d.ts

@@ -0,0 +1,10 @@
+export type FieldA11yContextValue = {
+    fieldGroupId: string;
+    labelId: string;
+    inputId: string;
+    feedbackTextId: string;
+    helperTextId?: string;
+    contextualLinkId?: string;
+};
+export declare const FieldA11yContext: import('react').Context<FieldA11yContextValue>;
+export declare function useFieldA11yContext(): FieldA11yContextValue;

package/dist/esm/components/form-field/TanstackFormField.context.js

@@ -0,0 +1,14 @@
+import { useContext as e, createContext as t } from "react";
+const o = t({
+  fieldGroupId: "",
+  labelId: "",
+  inputId: "",
+  feedbackTextId: ""
+});
+function d() {
+  return e(o);
+}
+export {
+  o as FieldA11yContext,
+  d as useFieldA11yContext
+};

package/dist/esm/components/form-field/TanstackFormField.d.ts

@@ -0,0 +1,49 @@
+export interface FormFieldProps extends React.PropsWithChildren {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the proper accessibility of the a form field's parts, such as the label and the helper text
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const form = useTanstackUnityForm({
+ *     validators: {
+ *       onBlur: loginSchema,
+ *     },
+ *     defaultValues: {
+ *       email: '',
+ *       password: '',
+ *     },
+ *   })
+ *
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <form.Form>
+ *       <form.FormField>
+ *         <form.FormLabel>Email</form.FormLabel>
+ *         <form.FormHelperText>Enter your primary email address</form.FormHelperText>
+ *         <form.Input type="email"/>
+ *         <form.FormFeedbackText/>
+ *       </form.FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety and proper state management.
+ */
+export declare function TanstackFormField({ children, className }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TanstackFormField {
+    var displayName: string;
+}

package/dist/esm/components/form-field/TanstackFormField.js

@@ -0,0 +1,46 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useId as I, useRef as k, useState as u, useLayoutEffect as _, useMemo as T } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFieldContext as $ } from "../../hooks/tanstack-form-context.js";
+import { FieldA11yContext as b } from "./TanstackFormField.context.js";
+const h = F({
+  base: ["uy:group/field", "uy:flex uy:flex-col uy:gap-100"]
+});
+function v({ children: l, className: c }) {
+  const m = I(), r = k(null), o = $(), n = o.form.formId || m, a = o.name.replace(/[^\w-]/g, "-"), [i, p] = u(!1), [s, x] = u(!1);
+  _(() => {
+    const e = r.current;
+    if (!e) return;
+    const t = e.querySelector(
+      '[data-unity-slot="form-field-helper-text"]'
+    ), y = e.querySelector(
+      '[data-unity-slot="form-field-contextual-link"]'
+    );
+    p(!!t), x(!!y);
+  }, [l]);
+  const d = T(() => {
+    const e = `form-${n}-field-${a}`, t = {
+      fieldGroupId: e,
+      labelId: `${e}__label`,
+      inputId: `${e}__input`,
+      feedbackTextId: `${e}__feedback-text`
+    };
+    return i && (t.helperTextId = `${e}__helper-text`), s && (t.contextualLinkId = `${e}__contextual-link`), t;
+  }, [n, a, i, s]);
+  return /* @__PURE__ */ f(b.Provider, { value: d, children: /* @__PURE__ */ f(
+    "div",
+    {
+      ref: r,
+      id: d.fieldGroupId,
+      role: "group",
+      className: h({ className: c }),
+      "data-unity-slot": "form-field",
+      "data-invalid": !o.state.meta.isValid,
+      children: l
+    }
+  ) });
+}
+v.displayName = "TanstackFormField";
+export {
+  v as TanstackFormField
+};

package/dist/esm/components/form-field/parts/FormControl.d.ts

@@ -22,6 +22,8 @@ export type FormControlProps = React.ComponentProps<typeof Slot>;
  * ```
  * @remarks
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormControl {

package/dist/esm/components/form-field/parts/FormFeedbackText.d.ts

@@ -1,5 +1,7 @@
 /**
  * FormErrorText is a component that displays error text for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormFeedbackText: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode | undefined;

package/dist/esm/components/form-field/parts/FormHelperText.d.ts

@@ -1,5 +1,7 @@
 /**
  * FormHelperText is a component that displays helper text for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormHelperText: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode | undefined;

package/dist/esm/components/form-field/parts/FormLabel.d.ts

@@ -3,6 +3,8 @@ export type FormLabelProps = Omit<LabelProps, 'isRequired'>;
 /**
  * FormLabel is a component that displays a label for a form field.
  * It is used to provide context for the form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
 export { FormLabel };

package/dist/esm/components/form-field/parts/RawFormContextualLink.d.ts

@@ -15,6 +15,8 @@ interface FormContextualLinkActionProps {
 }
 /**
  * FormContextualLink is a component that displays a contextual link for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export { RawFormContextualLink };

package/dist/esm/components/form-field/parts/TanstackFormFeedbackText.d.ts

@@ -0,0 +1,12 @@
+import { TextProps } from '../../text/Text.js';
+export type TanstackFormFeedbackTextProps = Omit<TextProps, 'variant' | 'color' | 'className'>;
+/**
+ * `TanstackFormFeedbackText` renders the first validation message for the
+ * current TanStack form field when the field is invalid
+ *
+ * Behavior:
+ * - Returns `null` when the field is valid or has no errors.
+ * - When invalid, renders the first error message.
+ */
+declare const TanstackFormFeedbackText: import('react').ForwardRefExoticComponent<TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { TanstackFormFeedbackText };

package/dist/esm/components/form-field/parts/TanstackFormFeedbackText.js

@@ -0,0 +1,32 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { useStore as s } from "@tanstack/react-form";
+import { useFieldContext as c } from "../../../hooks/tanstack-form-context.js";
+import { Text as f } from "../../text/Text.js";
+import { useFieldA11yContext as u } from "../TanstackFormField.context.js";
+const x = l((r, t) => {
+  const a = c(), i = u(), { errors: o, invalid: d, isTouched: m } = s(a.store, (e) => ({
+    errors: e.meta.errors,
+    invalid: !e.meta.isValid,
+    isTouched: e.meta.isTouched
+  }));
+  return !m || !d || o.length === 0 ? null : /* @__PURE__ */ n(
+    f,
+    {
+      "data-dd-privacy": "allow",
+      ...r,
+      ref: t,
+      id: i.feedbackTextId || r.id,
+      role: "alert",
+      "data-unity-slot": "form-feedback-text",
+      variant: "bodySmallStrong",
+      color: "content.form.invalid",
+      asElement: "span",
+      children: o[0].message
+    }
+  );
+});
+x.displayName = "TanstackFormFeedbackText";
+export {
+  x as TanstackFormFeedbackText
+};

package/dist/esm/components/form-field/parts/TanstackFormHelperText.d.ts

@@ -0,0 +1,11 @@
+import { TextProps } from '../../text/Text.js';
+export type TanstackFormHelperTextProps = Omit<TextProps, 'variant' | 'color' | 'className'>;
+/**
+ * `TanstackFormHelperText` displays non-blocking helper text for the current
+ * TanStack form field.
+ *
+ * Usage:
+ * - Place directly under an input/textarea within a `<form.AppField name="…">`.
+ */
+declare const TanstackFormHelperText: import('react').ForwardRefExoticComponent<TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { TanstackFormHelperText };

package/dist/esm/components/form-field/parts/TanstackFormHelperText.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Text as m } from "../../text/Text.js";
+import { useFieldA11yContext as n } from "../TanstackFormField.context.js";
+const d = l(({ children: e, ...t }, r) => {
+  const o = n();
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "data-dd-privacy": "allow",
+      ...t,
+      id: o.helperTextId || t.id,
+      "data-unity-slot": "form-field-helper-text",
+      variant: "bodySmall",
+      asElement: "span",
+      color: "content.neutral.low",
+      ref: r,
+      children: e
+    }
+  );
+});
+d.displayName = "TanstackFormHelperText";
+export {
+  d as TanstackFormHelperText
+};

package/dist/esm/components/form-field/parts/TanstackFormLabel.d.ts

@@ -0,0 +1,8 @@
+import { LabelProps } from '../../label/Label.js';
+export type FormLabelProps = LabelProps;
+/**
+ * `TanstackFormLabel` renders the label for the current TanStack form field.
+ * It is used to provide context for the form field.
+ */
+declare const TanstackFormLabel: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackFormLabel };

package/dist/esm/components/form-field/parts/TanstackFormLabel.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Label as n } from "../../label/Label.js";
+import { useFieldA11yContext as d } from "../TanstackFormField.context.js";
+const s = l(
+  ({ children: e, isRequired: o, ...r }, t) => {
+    const { requiredVariant: m } = r, a = d();
+    return /* @__PURE__ */ i(
+      n,
+      {
+        ref: t,
+        htmlFor: a.inputId,
+        id: a.labelId,
+        isRequired: o,
+        requiredVariant: m,
+        className: "uy:leading-[1]!",
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+s.displayName = "Label";
+export {
+  s as TanstackFormLabel
+};