import "./list_item.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
import type { TextColor } from "./text_ink";
/**
 * WHAT THE ROW'S TRAILING SLOT HOLDS, which decides everything else about it.
 *
 * - `settings` (the default): a 64px row of a settings or detail list. Its
 *   `right` holds a CONTROL, so the press target is the region BESIDE it and
 *   the slot keeps its own tab stop.
 * - `option`: a row you PICK — a menu item, a listbox option, a pointer to
 *   another record. It sizes to its content and the WHOLE row is the button,
 *   because an option's trailing slot is a tick or a shortcut and never a
 *   control.
 */
export type ListItemVariant = "settings" | "option";
export interface ListItemProps extends StyleProps {
    left?: React.ReactNode;
    /** A quiet line ABOVE the title, naming what the subject IS — the table a
     *  linked record lives in, the group a value belongs to. It names the title,
     *  so the two read as one label. */
    overline?: React.ReactNode;
    /** A plain string gets the row's own title type; a node renders as-is — a
     *  subject whose label is richer than one line of text (a code and its full
     *  official name, a run with the search match bolded). Pass
     *  `accessibilityLabel` when the title is a node. */
    title?: React.ReactNode;
    /** Title ink. Default, except where the row is an ACTION rather than a
     *  subject — a leading "Browse all" tinted to match its glyph. */
    titleColor?: TextColor;
    description?: React.ReactNode;
    right?: React.ReactNode;
    onPress?: () => void;
    /** Pointing at the row, for a list that opens a preview beside it. */
    onHoverIn?: () => void;
    /** Persistent selection — the current value in a listbox, the open app. */
    selected?: boolean;
    /** The ROVING keyboard highlight, driven by a controlling input through
     *  `aria-activedescendant`. Distinct from `selected`: one says where the
     *  keyboard is, the other says what the list holds. */
    focused?: boolean;
    /** DOM id, referenced by a combobox input's `aria-activedescendant`. */
    id?: string;
    /** The row's ARIA role inside a composite widget. The element is already a
     *  `<button>` when it presses, so state it only for a listbox option or a
     *  menu item. */
    role?: "menuitem" | "option";
    disabled?: boolean;
    variant?: ListItemVariant;
    /** The row's accessible name, where the lines it renders do not compose one —
     *  a `title` node, or the same title repeated down a list. */
    accessibilityLabel?: string;
    /** Names the thing that PRESSES, so a test clicking the row by `testID` lands
     *  on the press target rather than on the box around it. */
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A LIST ROW — optional `left` (icon/avatar), an `overline` over `title` over
 * `description`, a `right` slot, optional `onPress`/`selected`. NOT a data
 * register row (`PressableRow` / `Table`).
 *
 * **A `settings` row always presses BESIDE its `right` slot, never around it.**
 * The slot is documented as holding a control, and a button may not contain
 * one: `<button>` inside `<button>` is invalid HTML that React warns about, and
 * it puts a second tab stop and a second name inside a control that is supposed
 * to be one thing. So the surface is a wrapper, the press target is the region
 * holding `left` and the text, and the slot sits outside it — the anatomy
 * `FieldSurface` uses for its `actions`.
 *
 * ALWAYS, not only when a slot is passed. `right` is routinely conditional
 * (`updateAvailable ? <Status/> : undefined`), and an anatomy that flipped on that would make
 * two rows in one list press differently — the badge row's right edge dead, its neighbour's
 * live — for a reason a reader cannot see. One shape, whatever the data does. With no slot
 * the region takes the whole row, so the press target is unchanged.
 *
 * That the anatomy carries this rather than a prop opting into safety is the point: every
 * call site already passing a control here is fixed without being touched, and a caller
 * cannot reintroduce the nesting by forgetting a flag. The cost is that a decorative `right`
 * (a badge, a chevron) is not part of the press target — uniformly, which is what makes it
 * readable rather than surprising.
 *
 * An `option` row inverts that trade, and can: its content is a label by
 * construction, so the ROW is the button and the whole of it presses.
 *
 * The wash lives on the WRAPPER and is driven by the region's own hover and press,
 * so the whole row lights up as one thing — the region alone would light up to the
 * edge of the slot and stop, which reads as two rows.
 */
export declare function ListItem(props: ListItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;