import { type ColorTokens, type LayoutStyle } from "../../style/index.js";
import { type ChartSkin } from "../shared/types.js";
import { type BreakdownRow } from "../shared/breakdown-rows.js";
import { Chip as WebChip } from "../../atoms/chip/chip.js";
export type { BreakdownRow } from "../shared/breakdown-rows.js";
export interface MetricBreakdownChip {
    /** Stable identity, used as the React key when present. */
    id?: string | number;
    /** The chip label (e.g. an error code). */
    label: string;
    /** A tally rendered after the label (e.g. how often the code fired). */
    count?: number;
    success?: boolean;
    warning?: boolean;
    destructive?: boolean;
    info?: boolean;
}
export interface MetricBreakdownProps {
    /** The headline figure, preformatted (e.g. "3,771"). */
    value: string;
    /** Small caption over the headline (e.g. "Tokens issued"). */
    label: string;
    /** Secondary metric, under the headline (e.g. "1.39%"). */
    rate?: string;
    /** Caption after the rate (e.g. "Error rate"). */
    rateLabel?: string;
    rateSuccess?: boolean;
    rateWarning?: boolean;
    rateDestructive?: boolean;
    /** Trend series rendered as a Sparkline bar strip beside the headline.
     *  Needs at least two points to draw. */
    spark?: number[];
    /** Unit suffix on the latest-value caption (e.g. "req/s"). */
    sparkUnit?: string;
    /** Hide the latest-value tag over the trend strip (the strip alone, when the headline already carries the figure). */
    hideSparkTag?: boolean;
    /** Per-category rows with proportional share bars. */
    breakdown?: BreakdownRow[];
    /** Footer chips rendered with the kit Chip (e.g. top error codes). */
    chips?: MetricBreakdownChip[];
    /** Leading caption on the chip row (e.g. "Errors"). Omit to hide. */
    chipsLabel?: string;
    /** Formats row values and the spark tag (data formatting, not styling). */
    formatValue?: (v: number) => string;
    compact?: boolean;
    /** Expanded metric summary with a divided share breakdown and trend annotation. */
    detailed?: boolean;
    /** Strip the card surface for nesting inside an existing card (mirrors Stats). */
    plain?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export declare function rateColor(tokens: ColorTokens, p: MetricBreakdownProps): string;
/**
 * The components a MetricBreakdown draws with that look different per platform. The web
 * builds are the defaults; the iOS and Android entries pass their own, so the docs'
 * platform columns render them truthfully (a device resolves them by platform either way).
 */
export interface MetricBreakdownParts {
    Chip?: typeof WebChip;
}
export declare function createMetricBreakdown(skin: ChartSkin, parts?: MetricBreakdownParts): (props: MetricBreakdownProps) => import("react").JSX.Element;
//# sourceMappingURL=metric-breakdown.shared.d.ts.map