import type { HTMLAttributes, ReactElement, ReactNode } from "react";
/** The wiring FormField hands its control; spread it onto the focusable element. */
export interface FormFieldControlProps {
    /** Id for the control; the label, helper and error ids derive from it. */
    id: string;
    /** Points at the field's label element, so composites that a `<label for>` cannot name still get one. */
    "aria-labelledby": string;
    /** The error when shown, else the helper text, plus any description the child already had. */
    "aria-describedby": string | undefined;
    /** True while `error` is set, else undefined. */
    "aria-invalid": true | undefined;
    /** True when the field is required, else undefined. */
    "aria-required": true | undefined;
}
/** Where the label sits relative to the control. */
export type FormFieldLayout = "vertical" | "horizontal";
/** Label, required marker, helper text and error message around any one control; other `<div>` attributes land on the root. */
export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "children" | "color" | "dangerouslySetInnerHTML"> {
    /** Label text, shown beside or above the control. */
    label: string;
    /** The control's id, which the label and message ids derive from; defaults to the child element's own `id`, else a generated one. */
    id?: string;
    /** Adds the asterisk, `aria-required` on the control, and Chakra's `isRequired` for Chakra-based controls (which also sets native `required`). */
    isRequired?: boolean;
    /** Marks the control `aria-invalid` and shows `errorMessage` in place of `helperText`. */
    error?: boolean;
    /** Shown, and announced, only while `error` is true. */
    errorMessage?: string;
    /** Shown under the control whenever no error is showing. */
    helperText?: string;
    /** "vertical" (default) stacks label over control; "horizontal" puts the label in a left column from the `md` breakpoint up and stacks below it. */
    layout?: FormFieldLayout;
    /** Width of the label column in the horizontal layout; defaults to "12rem". */
    labelWidth?: string;
    /** One element, which receives the wiring as props, or a function that places it on the right element of a composite control. */
    children: ReactElement | ((control: FormFieldControlProps) => ReactNode);
}