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

import { StandardSchemaV1 } from '@standard-schema/spec';
import { ForwardedRef, HTMLAttributes, JSX, ReactNode } from 'react';
import { FieldPath, FieldValues } from 'react-hook-form';
import { Schema } from '../../hooks/use-form.types.js';
import { InputProps } from '../input/Input.js';
import { LabelProps } from '../label/Label.js';
import { TextAreaProps } from '../text-area/TextArea.js';
interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
    /** The name of the field, which should match the form schema. */
    name: TName;
    /** The label for the text field. */
    label: string;
    /** If true, the text field will be a multi-line text area. */
    multiline?: boolean;
    /** The default value of the text field. */
    defaultValue?: HTMLAttributes<HTMLInputElement>['defaultValue'];
    /** Helper text to display below the text field. */
    helperText?: ReactNode;
    /** Feedback text to display below the text field. */
    feedbackText?: ReactNode;
    /** A contextual link to display below the text field. */
    contextualLink?: ReactNode;
}
interface TextFieldWithInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<InputProps, 'name'> {
    multiline?: false;
    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
}
interface TextFieldWithTextAreaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<TextAreaProps, 'name'> {
    multiline?: true;
    type?: never;
}
export type TextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldWithInputProps<TFieldValues, TName> | TextFieldWithTextAreaProps<TFieldValues, TName>;
type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
}) => JSX.Element) & {
    displayName?: string;
};
/**
 * The `TextField` component renders a full field that can accept text input, supporting single-line and multi-line text fields, and integrates with the `Form` component automatically.
 * @example
 * ```tsx
 * const schema = z.object({
 *   name: z.string(),
 *   email: z.string().email()
 * })
 *
 * function MyForm() {
 *   const { Form } = useUnityForm(schema)
 *
 *   return (
 *     <Form action={handleSubmit}>
 *       <TextField<typeof schema>
 *         name="name"  // Only "name" | "email" allowed
 *         label="Name"
 *       />
 *     </Form>
 *   )
 * }
 * ```
 * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
 * @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 TextField: TextFieldComponent;
export { TextField };