import "./card_grid.css";
import type * as React from "react";
import type { ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import type { IdentityMark } from "./shape_frame";
import { type StyleProps } from "./style_props";
/** One run of the grid — the subhead's words, and the cards under it. */
export interface CardGridRun<T> {
    key: string;
    label: string;
    rows: readonly T[];
}
/** One labelled fact on a card — what the reader sorts the pile by. */
export interface CardGridFact {
    label: string;
    value: ReactNode;
}
/**
 * HOW BIG A CARD IS, and therefore what it can hold.
 *
 * - `card` — a bordered tile the reader READS: the mark or the picture leads, the
 *   name and its qualifying line follow, and two or three labelled facts sit under
 *   them.
 * - `tile` — the picture IS the card, at a density where the reader is recognising
 *   rather than reading. It carries no facts.
 */
export type CardGridVariant = "card" | "tile";
export interface CardGridProps<T> extends StyleProps {
    rows: readonly T[];
    rowKey: (row: T) => string;
    /** The runs the cards fall into — a subhead each. Absent, the grid is flat. */
    runs?: readonly CardGridRun<T>[] | null;
    /** The row's subject — the card's own name. */
    title: (row: T) => string;
    /** The ONE line that qualifies it. */
    caption?: (row: T) => string | null;
    /** The row's photograph, or `null` where it has none. */
    picture?: (row: T) => string | null;
    /** The subject's mark, where the rows are parties rather than things. */
    mark?: (row: T) => IdentityMark | null;
    /**
     * The two or three facts the card carries under its name — the caller draws each
     * value, because what a figure IS is the data's answer. Never on a `tile`.
     */
    facts?: (row: T) => readonly CardGridFact[];
    /** One mark for where the row STANDS, on the card's foot. */
    badge?: (row: T) => ReactNode;
    open?: (row: T) => void;
    /** The card's accessible name, where the title does not read as one. */
    identity?: (row: T) => string;
    /** The row's own verb and its ⋯, on the card's foot, outside the press target. */
    acts?: (row: T) => ReactNode;
    /** The card's tick, where the grid is over a set the reader picks from. */
    tick?: (row: T) => {
        checked: boolean;
        onChange: (on: boolean) => void;
    };
    variant?: CardGridVariant;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * THE SAME ROWS AS A GRID OF CARDS — led by the picture or the subject's mark,
 * with the name, its qualifying line and two or three facts under it.
 *
 * Reach for it where the reader RECOGNISES a row before reading it — a catalogue,
 * a body of photographs, a set of people — and where the one thing they do with a
 * row is open it. Where they compare figures ACROSS rows, that is `Table`: a grid
 * gives up the column the eye runs down. Where the job is to MOVE a row between
 * named places, that is `Board`.
 *
 * THE CARD IS NOT THE BUTTON. It carries its own tick and its own verbs, and a
 * button may not contain one, so the surface takes no role and the door is a
 * `RowFocusEntry` beside them.
 */
export declare function CardGrid<T>(props: CardGridProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;