import { JSX } from 'react';

/**
 * AreaChart — themed wrapper over recharts `AreaChart`.
 *
 * Plots one filled area per entry in `categories`, colored from `colors`
 * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all
 * areas share a stackId. When `width` is provided the chart renders at that
 * fixed size without a ResponsiveContainer; otherwise it fills its parent.
 */
export declare function AreaChart({ data, index, categories, colors, height, width, stack, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;

/**
 * BarChart — themed wrapper over recharts `BarChart`.
 *
 * Plots one bar series per entry in `categories`, colored from `colors`
 * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all
 * bars share a stackId. When `width` is provided the chart renders at that
 * fixed size without a ResponsiveContainer; otherwise it fills its parent.
 */
export declare function BarChart({ data, index, categories, colors, height, width, stack, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;

/**
 * Shared props for the cartesian chart family (Area, Bar, Line) and Radar.
 *
 * Each chart plots one series per entry in `categories`, reading values from the
 * matching key on every row, and uses `index` for the category axis.
 */
export declare interface CartesianChartProps {
    /** Rows of data to plot. */
    data: ChartData;
    /** Row key used for the x-axis (cartesian) or angle axis (radar). */
    index: string;
    /** Row keys to plot, one series each. */
    categories: string[];
    /** Series colors, cycled per category. Defaults to {@link DEFAULT_CHART_COLORS}. */
    colors?: string[];
    /** Chart height in pixels. Defaults to 300. */
    height?: number;
    /**
     * Fixed chart width in pixels. When set, the chart renders at this explicit
     * width WITHOUT a ResponsiveContainer (useful for tests/SSR). When omitted,
     * the chart fills its parent via a ResponsiveContainer.
     */
    width?: number;
    /** Stack all series on a shared stackId instead of grouping them. */
    stack?: boolean;
    /** Render the legend. Defaults to true. */
    showLegend?: boolean;
    /** Render the cartesian grid. Defaults to true. */
    showGrid?: boolean;
    /** Render the tooltip. Defaults to true. */
    showTooltip?: boolean;
    /** Format numeric values for tooltip/axis display. */
    valueFormatter?: (value: number) => string;
    /** Extra class name applied to the chart wrapper. */
    className?: string;
}

/** A `var(--tempest-chart-…)` reference, so the value follows the active theme. */
export declare type ChartColorToken = string;

/**
 * @tempest-limits props-count — these are the recharts wrapper's surface, and each
 * prop maps to one recharts element the wrapper renders: data/index/categories to
 * the series, colors to Cell, showLegend/showGrid/showTooltip to
 * Legend/CartesianGrid/Tooltip, valueFormatter to the tick and tooltip formatters.
 * Cutting the list means the caller drops to raw recharts for whatever was cut,
 * which is the thing the wrapper exists to avoid.
 */
/**
 * Tabular data consumed by every chart: an array of rows, where each row maps a
 * column key to a string (label) or number (value).
 */
export declare type ChartData = Array<Record<string, string | number>>;

/**
 * Fallback palette: six visually distinct hex colors (blue, green, amber,
 * violet, pink, cyan) in cycle order.
 *
 * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet
 * imported, a non-browser environment (tests, build scripts), or a host page that
 * dropped the tokens. Exported so callers can start from it and pass a tweaked
 * array to any chart's `colors` prop.
 */
export declare const DEFAULT_CHART_COLORS: string[];

/** How many steps the diverging token scale has, midpoint included. */
export declare const DIVERGING_STEP_COUNT = 9;

/**
 * Build a polarity scale over the diverging tokens.
 *
 * Each arm is scaled against its **own** distance from the centre, so an asymmetric
 * domain (say −5…+80) still uses the full cool arm for its small negatives. Scaling
 * both arms by the wider one — the easy mistake — would collapse every negative
 * into the step next to the midpoint and hide the sign entirely.
 *
 * @example
 * const color = divergingScale({ min: -12, max: 40 });   // centre 0
 * const budget = divergingScale({ min: 80, max: 130, center: 100 });
 *
 * @param options - The data domain and the neutral centre.
 * @returns A function from value to a CSS colour reference.
 */
export declare function divergingScale(options: DivergingScaleOptions): (value: number) => ChartColorToken;

export declare interface DivergingScaleOptions {
    /** Lowest value in the data. */
    min: number;
    /** Highest value in the data. */
    max: number;
    /**
     * The value that means "no deviation". Default `0`.
     *
     * It is a parameter because the interesting midpoint is often not zero — a
     * budget variance diverges around the target, not around nothing.
     */
    center?: number;
}

/**
 * LineChart — themed wrapper over recharts `LineChart`.
 *
 * Plots one line per entry in `categories`, colored from `colors` (cycling
 * the `--tempest-chart-*` theme tokens by default). `stack` is accepted for API parity
 * but does not visually stack lines. When `width` is provided the chart renders
 * at that fixed size without a ResponsiveContainer; otherwise it fills its
 * parent.
 */
export declare function LineChart({ data, index, categories, colors, height, width, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;

/**
 * First sequential step that clears 2:1 against the chart surface.
 *
 * A sequential scale may let its near-zero end recede into the surface — on a
 * heatmap that is exactly what "almost nothing" should look like. An **ordinal**
 * scale may not: every step is a discrete mark someone has to see. Starting an
 * ordinal ramp here is the difference.
 */
export declare const ORDINAL_START_STEP = 3;

/**
 * PieChart — themed wrapper over recharts `PieChart`.
 *
 * Renders one slice per row, reading the numeric value from `category` and the
 * label from `index`. Each slice is colored from `colors` (cycling
 * the `--tempest-chart-*` theme tokens by default). When `donut` is set the pie gets a
 * non-zero inner radius. When `width` is provided the chart renders at that
 * fixed size without a ResponsiveContainer; otherwise it fills its parent.
 */
export declare function PieChart({ data, category, index, colors, height, width, donut, showLegend, showTooltip, valueFormatter, className, }: PieChartProps): JSX.Element;

/**
 * Props for the {@link PieChart} component.
 */
export declare interface PieChartProps {
    /** Rows of data to plot, one slice each. */
    data: ChartData;
    /** Row key holding the numeric slice value. */
    category: string;
    /** Row key holding the slice name/label. */
    index: string;
    /** Slice colors, cycled per slice. Defaults to {@link DEFAULT_CHART_COLORS}. */
    colors?: string[];
    /** Chart height in pixels. Defaults to 300. */
    height?: number;
    /**
     * Fixed chart width in pixels. When set, the chart renders at this explicit
     * width WITHOUT a ResponsiveContainer (useful for tests/SSR).
     */
    width?: number;
    /** Render as a donut (non-zero inner radius) instead of a full pie. */
    donut?: boolean;
    /** Render the legend. Defaults to true. */
    showLegend?: boolean;
    /** Render the tooltip. Defaults to true. */
    showTooltip?: boolean;
    /** Format numeric values for tooltip display. */
    valueFormatter?: (value: number) => string;
    /** Extra class name applied to the chart wrapper. */
    className?: string;
}

/**
 * RadarChart — themed wrapper over recharts `RadarChart`.
 *
 * Plots one radar polygon per entry in `categories`, colored from `colors`
 * (cycling the `--tempest-chart-*` theme tokens by default). `index` drives the angle
 * axis. When `width` is provided the chart renders at that fixed size without a
 * ResponsiveContainer; otherwise it fills its parent.
 */
export declare function RadarChart({ data, index, categories, colors, height, width, showLegend, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;

/**
 * Read one piece of chart chrome (`--tempest-chart-grid` / `--tempest-chart-axis`).
 *
 * @param part - Which chrome token to read.
 * @param element - Element to resolve against. Default `<html>`.
 * @param fallback - Value returned when the token is unset.
 * @returns The resolved color, or `fallback`.
 */
export declare function resolveChartChrome(part: "grid" | "axis", element?: Element | null, fallback?: string): string;

/**
 * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.
 *
 * Respects `--tempest-chart-count` when the theme declares one (`createTheme`
 * writes it), so a six-color brand palette is read as six and not padded with the
 * SDK's leftover `-7`/`-8` defaults. Otherwise it walks the tokens and stops at
 * the first unset one. Returns {@link DEFAULT_CHART_COLORS} when nothing is
 * resolvable.
 *
 * @param element - Element to resolve the tokens against. Default `<html>`; pass
 *   a subtree root when a section carries a scoped theme.
 * @returns Literal color strings in cycle order.
 */
export declare function resolveChartColors(element?: Element | null): string[];

/**
 * Every step of a token scale, in order — for rendering a legend.
 *
 * A continuous scale needs a legend showing the ramp with its end labels; without
 * one the reader has no way to turn a colour back into a number.
 *
 * @param kind - Which scale.
 * @returns The token references, lightest/coolest first.
 */
export declare function scaleSteps(kind: "sequential" | "diverging"): ChartColorToken[];

/** How many steps the sequential token scale has. */
export declare const SEQUENTIAL_STEP_COUNT = 7;

/**
 * Build a magnitude scale over the sequential tokens.
 *
 * Returns `var(--tempest-chart-sequential-N)` rather than a hex string, so a
 * heatmap painted once follows the theme — including dark mode, whose steps are
 * chosen for the dark surface rather than flipped.
 *
 * @example
 * const color = sequentialScale({ min: 0, max: 250 });
 * <rect fill={color(value)} />
 *
 * @param options - The data domain, and whether every step must stay visible.
 * @returns A function from value to a CSS colour reference.
 */
export declare function sequentialScale(options: SequentialScaleOptions): (value: number) => ChartColorToken;

export declare interface SequentialScaleOptions {
    /** Lowest value in the data. */
    min: number;
    /** Highest value in the data. */
    max: number;
    /**
     * Keep every step visible against the surface, for discrete ordered marks.
     *
     * Off by default: a heatmap *wants* its near-zero cells to recede. Turn it on
     * for tiers, funnel stages or anything where each step is its own mark.
     */
    ordinal?: boolean;
}

/**
 * Theme-aware series colors for a chart.
 *
 * Resolves the `--tempest-chart-*` tokens on mount and again whenever the theme
 * attribute flips, so switching to dark re-colors the series instead of leaving
 * light-theme colors on a dark canvas. Passing `explicit` short-circuits the
 * whole thing — an explicit `colors` prop always wins and no observer is set up.
 *
 * @param explicit - Colors passed by the caller. When present, returned as-is.
 * @param element - Element to resolve tokens against. Default `<html>`.
 * @returns Colors in cycle order.
 *
 * @example
 * ```tsx
 * function Sales({ data }: { data: ChartDatum[] }) {
 *   const colors = useChartColors();
 *   return <BarChart data={data} colors={colors} />;
 * }
 * ```
 */
export declare function useChartColors(explicit?: string[], element?: Element | null): string[];

export { }