import { type ComponentProps, type ReactNode } from "react";
interface FieldContextValue {
    controlId: string;
    labelId: string;
    /** Ids of the visible hint or error, for aria-describedby. */
    describedBy: string | undefined;
    invalid: boolean;
    required: boolean;
    disabled: boolean;
}
/** The enclosing Field, or null. Use it to label custom group controls. */
export declare function useField(): FieldContextValue | null;
/** Accessibility props for the control inside a Field. Explicit props win. */
export declare function useFieldControlProps(): {
    id?: string | undefined;
    "aria-describedby"?: string | undefined;
    "aria-invalid"?: true | undefined;
    "aria-required"?: true | undefined;
    disabled?: true | undefined;
};
export declare function Field({ label, hint, error, optional, required, disabled, aside, group, id, className, children, }: {
    /** 14/500, sentence case, names what is being entered. */
    label: ReactNode;
    /** One 12px line under the control. Hidden while an error shows. */
    hint?: ReactNode | undefined;
    /** Inline error: what is wrong and how to fix it. Sets aria-invalid. */
    error?: ReactNode | undefined;
    /** Shows a quiet "Optional" marker after the label. */
    optional?: boolean | undefined;
    required?: boolean | undefined;
    disabled?: boolean | undefined;
    /** Right-aligned next to the label, for example a character count. */
    aside?: ReactNode | undefined;
    /**
     * For controls that are a group (segmented control, radio cards): the label
     * becomes the group's name through aria-labelledby instead of htmlFor.
     */
    group?: boolean | undefined;
    /** Control id. Generated when omitted. */
    id?: string | undefined;
    className?: string | undefined;
    children: ReactNode;
}): import("react").JSX.Element;
/** Vertical rhythm for a form: 24px between fields. */
export declare function FieldStack({ className, children }: {
    className?: string;
    children: ReactNode;
}): import("react").JSX.Element;
export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
    /** JetBrains Mono, for names, IDs and code. */
    mono?: boolean | undefined;
    /** Resource names are not a person's identity or a saved credential. */
    suppressAutofill?: boolean | undefined;
}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & {
    mono?: boolean | undefined;
}, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
/**
 * The bare 16px checkbox, for rows that carry their own label (a model in
 * Allowed models). Wrap the row in a <label> so the whole row toggles it.
 * `indeterminate` shows a dash for a group checkbox whose items are mixed;
 * clicking it reports `checked: true` (select all).
 */
export declare function Checkbox({ onCheckedChange, className, indeterminate, ...props }: Omit<ComponentProps<"input">, "type" | "onChange" | "className"> & {
    onCheckedChange?: ((checked: boolean) => void) | undefined;
    className?: string | undefined;
    indeterminate?: boolean | undefined;
}): import("react").JSX.Element;
/**
 * A single yes/no choice inside a form with a Save button. For on/off that
 * saves immediately, use a switch instead.
 */
export declare function CheckboxField({ label, description, disabledReason, checked, defaultChecked, onCheckedChange, disabled, name, className, }: {
    label: ReactNode;
    /** One 12px line under the label. */
    description?: ReactNode | undefined;
    /** Why a disabled choice can't change: shown in the description's place, and stays legible. */
    disabledReason?: ReactNode | undefined;
    checked?: boolean | undefined;
    defaultChecked?: boolean | undefined;
    onCheckedChange?: ((checked: boolean) => void) | undefined;
    disabled?: boolean | undefined;
    name?: string | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;
export {};