import "./stacked_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";
import type { TextColor } from "./text_ink";
export interface StackedBarSeries {
    key: string;
    label: string;
    /** Series colour. Pass `var(--lotics-<family>-500)` and a theme repaints it. */
    color: string;
}
export interface StackedBarRow {
    key: string;
    /** The entity this row is about — a campaign, a depot, a month. */
    label: string;
    /**
     * That entity's own mark, before its name — a `BrandMark`, an `Avatar`, a
     * status dot. A chart and a table over the SAME entities inside one card have
     * to draw them the same way; without a slot the chart can only say the name in
     * text, and one value ends up with two renderings a few hundred pixels apart.
     *
     * A slot rather than a widened `label`, following `Table`/`FileRow`: `label`
     * is also this row's accessible name and the target of the two-line clamp, and
     * a `ReactNode` there would lose both.
     *
     * The row's SERIES colours belong to the measure, so unlike a legend row this
     * one carries no identity of its own until you give it one.
     */
    leading?: ReactNode;
    /** A neutral qualifier beside the label ("Đang chạy", "12 đơn"). */
    meta?: string;
    /** Per-series magnitudes, keyed by `StackedBarSeries.key`. Negatives are dropped. */
    values: Record<string, number>;
    /** The row's headline figure, right of the label. Already formatted by the caller. */
    value?: string;
    valueTone?: TextColor;
    /** One full sentence under the bar, saying what the segments amount to. */
    caption?: string;
}
export interface StackedBarChartProps extends StyleProps {
    series: StackedBarSeries[];
    rows: StackedBarRow[];
    /**
     * The shared scale every row is measured on. Defaults to the largest row
     * total, which is what makes this a chart: leave it alone unless a second
     * chart beside this one must be read against the same ruler.
     */
    max?: number;
    /** Bar thickness in px. Default 12. */
    height?: number;
    /** Render the series legend above the rows. Default true. */
    legend?: boolean;
    emptyLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Rows of stacked bars on ONE SHARED SCALE — spend against return per campaign,
 * cost make-up per product line, hours per crew. Each row's bar is as long as
 * that row's total is against the largest row, and the segments inside it split
 * that length; so bar LENGTH answers "how big is this one" and the segment run
 * answers "what is it made of", in one pass.
 *
 * That shared scale is the whole difference from a split `Progress`, and the
 * reason this is a separate component rather than a prop on it. That one draws
 * ONE whole split across segments and fills its track whatever the total — put
 * it on ten rows and ten unequal totals draw ten equal bars, which reads as a
 * chart and states nothing. `Breakdown` is the other neighbour: one whole, one
 * bar, ranked share rows beneath it. Reach here the moment there are SEVERAL
 * wholes to compare.
 *
 * Segments carry meaning by colour, so the legend is on by default and the
 * colours are the caller's — one `ColorName` family per dimension, per the
 * kit's colour discipline. A row's `caption` is the second channel: colour
 * alone never has to carry the point.
 */
export declare function StackedBarChart(props: StackedBarChartProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;