import "./bar_chart.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface BarChartItem {
    label: string;
    value: number;
    /** Pass `var(--lotics-<family>-500)` so a theme repaints it. */
    color?: string;
    /**
     * The mark its name leads with where the bar is someone or something with a face — a person's `Avatar`, a
     * linked row's picture, a `BrandMark`: the bar's colour belongs to the measure, so it cannot carry identity.
     * Unsized, it takes a line's rung; every bar holds the slot where one has a mark. Vertical: over the name,
     * thinned with it.
     */
    leading?: ReactNode;
    /** What `onSelect` hands back; a keyed bar is pressable. */
    key?: string;
    /** A period still running, or cut short by its window: outlined over a hatch of its colour, so a
     *  half-filled period never reads as a fall, and never dropped unsaid. */
    partial?: boolean;
}
/**
 * The width a horizontal chart needs for every name to stand whole beside its bar, the bar still telling rows
 * apart and every figure whole — narrower, each name goes over its bar. A `ReadingGrid` card's `ink`.
 */
export declare function barChartInk(data: readonly Pick<BarChartItem, "label" | "value" | "leading">[], formatNumber: (n: number) => string): number;
export interface BarChartProps extends StyleProps {
    data: BarChartItem[];
    orientation?: "vertical" | "horizontal";
    /** How a bar's figure prints. */
    formatNumber?: (n: number) => string;
    emptyLabel?: string;
    /**
     * One width so every bar starts on one edge; a request, never a reservation, giving way first in a
     * narrow pane. Default: 80 on a vertical chart; on a horizontal one the widest name's ink, and where
     * that leaves the bars too little, each name on its own line over its bar.
     */
    labelWidth?: number;
    /** Default 200; the caller's, because height balances a chart against the card beside it. */
    height?: number;
    /** Bars past the first `top` fold into one neutral bar summing them, named by the pack's `chart.rest`;
     *  the caller ranks. */
    top?: number;
    /** The keyed bar whose condition narrows the rows the page lists; its words take the accent. */
    selectedKey?: string | null;
    /** Omit for an informational chart; with it each keyed bar — its name, its bar and its figure, a column with
     *  the words under it — is one toggle, pressed again to clear. */
    onSelect?: (key: string | null) => void;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The canonical bar chart over `{ label, value, color?, leading? }[]`, vertical or horizontal, on a
 * domain holding zero and every value — a negative bar hangs below (or left of) the zero line, a zero
 * draws no bar. Every bar prints its figure, so there is no value axis: the scale ends at the largest and
 * the zero line is the one rule. Vertical: each column's name and figure under it, thinned together to
 * what stands whole in its slot. Horizontal: a name takes its ink beside its bar, or its own line over the
 * bar where the row cannot seat both — never a stub. A ranking folds its tail with `top`; a running period
 * is `partial`; keyed bars under `onSelect` are the page's filter doors. One inline trend is `Sparkline`;
 * parts of a whole are `PieChart` / `Breakdown`.
 */
export declare function BarChart(props: BarChartProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;