import * as React from 'react';
import * as RechartsPrimitive from 'recharts';
import type { Payload as TooltipPayloadItem, ValueType as TooltipValueType, NameType as TooltipNameType } from 'recharts/types/component/DefaultTooltipContent';
import type { Payload as LegendPayloadItem } from 'recharts/types/component/DefaultLegendContent';
import { Card } from '../card';
declare const THEMES: {
    readonly light: "";
    readonly dark: ".dark";
};
export type ChartConfig = {
    [k in string]: {
        label?: React.ReactNode;
        icon?: React.ComponentType;
    } & ({
        color?: string;
        theme?: never;
    } | {
        color?: never;
        theme: Record<keyof typeof THEMES, string>;
    });
};
type ChartContextProps = {
    config: ChartConfig;
};
export type DashboardChartDatum = Record<string, string | number | null | undefined>;
export type DashboardChartSeries = {
    key: string;
    label?: React.ReactNode;
    type?: 'bar' | 'line' | 'area';
    stackId?: string;
    yAxisId?: string;
};
export type DashboardChartColors = string[] | Record<string, string>;
export type ChartPeriod = {
    value: string;
    label: string;
};
export type ChartBarSize = 'sm' | 'md' | 'lg' | 'xl' | number;
/** Curve interpolation type for line and area charts */
export type ChartCurveType = 'monotone' | 'linear' | 'step' | 'stepBefore' | 'stepAfter' | 'natural' | 'basis';
type ChartValueFormatter = (value: number | string) => string;
export type ChartErrorState = boolean | string | Error | React.ReactNode;
export type ChartStateProps = {
    isLoading?: boolean;
    error?: ChartErrorState;
    onRetry?: () => void;
    retryLabel?: React.ReactNode;
    emptyTitle?: React.ReactNode;
    emptyDescription?: React.ReactNode;
    errorTitle?: React.ReactNode;
    errorDescription?: React.ReactNode;
    loadingLabel?: React.ReactNode;
    stateClassName?: string;
};
export declare function useChart(): ChartContextProps;
/**
 * Root container for Recharts-based charts with theme-aware color injection.
 *
 * @description
 * Wraps Recharts' `ResponsiveContainer` and injects CSS custom properties
 * (`--color-*`) from a `ChartConfig` object, enabling full dark-mode
 * support without hard-coded hex values in chart elements.
 *
 * @ai-rules
 * 1. NEVER pass hex colors directly to Recharts elements (e.g., `fill="#4F46E5"`).
 *    Always use `fill="var(--color-keyName)"` referencing the injected CSS variables.
 * 2. This wrapper is REQUIRED to use `ChartTooltipContent` and `ChartLegendContent`.
 * 3. Set height via `className="h-[300px]"` on `ChartContainer`, not on Recharts components.
 * 4. Do NOT add another `<ResponsiveContainer>` — it is already included inside.
 */
declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
    config: ChartConfig;
    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
}): import("react/jsx-runtime").JSX.Element;
declare const ChartStyle: ({ id, config }: {
    id: string;
    config: ChartConfig;
}) => import("react/jsx-runtime").JSX.Element | null;
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<'div'> & {
    active?: boolean;
    payload?: TooltipPayloadItem<TooltipValueType, TooltipNameType>[];
    label?: React.ReactNode;
    labelFormatter?: (label: React.ReactNode, payload: TooltipPayloadItem<TooltipValueType, TooltipNameType>[]) => React.ReactNode;
    labelClassName?: string;
    hideLabel?: boolean;
    hideIndicator?: boolean;
    indicator?: 'line' | 'dot' | 'dashed';
    nameKey?: string;
    labelKey?: string;
    color?: string;
    formatter?: RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>['formatter'];
}): import("react/jsx-runtime").JSX.Element | null;
declare const ChartLegend: typeof RechartsPrimitive.Legend;
declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<'div'> & {
    payload?: LegendPayloadItem[];
    verticalAlign?: 'top' | 'middle' | 'bottom';
    hideIcon?: boolean;
    nameKey?: string;
}): import("react/jsx-runtime").JSX.Element | null;
export interface ChartCardProps extends Omit<React.ComponentProps<typeof Card>, 'title'> {
    title: React.ReactNode;
    description?: React.ReactNode;
    action?: React.ReactNode;
    footer?: React.ReactNode;
    contentClassName?: string;
}
declare function ChartCard({ title, description, action, footer, children, className, contentClassName, ...props }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
export interface DashboardBarChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    indexKey?: string;
    series?: DashboardChartSeries[];
    colors?: DashboardChartColors;
    barSize?: ChartBarSize;
    stacked?: boolean;
    showGrid?: boolean;
    showLegend?: boolean;
    valueFormatter?: ChartValueFormatter;
}
declare function DashboardBarChart({ data, config, indexKey, series, colors, barSize, stacked, showGrid, showLegend, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: DashboardBarChartProps): import("react/jsx-runtime").JSX.Element;
export interface DashboardLineChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    indexKey?: string;
    series?: DashboardChartSeries[];
    colors?: DashboardChartColors;
    showDots?: boolean;
    showGrid?: boolean;
    showLegend?: boolean;
    curveType?: ChartCurveType;
    strokeWidth?: number;
    valueFormatter?: ChartValueFormatter;
}
declare function DashboardLineChart({ data, config, indexKey, series, colors, showDots, showGrid, showLegend, curveType, strokeWidth, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: DashboardLineChartProps): import("react/jsx-runtime").JSX.Element;
export interface HorizontalBarChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    indexKey?: string;
    series?: DashboardChartSeries[];
    colors?: DashboardChartColors;
    barSize?: ChartBarSize;
    stacked?: boolean;
    categoryWidth?: number;
    showGrid?: boolean;
    showLegend?: boolean;
    valueFormatter?: ChartValueFormatter;
}
declare function HorizontalBarChart({ data, config, indexKey, series, colors, barSize, stacked, categoryWidth, showGrid, showLegend, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: HorizontalBarChartProps): import("react/jsx-runtime").JSX.Element;
export interface InteractiveTimeSeriesChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    indexKey?: string;
    series?: DashboardChartSeries[];
    colors?: DashboardChartColors;
    periods?: ChartPeriod[];
    defaultPeriod?: string;
    defaultSeries?: string;
    filterData?: (data: DashboardChartDatum[], period: string) => DashboardChartDatum[];
    showGrid?: boolean;
    showLegend?: boolean;
    showDots?: boolean;
    gradientFill?: boolean;
    curveType?: ChartCurveType;
    strokeWidth?: number;
    valueFormatter?: ChartValueFormatter;
}
declare function InteractiveTimeSeriesChart({ data, config, indexKey, series, colors, periods, defaultPeriod, defaultSeries, filterData, showGrid, showLegend, showDots, gradientFill, curveType, strokeWidth, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: InteractiveTimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;
export interface ComboMetricChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    indexKey?: string;
    series?: DashboardChartSeries[];
    colors?: DashboardChartColors;
    barSize?: ChartBarSize;
    showGrid?: boolean;
    showLegend?: boolean;
    gradientFill?: boolean;
    curveType?: ChartCurveType;
    valueFormatter?: ChartValueFormatter;
}
declare function ComboMetricChart({ data, config, indexKey, series, colors, barSize, showGrid, showLegend, gradientFill, curveType, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: ComboMetricChartProps): import("react/jsx-runtime").JSX.Element;
export interface DonutBreakdownChartProps extends Omit<React.ComponentProps<typeof ChartContainer>, 'children'>, ChartStateProps {
    data: DashboardChartDatum[];
    nameKey?: string;
    valueKey?: string;
    colors?: DashboardChartColors;
    centerLabel?: React.ReactNode;
    centerValue?: React.ReactNode;
    showLegend?: boolean;
    /** Inner radius as percentage string (e.g. "58%") or number */
    innerRadius?: string | number;
    /** Outer radius as percentage string (e.g. "82%") or number */
    outerRadius?: string | number;
}
declare function DonutBreakdownChart({ data, config, nameKey, valueKey, colors, centerLabel, centerValue, showLegend, innerRadius, outerRadius, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, ...props }: DonutBreakdownChartProps): import("react/jsx-runtime").JSX.Element;
export interface SparklineChartProps {
    /** Data array — each item must have the `dataKey` field */
    data: DashboardChartDatum[];
    /** Key to plot on the Y axis */
    dataKey: string;
    /** Color for the line/area — defaults to `var(--chart-1)` */
    color?: string;
    /** Show filled area under the line */
    filled?: boolean;
    /** Show the last data point as a dot */
    showEndDot?: boolean;
    /** Curve interpolation type */
    curveType?: ChartCurveType;
    /** Stroke width */
    strokeWidth?: number;
    className?: string;
}
/**
 * Minimal inline sparkline chart — no axes, no grid, no tooltip.
 * Ideal for embedding inside stat cards or table cells.
 *
 * @ai-rules
 * - Use `filled` for area-style sparklines.
 * - Keep `className` height small (e.g. `h-12` or `h-16`).
 * - Do NOT wrap in `ChartCard` — it is designed to be inline.
 */
declare function SparklineChart({ data, dataKey, color, filled, showEndDot, curveType, strokeWidth, className, }: SparklineChartProps): import("react/jsx-runtime").JSX.Element;
export interface RadarMetricChartProps extends ChartStateProps {
    /** Data array — each item is one axis point on the radar */
    data: DashboardChartDatum[];
    /** Key in each datum used as the axis label */
    labelKey: string;
    /**
     * Series to render. Each entry maps to one `<Radar>` element.
     * Use a single entry for a simple radar, multiple for comparison.
     */
    series: DashboardChartSeries[];
    /** Override colors per series key or as an ordered array */
    colors?: DashboardChartColors;
    /** Fill the radar polygon (default: true) */
    filled?: boolean;
    /** Fill opacity when `filled` is true (default: 0.25) */
    fillOpacity?: number;
    /** Show dots on each axis point (default: false) */
    showDots?: boolean;
    /** Show the polar grid lines (default: true) */
    showGrid?: boolean;
    /** Show the legend (default: true when multiple series) */
    showLegend?: boolean;
    /** Format axis tick values */
    valueFormatter?: ChartValueFormatter;
    className?: string;
}
declare function RadarMetricChart({ data, labelKey, series, colors, filled, fillOpacity, showDots, showGrid, showLegend, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, }: RadarMetricChartProps): import("react/jsx-runtime").JSX.Element;
export interface PieMetricChartProps extends ChartStateProps {
    /** Data array — each item is one slice */
    data: DashboardChartDatum[];
    /** Key in each datum used as the slice name/label */
    nameKey: string;
    /** Key in each datum used as the slice value */
    valueKey: string;
    /** Override colors as an ordered array or per-name map */
    colors?: DashboardChartColors;
    /** Outer radius of the pie (default: "80%") */
    outerRadius?: number | string;
    /** Inner radius — set > 0 to make a donut (default: 0) */
    innerRadius?: number | string;
    /** Show percentage labels inside/outside each slice (default: false) */
    showLabels?: boolean;
    /** Show the legend (default: true) */
    showLegend?: boolean;
    /**
     * Index of the slice to "explode" (offset outward).
     * Pass -1 or undefined to disable.
     */
    explodeIndex?: number;
    /** Offset distance for the exploded slice in px (default: 12) */
    explodeOffset?: number;
    /** Format tooltip values */
    valueFormatter?: ChartValueFormatter;
    className?: string;
}
declare function PieMetricChart({ data, nameKey, valueKey, colors, outerRadius, innerRadius, showLabels, showLegend, explodeIndex, explodeOffset, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, }: PieMetricChartProps): import("react/jsx-runtime").JSX.Element;
export interface RadialBarMetricChartProps extends ChartStateProps {
    /**
     * Data array. Each item should have a `name` field (for labels) and
     * the `dataKey` field (for values, 0–100 for percentage-based display).
     */
    data: DashboardChartDatum[];
    /** Key in each datum used as the bar value (default: "value") */
    dataKey?: string;
    /** Key in each datum used as the bar label (default: "name") */
    nameKey?: string;
    /** Override colors as an ordered array or per-name map */
    colors?: DashboardChartColors;
    /** Inner radius of the radial bar (default: "30%") */
    innerRadius?: number | string;
    /** Outer radius of the radial bar (default: "100%") */
    outerRadius?: number | string;
    /** Start angle in degrees (default: 90 — top) */
    startAngle?: number;
    /** End angle in degrees (default: -270 — full circle) */
    endAngle?: number;
    /** Show background track behind each bar (default: true) */
    showBackground?: boolean;
    /** Show the legend (default: true) */
    showLegend?: boolean;
    /** Format tooltip values */
    valueFormatter?: ChartValueFormatter;
    className?: string;
}
declare function RadialBarMetricChart({ data, dataKey, nameKey, colors, innerRadius, outerRadius, startAngle, endAngle, showBackground, showLegend, valueFormatter, isLoading, error, onRetry, retryLabel, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, className, }: RadialBarMetricChartProps): import("react/jsx-runtime").JSX.Element;
export interface GaugeChartThreshold {
    /** Upper bound of this zone (0–100) */
    value: number;
    /** Color for this zone */
    color: string;
    /** Optional label for this zone */
    label?: string;
}
export interface GaugeChartProps {
    /** Current value (must be within [min, max]) */
    value: number;
    /** Minimum value (default: 0) */
    min?: number;
    /** Maximum value (default: 100) */
    max?: number;
    /**
     * Color zones. Each threshold defines the upper bound of a zone.
     * Zones are evaluated in order; the first zone whose `value >= current %`
     * determines the active color.
     * If omitted, uses `--chart-1`.
     */
    thresholds?: GaugeChartThreshold[];
    /** Label shown below the value (e.g. "CPU Usage") */
    label?: React.ReactNode;
    /** Format the center value text (default: shows percentage) */
    valueFormatter?: (value: number, percent: number) => string;
    /** Show the needle indicator (default: true) */
    showNeedle?: boolean;
    className?: string;
}
declare function GaugeChart({ value, min, max, thresholds, label, valueFormatter, showNeedle, className, }: GaugeChartProps): import("react/jsx-runtime").JSX.Element;
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, ChartCard, DashboardBarChart, DashboardLineChart, HorizontalBarChart, InteractiveTimeSeriesChart, ComboMetricChart, DonutBreakdownChart, SparklineChart, RadarMetricChart, PieMetricChart, RadialBarMetricChart, GaugeChart, };