import { MouseEventHandler, PointerEventHandler } from 'react';
/** Shared props for both legend item variants */
interface LegendItemProps {
    /** Series name shown as a label */
    name: string;
    /** Hex color string for the series indicator dot */
    color: string;
    /** Formatted value string to display */
    value: string;
    /** Optional unit label shown after the value (e.g. `"ms"`, `"%"`) */
    unit?: string;
    /** When `true`, renders the item at 50% opacity to indicate a deselected state */
    inactive?: boolean;
    /** Fired when a pointer enters the legend item — useful for highlighting the corresponding chart series */
    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
    /** Fired when a pointer leaves the legend item — useful for resetting chart series emphasis */
    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
    /** Fired when the legend item is clicked — useful for toggling series visibility */
    onClick?: MouseEventHandler<HTMLDivElement>;
    /** Optional className to customize legend item presentation */
    className?: string;
}
/**
 * Large legend item — stacked layout with a colored dot + series name on top
 * and a large value with an optional small unit below. Use for prominent
 * single-metric displays such as dashboard cards.
 */
declare function LargeItem({ color, value, name, unit, inactive, onPointerEnter, onPointerLeave, onClick, className, }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
/**
 * Small legend item — inline layout with a colored dot, series name, and value
 * on a single row. Use for compact legends below or beside a chart.
 */
declare function SmallItem({ color, value, name, inactive, onPointerEnter, onPointerLeave, onClick, className, }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
/**
 * ChartLegend — pre-built legend item components for use alongside a chart.
 *
 * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends
 * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards
 *
 * @example
 * ```tsx
 * <ChartLegend.SmallItem name="Requests" color="#086FFF" value="1,234" />
 * <ChartLegend.LargeItem name="Latency" color="#CF7EE9" value="42" unit="ms" inactive />
 * ```
 */
export declare const ChartLegend: {
    SmallItem: typeof SmallItem;
    LargeItem: typeof LargeItem;
};
export {};
//# sourceMappingURL=Legend.d.ts.map