import * as React from 'react';
import { type AllowedTags, type TypographyVariantsType } from '../../atoms/typography';
export declare const HELP_TEXT_STATES: readonly ["completed", "default", "error", "info", "success", "warning"];
export type HelpTextState = (typeof HELP_TEXT_STATES)[number];
export interface HelpTextProps {
    /**
     * HTML element to render.
     * @default 'div'
     */
    as?: AllowedTags;
    /** Helper-text content. */
    children: React.ReactNode;
    /**
     * Element id. Required because the point of help text is to be referenced from
     * the input's `aria-describedby`; without an id it is decoration.
     */
    id: string;
    /**
     * Add the standard gap above, for help text directly under a field.
     * @default false
     */
    marginTop?: boolean;
    /**
     * Color treatment. `error` also sets `role="alert"`.
     * @default 'default'
     */
    state?: HelpTextState;
    /**
     * Override the typography role.
     * @default 'body-s'
     */
    variant?: TypographyVariantsType;
    className?: string;
}
/**
 * Only three of the six states carry their own color. `info`, `warning` and
 * `completed` deliberately read as primary text: the surrounding field already
 * signals the state, and coloring the hint as well makes a form look alarming.
 *
 * `default` and `error` ARE FIGMA'S, from `.input-text`'s `FieldDescription` block — the neutral
 * line is `color/gray/gray-300` #9aa0b4 and the `[Alert]` line is
 * `color/brand/accesible-red-dark-theme` #ef223a. Both are clean reverts measured against the
 * PAGE, which is the surface this block sits on: Figma stacks it below the `Field` frame with an
 * 8px gap, so it never overlaps the field fill. 7.43:1 and 4.57:1, both clearing 1.4.3.
 *
 * The other four are rule-2 gaps — Figma's block has exactly these two lines — so they keep the
 * shared roles.
 */
export declare const helpTextStateColour: Record<HelpTextState, string>;
/**
 * Hint or validation text below a form control.
 *
 * The `error` state also sets `role="alert"`, so a validation message is
 * announced when it appears rather than only being visible. That is the reason
 * this component exists rather than callers writing a styled `<div>`.
 *
 * @example <HelpText id="email-help">We never share it.</HelpText>
 * @example <HelpText id="email-help" state="error" marginTop>Required</HelpText>
 */
export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLElement>>;
//# sourceMappingURL=help-text.d.ts.map