@payfit/unity-components/dist/esm/components/text-field/TanstackTextField.d.ts

import { ReactNode } from 'react';
import { TanstackInputProps } from '../input/TanstackInput.js';
import { LabelProps } from '../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"
 *
 * 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 };