import "./pie_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";
/**
 * The width a ring and its legend need, every name whole on its line: stacked, the ring or the widest legend
 * row — its swatch, its mark, its name, its figure and its share; with `beside` (the ring's size, in a readings
 * band), the ring and that row side by side. A `ReadingGrid` card's `ink`.
 */
export declare function pieChartInk(slices: readonly Pick<PieChartSlice, "label" | "value" | "leading">[], formatNumber: (n: number) => string, beside?: number): number;
export interface PieChartSlice {
    label: string;
    value: number;
    /** `var(--lotics-<family>-500)` lets a theme repaint it. */
    color?: string;
    /** The mark its legend row's name leads with, after its swatch, where the slice is someone or something with a
     *  face — a person's `Avatar`, a linked row's picture; unsized, a line's rung. Every row holds the slot where one
     *  has a mark. */
    leading?: ReactNode;
    /** What `onSelect` hands back; a keyed slice is pressable, by its segment and its legend row. */
    key?: string;
}
export interface PieChartProps extends StyleProps {
    slices: PieChartSlice[];
    size?: number;
    showLegend?: boolean;
    formatNumber?: (n: number) => string;
    emptyLabel?: string;
    /** `null` hides the center. */
    centerLabel?: string | null;
    /** The keyed slice whose condition narrows the rows the page lists; its legend row's words take the accent. */
    selectedKey?: string | null;
    /** Omit for an informational chart; with it each keyed slice — its segment and its legend row — is a
     *  toggle, pressed again to clear, as `BarChart`'s bars are. */
    onSelect?: (key: string | null) => void;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The legend sits beside the donut and drops beneath in a narrow container, by container query, so the
 *  chart's own width decides and no first frame is wrong. Ring and legend are one group at their own width,
 *  each count beside its name however wide the card. A legend name holds whole, over two lines where its
 *  row is short; `pieChartInk` is the width that seats every name on one. */
export declare function PieChart(props: PieChartProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;