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;
    /** Segment accent — one hue family per dimension reads best. Pass
     *  `var(--lotics-tone-<family>-solid)` and a theme repaints it. */
    color: string;
}
/** Expand/collapse labels for a capped breakdown (`maxRows`). Resolve
 *  prop → `LoticsLocale.breakdown` → English default. */
export interface BreakdownLabels {
    /** The expand affordance, given how many rows are currently hidden. */
    more: (hidden: number) => string;
    /** The collapse affordance. */
    less: string;
}
export interface BreakdownProps extends StyleProps {
    items: BreakdownItem[];
    /** The drilled-in segment. While set, the other segments dim. */
    selectedKey?: string | null;
    /** Press a segment to drill into it (press again to clear). Omit to
     * render an informational breakdown. */
    onSelect?: (key: string | null) => void;
    formatValue?: (n: number) => string;
    /** Cap the visible rows; the rest fold behind a "show more" toggle. Keeps a
     *  long-tail breakdown a fixed height (so several align in a row) while staying
     *  fully drillable on expand. The stacked bar always reflects ALL items. Omit
     *  to show every row. */
    maxRows?: number;
    /** Expand/collapse labels, over the locale pack's. */
    labels?: Partial<BreakdownLabels>;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Composition browser for LARGE populations — the answer to "what is my
 * stock made of, and let me drill into a slice". A stacked bar shows the
 * shares; below it, one pressable row per segment (swatch, label, count,
 * share). Selecting a segment dims the rest and (in the host) filters the
 * register underneath — the facet pattern for 10,000-record monitoring.
 * Several Breakdowns side by side (by type, by status, by site) compose a
 * full faceted overview; selections combine in the host's filter state.
 *
 * A drillable row is a Base UI `Toggle`, so "which slice am I in" is announced
 * as `aria-pressed` and styled off its own `data-pressed`; the capped tail is a
 * Base UI `Collapsible`, so the affordance announces what it controls.
 */
export declare function Breakdown(props: BreakdownProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;