import { type ColorTokens, type StyleProp, type ViewStyle } from "../../style/index.js";
import { type ChartSkin } from "../shared/types.js";
import { type BreakdownRow } from "../shared/breakdown-rows.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 under the headline (e.g. "Tokens issued"). */
    label: string;
    /** Secondary metric, top right (e.g. "1.39%"). */
    rate?: string;
    /** Caption under the rate (e.g. "Error rate"). */
    rateLabel?: string;
    rateSuccess?: boolean;
    rateWarning?: boolean;
    rateDestructive?: boolean;
    /** Trend series rendered as a Sparkline line strip under the header.
     *  Needs at least two points to draw. */
    spark?: number[];
    /** Unit suffix on the floating latest-value tag (e.g. "req/s"). */
    sparkUnit?: string;
    /** 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;
    /** Strip the card surface for nesting inside an existing card (mirrors Stats). */
    plain?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Outer layout composition only (width/flex within a parent), never a restyle hook. */
    style?: StyleProp<ViewStyle>;
}
export declare function rateColor(tokens: ColorTokens, p: MetricBreakdownProps): string;
export declare function createMetricBreakdown(skin: ChartSkin): (props: MetricBreakdownProps) => import("react").JSX.Element;
//# sourceMappingURL=metric-breakdown.shared.d.ts.map