import { type ComponentProps, type ReactElement, type ReactNode } from "react";
export interface SettingRowField {
    /** Id for a labelable control (switch, input, native select). Take it through `useSettingRowControl`. */
    controlId: string;
    /** Id of the visible label, for `aria-labelledby`. */
    labelId: string;
    /** Space-separated ids of the description, hint and error, for `aria-describedby`. */
    describedBy: string | undefined;
    /** True when the row shows an error. */
    invalid: boolean;
    /** Points the label at `controlId`; returns the release. Use `useSettingRowControl` instead. */
    claimLabel: () => () => void;
}
/** The label and description ids of the enclosing SettingRow, or null outside one. */
export declare function useSettingRowField(): SettingRowField | null;
/**
 * For a labelable control that renders `id={field.controlId}`: the row's
 * label then points at it, so clicking the label focuses or toggles it.
 * Pass `false` when the control keeps its own id.
 */
export declare function useSettingRowControl(takesId?: boolean): SettingRowField | null;
/** Joins aria id lists, dropping empty entries. */
export declare function joinIds(...ids: Array<string | null | undefined | false>): string | undefined;
export declare function DisabledReasonTooltip({ reason, side, children, }: {
    /** Why the control is unavailable and who can fix it. Renders nothing extra when empty. */
    reason?: ReactNode | undefined;
    side?: "top" | "right" | "bottom" | "left" | undefined;
    /** One focusable element. Its clicks are swallowed while the reason shows. */
    children: ReactElement;
}): import("react").JSX.Element;
/**
 * - `control-right` (default): text left, the control in a fixed right column so
 *   every control on the page lines up. Wide controls drop under the text when
 *   the row is narrower than 640px; switches stay on the right.
 * - `control-left`: list style. Switches sit before the label; wider controls
 *   go under the description.
 * - `stacked`: the control always sits under the text, like a form field.
 */
export type SettingRowVariant = "control-right" | "control-left" | "stacked";
/**
 * - `compact`: a switch or a small button. Never wraps under the text in
 *   `control-right`.
 * - `select`: a 240px column; the control fills it (full width when stacked).
 * - `auto`: the control's own width, for segmented controls. Options stretch
 *   to the full width when stacked.
 *
 * Rows use the 32px control size (`size="sm"` on selects and segmented
 * controls), so every control in a list shares one height.
 */
export type SettingRowControlWidth = "compact" | "select" | "auto";
export interface SettingRowProps extends Omit<ComponentProps<"div">, "title" | "children"> {
    /** 14/500, sentence case. Wraps; never truncates. */
    label: ReactNode;
    /** 12/18 muted, one or two sentences. */
    description?: ReactNode | undefined;
    /** Exactly one control. */
    control?: ReactNode | undefined;
    controlWidth?: SettingRowControlWidth | undefined;
    variant?: SettingRowVariant | undefined;
    /** A quiet line under the description, usually a `SettingRowLink` that fixes an unavailable state. */
    hint?: ReactNode | undefined;
    /** What went wrong and what to do. Linked to the control with `aria-describedby`. */
    error?: ReactNode | undefined;
    /**
     * Dependent rows (more SettingRows) that apply only while this row's setting
     * is on: a sub-selection indented under this row, with no hairline between
     * the parent and its children or between the children, and no guide line.
     * They keep the ordinary row type (title, description, control on the
     * right) with tighter spacing, and the next hairline comes after the whole
     * group. Render them only while the parent is on.
     */
    children?: ReactNode | undefined;
}
export declare function SettingRow({ label, description, control, controlWidth, variant, hint, error, children, className, ...props }: SettingRowProps): import("react").JSX.Element;
/** Rows of one section, split by hairlines. The Section variant decides whether they sit in a card. */
export declare function SettingRowGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
/**
 * A setting that lives on its own page ("Allowed models", "Models it can
 * serve"). The whole row is the button: label and description on the left,
 * the current value in muted text and a chevron on the right, and the row
 * hover of a list row. Use it instead of an "Edit" or "Change" button that
 * only opens a page.
 */
export declare function SettingNavRow({ label, description, value, onOpen, href, disabled, disabledReason, className, ...props }: Omit<ComponentProps<"div">, "children"> & {
    label: ReactNode;
    description?: ReactNode | undefined;
    /** The current value, short: "All models", "3 models". */
    value?: ReactNode | undefined;
    onOpen?: (() => void) | undefined;
    href?: string | undefined;
    disabled?: boolean | undefined;
    /** Why the page can't be opened, and who can fix it. Replaces the description. */
    disabledReason?: ReactNode | undefined;
}): import("react").JSX.Element;
/**
 * A quiet destructive action at the end of a settings list ("Turn off
 * Codex"): danger text that confirms in a dialog, with one muted line under
 * it. Not a filled button, and never a ⋯ menu floating above the rows.
 */
export declare function SettingDangerRow({ label, description, disabled, onClick, className, }: {
    label: ReactNode;
    description?: ReactNode | undefined;
    disabled?: boolean | undefined;
    onClick: () => void;
    className?: string | undefined;
}): import("react").JSX.Element;
/**
 * The quiet "fix it" link under a row description: "Connect AI Gateway".
 * Renders an anchor when `href` is set, otherwise a button.
 */
export declare function SettingRowLink({ href, onClick, children, className, disabled, }: {
    href?: string | undefined;
    onClick?: (() => void) | undefined;
    children: ReactNode;
    className?: string | undefined;
    disabled?: boolean | undefined;
}): import("react").JSX.Element;
/** Loading placeholder with the same height and columns as a real row. */
export declare function SettingRowSkeleton({ controlWidth, variant, description, className, }: {
    controlWidth?: SettingRowControlWidth | undefined;
    variant?: SettingRowVariant | undefined;
    description?: boolean | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;