import "./breakdown.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface BreakdownItem {
    key: string;
    label: string;
    value: number;
    /**
     * One hue family per dimension reads best. Pass `var(--lotics-tone-<family>-solid)` so a theme
     * repaints it.
     */
    color: string;
}
/** Prop → `LoticsLocale.breakdown` → English default. */
export interface BreakdownLabels {
    more: (hidden: number) => string;
    less: string;
}
export interface BreakdownProps extends StyleProps {
    items: BreakdownItem[];
    /** The drilled segment, whose row's words take the accent. */
    selectedKey?: string | null;
    /** Press again to clear. Omit for an informational breakdown. */
    onSelect?: (key: string | null) => void;
    formatValue?: (n: number) => string;
    /**
     * The rest fold behind a toggle, keeping a long tail a fixed height so several align; the bar
     * always reflects all items.
     */
    maxRows?: number;
    labels?: Partial<BreakdownLabels>;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Composition of a large population, drillable: a stacked bar, then one row per segment. Selecting a
 * row filters the host's register; several side by side form a faceted overview. A drillable row is
 * one toggle (`aria-pressed`); the capped tail a `Collapsible`.
 */
export declare function Breakdown(props: BreakdownProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;