import "./summary.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type MetricFormat, type MetricTone } from "./metric";
import { type TotalsLineItem } from "./totals_line";
import { type StyleProps } from "./style_props";
/** One bucket, with the colour it wears everywhere. Buckets partition the set, so the total is derived; a
 *  condition that does not partition ("overdue" beside "draft / sent / paid") is a `facts` entry, or the
 *  bar double-claims its rows. */
export interface SummaryBucket {
    key: string;
    /** Reads after the value. */
    label: string;
    value: number;
    /** The colour this bucket wears elsewhere in the product; a bar disagreeing with the badge beside it is
     *  worse than none. */
    color: string;
    info?: string;
    /** Valence on the count, for a bucket of work someone must do. Reserve it: tone everything and nothing
     *  is said. It colours the figure only, so the bar stays a distribution, not a heat map. */
    tone?: MetricTone;
}
export interface SummaryTotal {
    /** What it counts — "records", "khách hàng"; reads after the figure. */
    label: string;
    /** A total counted by the same source as the buckets; omitted, they are summed so it cannot drift from
     *  the bar. For a server-paginated register whose size is its own count over the view; never a literal. */
    value?: number;
    /** Default: locale grouping, so 12,345 never reads "12345" in the headline. */
    formatValue?: (n: number) => string;
}
/** A second headline figure outside the distribution (a sum of money, an average, a rate), on the header
 *  row because "how much" and "what is it worth" sit side by side. */
export interface SummaryMetric {
    value: number | string | null | undefined;
    label: string;
    format?: MetricFormat;
    currency?: string;
    compact?: boolean;
    emptyLabel?: string;
    tone?: MetricTone;
}
export interface SummaryProps extends StyleProps {
    buckets: readonly SummaryBucket[];
    total: SummaryTotal;
    metrics?: readonly SummaryMetric[];
    /** `false` draws no bar, for buckets that are a key rather than a distribution. */
    distribution?: number | false;
    /** Aggregates after the buckets with no swatch, so they visibly are not slices. */
    facts?: readonly TotalsLineItem[];
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The register's summary band — a headline, the set's distribution, and the buckets named. One entry, not a
 * compound: bar, legend and headline all derive from the one `buckets` declaration, so nothing can
 * disagree. A few aggregates alone are `TotalsLine`; a boxed stat band `MetricStrip`; a drill-down over a
 * large population `Breakdown`.
 *
 *     <Summary
 *       buckets={STAGES}
 *       total={{ label: "khách hàng" }}
 *       metrics={[{ value: 660_000_000, label: "hoa hồng", format: "currency", compact: true }]}
 *       facts={[{ label: "đang tắc", value: 3, tone: "warning" }]}
 *     />
 */
export declare function Summary({ buckets, total, metrics, distribution, facts, testID, render, ref, ...props }: SummaryProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;