import "./reading_grid.css";
import type * as React from "react";
import type { ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import type { MetricSize } from "./metric";
import { type MetricStripItem } from "./metric_strip";
import { type StyleProps } from "./style_props";
/** Units of the four a desk row holds, a count of columns: a figure or a ring 1, a breakdown, trend or list
 *  2, a matrix the row. */
export type ReadingGridSpan = 1 | 2 | 3 | 4;
export type ReadingGridItem = {
    kind: "figure";
    key: string;
    /** One unit; figures sharing a row — every figure of a band — stand in one strip, divided, rather than a
     *  card each. */
    figure: MetricStripItem;
} | {
    kind: "card";
    key: string;
    span: ReadingGridSpan;
    /** The reading's heading, in the title slot every card shares — on the line a figure's label stands on.
     *  Its words, or a node that reads them (a count still arriving). */
    title?: ReactNode;
    /** A control changing what the picture draws — a segmented `ChoiceStrip` (the unit its figures are in) —
     *  at the end of the title's line, never growing it. */
    action?: ReactNode;
    /** The width its picture needs to stand whole (a ring's legend, every name whole): where one of this
     *  grid's units cannot seat it, the card takes the units it needs. */
    ink?: number;
    /** A muted line at the card's foot, under its picture — what the picture leaves out ("the first 500
     *  rows"). */
    note?: string;
    /** The reading's picture; the grid draws the card around it, in a body taking the height the row gives
     *  the card, so a picture at its own size (a ring and its legend) stands in its middle. */
    children: ReactNode;
};
/** The height a band gives every picture's body, under its title: what a picture drawn there is sized to. */
export declare const READING_BAND_BODY = 104;
/** One line of a picture in the band — a bar's row, a legend's, a matrix's — with the air under it: a picture
 *  of more lines than the body seats folds its tail. */
export declare const READING_BAND_LINE = 24;
export interface ReadingGridProps extends StyleProps {
    /** In the author's order, which is the order the rows fill. */
    items: readonly ReadingGridItem[];
    /**
     * `grid` (default): rows of four units, filling down. `band`: ONE line of a fixed low height across the
     * box — a register's readings over its rows, always in view — its figures one strip, each a unit of the line
     * (a quarter; half in a phone's column), the cards sharing the rest in proportion to their units, every
     * picture's body `READING_BAND_BODY` high; in a phone's column the line scrolls sideways.
     */
    form?: "grid" | "band";
    /** A grid's figures' size, as `MetricStrip`'s; a band draws its own. */
    size?: MetricSize;
    /** The keyed figure whose condition narrows the rows; pressed again, it lets go. */
    selectedKey?: string | null;
    /** Omit for figures that only read; with it each keyed figure is a toggle. */
    onSelect?: (key: string | null) => void;
    /** So a toggle elsewhere names the grid it opens. */
    id?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * READINGS LAID OUT AS ONE FILLING GRID — a dashboard, a record's reading blocks — or as ONE BAND, a
 * register's readings over its rows. Four units to a grid row: rows fill in the author's order, the last
 * card of each row stretches to its end, the cards of a row share one height, and figures sharing a row read
 * as one strip. Every card's title and every figure's label stand on one line at the top, the height a row
 * gives beyond them going to the card's body, where a picture drawn at its own size stands centred. A card
 * whose picture one unit cannot seat whole takes the units it needs. Where the grid's own box is a phone's
 * column, every card takes the width. The band is one line of one low height whatever it holds: its figures
 * one strip, each figure a unit of the line wide — a card beside a chart, never a sliver — stacking what the
 * band cannot seat side by side, and its cards sharing the rest by their units, each picture drawn to the
 * band's body; a phone scrolls it sideways.
 */
export declare function ReadingGrid(props: ReadingGridProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;