import "./pie_chart.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface PieChartSlice {
    label: string;
    value: number;
    /** Slice colour. Pass `var(--lotics-<family>-500)` and a theme repaints it. */
    color?: string;
}
export interface PieChartProps extends StyleProps {
    slices: PieChartSlice[];
    size?: number;
    showLegend?: boolean;
    formatNumber?: (n: number) => string;
    emptyLabel?: string;
    /** Caption under the center total. Pass `null` to hide the center. */
    centerLabel?: string | null;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A donut of labelled slices with its legend — the part-to-whole chart.
 *
 * The legend sits BESIDE the donut and drops beneath it in a narrow container.
 * That is a container query rather than a measurement: the width that decides it
 * is the chart's own, not the viewport's, and asking CSS means there is no first
 * frame drawn in the wrong arrangement.
 */
export declare function PieChart(props: PieChartProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;