@cronus-ui/ui 0.6.0

package/dist/charts/chart-context.d.ts

@@ -0,0 +1,199 @@
+import type { scaleBand, scaleLinear, scaleTime } from "@visx/scale";
+type ScaleLinear<Output, _Input = number> = ReturnType<typeof scaleLinear<Output>>;
+type ScaleTime<Output, _Input = Date | number> = ReturnType<typeof scaleTime<Output>>;
+type ScaleBand<Domain extends {
+    toString(): string;
+}> = ReturnType<typeof scaleBand<Domain>>;
+import type { Transition } from "motion/react";
+import { type Dispatch, type ReactNode, type RefObject, type SetStateAction } from "react";
+import type { ChartPhase, ChartStatus } from "./chart-phase.js";
+import type { ReferenceAreaConfig } from "./reference-area-config.js";
+import type { ChartSelection } from "./use-chart-interaction.js";
+import type { YDomain } from "./y-domain-utils.js";
+export declare const chartCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    linePrimary: string;
+    lineSecondary: string;
+    crosshair: string;
+    grid: string;
+    indicatorColor: string;
+    indicatorSecondaryColor: string;
+    markerBackground: string;
+    markerBorder: string;
+    markerForeground: string;
+    badgeBackground: string;
+    badgeForeground: string;
+    segmentBackground: string;
+    segmentLine: string;
+    brushBorder: string;
+    tooltipBackground: string;
+};
+/** Default scatter series colors from the chart palette (`--chart-1` … `--chart-5`). */
+export declare const defaultScatterColors: readonly ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface TooltipData {
+    /** The data point being hovered */
+    point: Record<string, unknown>;
+    /** Index in the data array */
+    index: number;
+    /** X position in pixels (relative to chart area) */
+    x: number;
+    /** Y positions for each line, keyed by dataKey */
+    yPositions: Record<string, number>;
+    /** X positions for each series (for grouped bars), keyed by dataKey */
+    xPositions?: Record<string, number>;
+}
+export interface LineConfig {
+    dataKey: string;
+    stroke: string;
+    strokeWidth: number;
+    /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+}
+/**
+ * Hover/selection state — every field here changes on mouse movement.
+ * Lives in its own context so cold consumers (Grid, YAxis, PatternArea, …)
+ * can subscribe to the stable slice and skip re-rendering on every hover.
+ */
+export interface ChartHoverContextValue {
+    tooltipData: TooltipData | null;
+    setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+    /** Current drag/pinch selection range */
+    selection?: ChartSelection | null;
+    /** Clear the current selection */
+    clearSelection?: () => void;
+    /** Index of currently hovered bar */
+    hoveredBarIndex?: number | null;
+    /** Setter for hovered bar index */
+    setHoveredBarIndex?: (index: number | null) => void;
+    /** Index of currently hovered candle */
+    hoveredCandleIndex?: number | null;
+    /** Setter for hovered candle index */
+    setHoveredCandleIndex?: (index: number | null) => void;
+}
+export interface ChartContextValue extends ChartHoverContextValue {
+    data: Record<string, unknown>[];
+    /** Decimated subset for SVG path rendering; equals `data` when no decimation is needed. */
+    renderData: Record<string, unknown>[];
+    xScale: ScaleTime<number, number>;
+    /** Primary (left) y-scale — alias for `yScales[DEFAULT_Y_AXIS_ID]`. */
+    yScale: ScaleLinear<number, number>;
+    /** Per-axis y-scales keyed by `yAxisId`. */
+    yScales: Record<string, ScaleLinear<number, number>>;
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+    margin: Margin;
+    columnWidth: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    lines: LineConfig[];
+    /** {@link ReferenceArea} bands — drives y-axis label colors in range. */
+    referenceAreas: ReferenceAreaConfig[];
+    chartPhase: ChartPhase;
+    chartStatus: ChartStatus;
+    /** Centered label while `chartPhase` shows loading chrome. */
+    loadingLabel?: string;
+    /** Y-domain tween duration when transitioning loading ↔ ready (ms). */
+    yDomainTweenDuration: number;
+    /** Nice’d y-domains per axis from skeleton data (placeholder). */
+    yDomainSkeletonByAxis: Record<string, YDomain>;
+    /** Nice’d y-domains per axis from the current target data. */
+    yDomainTargetByAxis: Record<string, YDomain>;
+    isLoaded: boolean;
+    animationDuration: number;
+    /** CSS easing for clip-reveal / line draw (cartesian charts). */
+    animationEasing?: string;
+    /** Motion enter transition (spring or tween) — drives clip reveal when spring. */
+    enterTransition?: Transition;
+    /** Increments when enter animation should replay. */
+    revealEpoch?: number;
+    /** Fired when a one-shot loading pulse (exit / enter) completes. */
+    notifyLoadingPulseComplete?: () => void;
+    xAccessor: (d: Record<string, unknown>) => Date;
+    dateLabels: string[];
+    /** Active brush zoom range — when set, axis ticks align to visible data rows. */
+    xDomain?: [Date, Date];
+    /** Full dataset length when brush zoom is enabled (for zoom vs full-range detection). */
+    xDomainSlotCount?: number;
+    /** Band scale for categorical x-axis (bar charts) */
+    barScale?: ScaleBand<string>;
+    /** Width of each bar band */
+    bandWidth?: number;
+    /** X accessor for bar charts (returns string instead of Date) */
+    barXAccessor?: (d: Record<string, unknown>) => string;
+    /** Bar chart orientation */
+    orientation?: "vertical" | "horizontal";
+    /** Whether bars are stacked */
+    stacked?: boolean;
+    /** Stack offsets: Map of data index -> Map of dataKey -> cumulative offset */
+    stackOffsets?: Map<number, Map<string, number>>;
+    /** Squares variant — snap tooltip to top square and size ring dots. */
+    squareSnap?: {
+        squareGap: number;
+        groupGap?: number;
+        fit?: boolean;
+    };
+    /** `SeriesBar` dataKeys in tree order, for grouped columns at each x */
+    composedBarDataKeys?: string[];
+    /** Target bar width in px (Recharts `barSize` style). */
+    composedBarSize?: number;
+    /** Max bar width in px (Recharts `maxBarSize`). */
+    composedMaxBarSize?: number;
+    /** Gap between grouped `SeriesBar` columns in px. */
+    composedBarGap?: number;
+    /** When true, `SeriesBar` segments stack in child order at each x. */
+    composedStacked?: boolean;
+    /** Per-row cumulative offsets for stacked `SeriesBar` (data index → dataKey → offset). */
+    composedStackOffsets?: Map<number, Map<string, number>>;
+    /** Vertical gap in px between stacked `SeriesBar` segments. Default: 0 */
+    composedStackGap?: number;
+}
+/**
+ * Stable slice of the chart context — everything that doesn't change on hover
+ * (data, scales, dimensions, animation state, layout config). Consumers that
+ * subscribe via `useChartStable()` skip re-renders on every mouse move.
+ */
+export type ChartStableContextValue = Omit<ChartContextValue, keyof ChartHoverContextValue>;
+declare const ChartStableContext: import("react").Context<ChartStableContextValue | null>;
+/**
+ * Splits the merged `value` into a stable slice and a volatile hover slice,
+ * publishing each to its own context. Each slice is memoized on its own
+ * field identities, so changing `tooltipData` does not bust the stable
+ * slice — consumers of `useChartStable()` skip re-renders on hover.
+ */
+export declare function ChartProvider({ children, value, }: {
+    children: ReactNode;
+    value: ChartContextValue;
+}): import("react").JSX.Element;
+/**
+ * Stable slice — data, scales, dimensions, animation state, layout config.
+ * Subscribers skip re-renders on hover (the hover slice lives in a separate
+ * context). Prefer this in cold consumers like axes, grid, pattern fills.
+ */
+export declare function useChartStable(): ChartStableContextValue;
+/** Y-scale for a series axis (`yAxisId` on Line / Area / YAxis). */
+export declare function useYScale(yAxisId?: string | number): ScaleLinear<number, number>;
+/**
+ * Hover slice — tooltipData, selection, hovered bar / candle indices.
+ * Subscribers re-render on every mouse move. Use only when the component
+ * actually reads hover state.
+ */
+export declare function useChartHover(): ChartHoverContextValue;
+/**
+ * Merged stable + hover context. Convenient for components that need both,
+ * but re-renders on every hover (because hover changes). Prefer
+ * `useChartStable()` or `useChartHover()` for hot consumers that only need
+ * one slice.
+ */
+export declare function useChart(): ChartContextValue;
+export default ChartStableContext;
+//# sourceMappingURL=chart-context.d.ts.map

package/dist/charts/chart-context.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from "react";
+import { DEFAULT_Y_AXIS_ID } from "./y-axis-scales.js";
+// CSS variable references for theming
+export const chartCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    foregroundMuted: "var(--chart-foreground-muted)",
+    label: "var(--chart-label)",
+    linePrimary: "var(--chart-line-primary)",
+    lineSecondary: "var(--chart-line-secondary)",
+    crosshair: "var(--chart-crosshair)",
+    grid: "var(--chart-grid)",
+    indicatorColor: "var(--chart-indicator-color)",
+    indicatorSecondaryColor: "var(--chart-indicator-secondary-color)",
+    markerBackground: "var(--chart-marker-background)",
+    markerBorder: "var(--chart-marker-border)",
+    markerForeground: "var(--chart-marker-foreground)",
+    badgeBackground: "var(--chart-marker-badge-background)",
+    badgeForeground: "var(--chart-marker-badge-foreground)",
+    segmentBackground: "var(--chart-segment-background)",
+    segmentLine: "var(--chart-segment-line)",
+    brushBorder: "var(--chart-brush-border)",
+    tooltipBackground: "var(--chart-tooltip-background)",
+};
+/** Default scatter series colors from the chart palette (`--chart-1` … `--chart-5`). */
+export const defaultScatterColors = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+];
+const ChartStableContext = createContext(null);
+const ChartHoverContext = createContext(null);
+/**
+ * Splits the merged `value` into a stable slice and a volatile hover slice,
+ * publishing each to its own context. Each slice is memoized on its own
+ * field identities, so changing `tooltipData` does not bust the stable
+ * slice — consumers of `useChartStable()` skip re-renders on hover.
+ */
+export function ChartProvider({ children, value, }) {
+    const stable = useMemo(() => ({
+        data: value.data,
+        renderData: value.renderData,
+        xScale: value.xScale,
+        yScale: value.yScale,
+        yScales: value.yScales,
+        width: value.width,
+        height: value.height,
+        innerWidth: value.innerWidth,
+        innerHeight: value.innerHeight,
+        margin: value.margin,
+        columnWidth: value.columnWidth,
+        containerRef: value.containerRef,
+        lines: value.lines,
+        referenceAreas: value.referenceAreas,
+        chartPhase: value.chartPhase,
+        chartStatus: value.chartStatus,
+        loadingLabel: value.loadingLabel,
+        yDomainTweenDuration: value.yDomainTweenDuration,
+        yDomainSkeletonByAxis: value.yDomainSkeletonByAxis,
+        yDomainTargetByAxis: value.yDomainTargetByAxis,
+        isLoaded: value.isLoaded,
+        animationDuration: value.animationDuration,
+        animationEasing: value.animationEasing,
+        enterTransition: value.enterTransition,
+        revealEpoch: value.revealEpoch,
+        notifyLoadingPulseComplete: value.notifyLoadingPulseComplete,
+        xAccessor: value.xAccessor,
+        dateLabels: value.dateLabels,
+        xDomain: value.xDomain,
+        xDomainSlotCount: value.xDomainSlotCount,
+        barScale: value.barScale,
+        bandWidth: value.bandWidth,
+        barXAccessor: value.barXAccessor,
+        orientation: value.orientation,
+        stacked: value.stacked,
+        stackOffsets: value.stackOffsets,
+        composedBarDataKeys: value.composedBarDataKeys,
+        composedBarSize: value.composedBarSize,
+        composedMaxBarSize: value.composedMaxBarSize,
+        composedBarGap: value.composedBarGap,
+        composedStacked: value.composedStacked,
+        composedStackOffsets: value.composedStackOffsets,
+        composedStackGap: value.composedStackGap,
+    }), [
+        value.data,
+        value.renderData,
+        value.xScale,
+        value.yScale,
+        value.yScales,
+        value.width,
+        value.height,
+        value.innerWidth,
+        value.innerHeight,
+        value.margin,
+        value.columnWidth,
+        value.containerRef,
+        value.lines,
+        value.referenceAreas,
+        value.chartPhase,
+        value.chartStatus,
+        value.loadingLabel,
+        value.yDomainTweenDuration,
+        value.yDomainSkeletonByAxis,
+        value.yDomainTargetByAxis,
+        value.isLoaded,
+        value.animationDuration,
+        value.animationEasing,
+        value.enterTransition,
+        value.revealEpoch,
+        value.notifyLoadingPulseComplete,
+        value.xAccessor,
+        value.dateLabels,
+        value.xDomain,
+        value.xDomainSlotCount,
+        value.barScale,
+        value.bandWidth,
+        value.barXAccessor,
+        value.orientation,
+        value.stacked,
+        value.stackOffsets,
+        value.composedBarDataKeys,
+        value.composedBarSize,
+        value.composedMaxBarSize,
+        value.composedBarGap,
+        value.composedStacked,
+        value.composedStackOffsets,
+        value.composedStackGap,
+    ]);
+    const hover = useMemo(() => ({
+        tooltipData: value.tooltipData,
+        setTooltipData: value.setTooltipData,
+        selection: value.selection,
+        clearSelection: value.clearSelection,
+        hoveredBarIndex: value.hoveredBarIndex,
+        setHoveredBarIndex: value.setHoveredBarIndex,
+        hoveredCandleIndex: value.hoveredCandleIndex,
+        setHoveredCandleIndex: value.setHoveredCandleIndex,
+    }), [
+        value.tooltipData,
+        value.setTooltipData,
+        value.selection,
+        value.clearSelection,
+        value.hoveredBarIndex,
+        value.setHoveredBarIndex,
+        value.hoveredCandleIndex,
+        value.setHoveredCandleIndex,
+    ]);
+    return (_jsx(ChartStableContext.Provider, { value: stable, children: _jsx(ChartHoverContext.Provider, { value: hover, children: children }) }));
+}
+/**
+ * Stable slice — data, scales, dimensions, animation state, layout config.
+ * Subscribers skip re-renders on hover (the hover slice lives in a separate
+ * context). Prefer this in cold consumers like axes, grid, pattern fills.
+ */
+export function useChartStable() {
+    const context = useContext(ChartStableContext);
+    if (!context) {
+        throw new Error("useChartStable must be used within a ChartProvider. " +
+            "Make sure your component is wrapped in <LineChart>, <AreaChart>, <BarChart>, or <ComposedChart>.");
+    }
+    return context;
+}
+/** Y-scale for a series axis (`yAxisId` on Line / Area / YAxis). */
+export function useYScale(yAxisId) {
+    const { yScales, yScale } = useChartStable();
+    const id = yAxisId == null || yAxisId === "" ? DEFAULT_Y_AXIS_ID : String(yAxisId);
+    return yScales[id] ?? yScale;
+}
+/**
+ * Hover slice — tooltipData, selection, hovered bar / candle indices.
+ * Subscribers re-render on every mouse move. Use only when the component
+ * actually reads hover state.
+ */
+export function useChartHover() {
+    const context = useContext(ChartHoverContext);
+    if (!context) {
+        throw new Error("useChartHover must be used within a ChartProvider. " +
+            "Make sure your component is wrapped in <LineChart>, <AreaChart>, <BarChart>, or <ComposedChart>.");
+    }
+    return context;
+}
+/**
+ * Merged stable + hover context. Convenient for components that need both,
+ * but re-renders on every hover (because hover changes). Prefer
+ * `useChartStable()` or `useChartHover()` for hot consumers that only need
+ * one slice.
+ */
+export function useChart() {
+    const stable = useChartStable();
+    const hover = useChartHover();
+    // Identity changes on every hover (hover is the volatile slice) — that's
+    // fine for consumers using this merged hook; they explicitly opted in to
+    // re-rendering on hover.
+    return { ...stable, ...hover };
+}
+export default ChartStableContext;
+//# sourceMappingURL=chart-context.js.map

package/dist/charts/chart-defs.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare function getChartChildComponentName(child: ReactElement): string;
+/** @visx/pattern default exports use short names (e.g. `Lines`); also match *Pattern* displayNames. */
+export declare function isPatternDefComponent(child: ReactElement): boolean;
+export declare function isGradientDefComponent(child: ReactElement): boolean;
+export declare function isChartDefsComponent(child: ReactElement): boolean;
+/** Split hoisted defs: @visx/pattern nodes already wrap `<defs>` and render at the svg root. */
+export declare function partitionChartDefNodes(defNodes: ReactElement[]): {
+    patternDefNodes: ReactElement[];
+    gradientDefNodes: ReactElement[];
+};
+export declare function collectChartDefsChildren(children: ReactNode): ReactElement[];
+//# sourceMappingURL=chart-defs.d.ts.map

package/dist/charts/chart-defs.js

@@ -0,0 +1,49 @@
+import { Children, isValidElement } from "react";
+export function getChartChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+const VISX_PATTERN_COMPONENT_NAMES = new Set([
+    "Lines",
+    "Circles",
+    "Waves",
+    "Hexagons",
+    "Path",
+    "Pattern",
+]);
+/** @visx/pattern default exports use short names (e.g. `Lines`); also match *Pattern* displayNames. */
+export function isPatternDefComponent(child) {
+    const name = getChartChildComponentName(child);
+    return name.includes("Pattern") || VISX_PATTERN_COMPONENT_NAMES.has(name);
+}
+export function isGradientDefComponent(child) {
+    const name = getChartChildComponentName(child);
+    return name.includes("Gradient") || name === "LinearGradient" || name === "RadialGradient";
+}
+export function isChartDefsComponent(child) {
+    return isPatternDefComponent(child) || isGradientDefComponent(child);
+}
+/** Split hoisted defs: @visx/pattern nodes already wrap `<defs>` and render at the svg root. */
+export function partitionChartDefNodes(defNodes) {
+    const patternDefNodes = [];
+    const gradientDefNodes = [];
+    for (const node of defNodes) {
+        if (isPatternDefComponent(node)) {
+            patternDefNodes.push(node);
+        }
+        else {
+            gradientDefNodes.push(node);
+        }
+    }
+    return { patternDefNodes, gradientDefNodes };
+}
+export function collectChartDefsChildren(children) {
+    const defNodes = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && isChartDefsComponent(child)) {
+            defNodes.push(child);
+        }
+    });
+    return defNodes;
+}
+//# sourceMappingURL=chart-defs.js.map

package/dist/charts/chart-formatters.d.ts

@@ -0,0 +1,10 @@
+export declare const shortDateFmt: Intl.DateTimeFormat;
+export declare const weekdayDateFmt: Intl.DateTimeFormat;
+export declare const hmsTimeFmt: Intl.DateTimeFormat;
+/** Wall-clock HH:MM:SS for live axes — client-only, after mount. */
+export declare const liveHmsFmt: Intl.DateTimeFormat;
+export declare const intFmt: {
+    (value: number): string;
+    (value: number | bigint): string;
+};
+//# sourceMappingURL=chart-formatters.d.ts.map

package/dist/charts/chart-formatters.js

@@ -0,0 +1,28 @@
+export const shortDateFmt = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+});
+export const weekdayDateFmt = new Intl.DateTimeFormat("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+});
+export const hmsTimeFmt = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "UTC",
+});
+/** Wall-clock HH:MM:SS for live axes — client-only, after mount. */
+export const liveHmsFmt = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+});
+// `Intl.NumberFormat.prototype.format` is a bound getter — safe to extract.
+export const intFmt = new Intl.NumberFormat("en-US").format;
+//# sourceMappingURL=chart-formatters.js.map

package/dist/charts/chart-legend-hover.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+interface ChartLegendHoverContextValue {
+    hoveredIndex: number | null;
+    setHoveredIndex: (index: number | null) => void;
+}
+export declare function ChartLegendHoverProvider({ hoveredIndex, onHoverChange, children, }: {
+    hoveredIndex: number | null;
+    onHoverChange: (index: number | null) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useChartLegendHover(): ChartLegendHoverContextValue;
+export {};
+//# sourceMappingURL=chart-legend-hover.d.ts.map

package/dist/charts/chart-legend-hover.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const ChartLegendHoverContext = createContext(null);
+export function ChartLegendHoverProvider({ hoveredIndex, onHoverChange, children, }) {
+    const value = useMemo(() => ({ hoveredIndex, setHoveredIndex: onHoverChange }), [hoveredIndex, onHoverChange]);
+    return (_jsx(ChartLegendHoverContext.Provider, { value: value, children: children }));
+}
+export function useChartLegendHover() {
+    const context = useContext(ChartLegendHoverContext);
+    return (context ?? {
+        hoveredIndex: null,
+        setHoveredIndex: () => {
+            /* noop outside ChartLegendHoverProvider */
+        },
+    });
+}
+//# sourceMappingURL=chart-legend-hover.js.map

package/dist/charts/chart-legend.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+export interface LegendItem {
+    /** Display label */
+    label: string;
+    /** Current value */
+    value: number;
+    /** Maximum value (for progress bar calculation) */
+    maxValue?: number;
+    /** Item color */
+    color: string;
+}
+export interface ChartLegendProps {
+    /** Legend items to display */
+    items: LegendItem[];
+    /** Currently hovered index (for highlight effect) */
+    hoveredIndex?: number | null;
+    /** Callback when an item is hovered */
+    onHover?: (index: number | null) => void;
+    /** Show progress bars. Default: false */
+    showProgress?: boolean;
+    /** Show color marker dot. Default: true */
+    showMarker?: boolean;
+    /** Show numeric value column. Default: true */
+    showValue?: boolean;
+    /** Show percentage value. Default: true when showProgress is true */
+    showPercentage?: boolean;
+    /** Format function for displaying values. Default: toLocaleString() */
+    formatValue?: (value: number) => string;
+    /** Title shown above the legend */
+    title?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Class name for the title */
+    titleClassName?: string;
+    /** Class name for each legend item */
+    itemClassName?: string;
+    /** Class name for the label */
+    labelClassName?: string;
+    /** Class name for the value */
+    valueClassName?: string;
+    /** Custom render function for legend items */
+    renderItem?: (props: {
+        item: LegendItem;
+        index: number;
+        isHovered: boolean;
+        isFaded: boolean;
+        percentage: number;
+    }) => ReactNode;
+}
+export declare function ChartLegend({ items, hoveredIndex, onHover, showProgress, showMarker, showValue, showPercentage, formatValue, title, className, titleClassName, itemClassName, labelClassName, valueClassName, renderItem, }: ChartLegendProps): import("react").JSX.Element;
+export declare namespace ChartLegend {
+    var displayName: string;
+}
+export default ChartLegend;
+//# sourceMappingURL=chart-legend.d.ts.map

package/dist/charts/chart-legend.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { intFmt } from "./chart-formatters.js";
+function ProgressItem({ item, showMarker, showValue, showPercentage, formatValue, labelClassName, valueClassName, }) {
+    const percentage = item.maxValue ? (item.value / item.maxValue) * 100 : 0;
+    // Note: item.color must remain inline style as it's dynamic data
+    return (_jsxs("div", { className: "grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-1", children: [showMarker ? (_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: item.color } })) : null, _jsx("span", { className: cn("text-legend-foreground", labelClassName), children: item.label }), showValue ? (_jsx("span", { className: cn("text-legend-muted-foreground", valueClassName), children: formatValue(item.value) })) : null, _jsx("div", { className: "col-span-full h-1.5 overflow-hidden rounded-full bg-legend-track", children: _jsx("div", { className: "h-full rounded-full transition-all duration-500", style: { backgroundColor: item.color, width: `${percentage}%` } }) }), showPercentage ? (_jsxs("span", { className: "col-start-3 text-legend-muted-foreground text-xs tabular-nums", children: [percentage.toFixed(0), "%"] })) : null] }));
+}
+function SimpleItem({ item, showMarker, showValue, formatValue, labelClassName, valueClassName, }) {
+    // Note: item.color must remain inline style as it's dynamic data
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [showMarker && (_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: item.color } })), _jsx("span", { className: cn("flex-1 text-legend-foreground", labelClassName), children: item.label }), showValue ? (_jsx("span", { className: cn("text-legend-muted-foreground", valueClassName), children: formatValue(item.value) })) : null] }));
+}
+export function ChartLegend({ items, hoveredIndex = null, onHover, showProgress = false, showMarker = true, showValue = true, showPercentage, formatValue = intFmt, title, className = "", titleClassName = "text-sm font-semibold", itemClassName = "", labelClassName = "text-sm font-medium", valueClassName = "text-sm tabular-nums", renderItem, }) {
+    // Default showPercentage to true when showProgress is true
+    const displayPercentage = showPercentage ?? showProgress;
+    return (_jsxs("div", { className: cn("legend-container flex flex-col gap-2", className), children: [title && _jsx("h3", { className: cn("mb-1 text-legend-foreground", titleClassName), children: title }), items.map((item, i) => {
+                const percentage = item.maxValue ? (item.value / item.maxValue) * 100 : 0;
+                const isHovered = hoveredIndex === i;
+                const isFaded = hoveredIndex !== null && hoveredIndex !== i;
+                // Allow custom rendering
+                if (renderItem) {
+                    return (_jsx("div", { "data-hovered": isHovered ? "" : undefined, onMouseEnter: () => onHover?.(i), onMouseLeave: () => onHover?.(null), children: renderItem({ item, index: i, isHovered, isFaded, percentage }) }, `legend-${item.label}-${item.value}`));
+                }
+                return (_jsx("div", { className: cn("cursor-pointer rounded-lg px-2 py-1.5 transition-all duration-150 ease-out", isHovered && "bg-legend-muted", isFaded && "opacity-40", itemClassName), "data-hovered": isHovered ? "" : undefined, onMouseEnter: () => onHover?.(i), onMouseLeave: () => onHover?.(null), children: showProgress && item.maxValue ? (_jsx(ProgressItem, { formatValue: formatValue, item: item, labelClassName: labelClassName, showMarker: showMarker, showPercentage: displayPercentage, showValue: showValue, valueClassName: valueClassName })) : (_jsx(SimpleItem, { formatValue: formatValue, item: item, labelClassName: labelClassName, showMarker: showMarker, showValue: showValue, valueClassName: valueClassName })) }, `legend-${item.label}-${item.value}`));
+            })] }));
+}
+ChartLegend.displayName = "ChartLegend";
+export default ChartLegend;
+//# sourceMappingURL=chart-legend.js.map

package/dist/charts/chart-loading-label.d.ts

@@ -0,0 +1,10 @@
+export interface ChartLoadingLabelProps {
+    /** Label shown centered over the chart. */
+    text?: string;
+    className?: string;
+    /** Animate down, fade, and blur during loading → ready handoff. */
+    exiting?: boolean;
+}
+export declare function ChartLoadingLabel({ text, className, exiting, }: ChartLoadingLabelProps): import("react").JSX.Element | null;
+export default ChartLoadingLabel;
+//# sourceMappingURL=chart-loading-label.d.ts.map

package/dist/charts/chart-loading-label.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { cn } from "../lib/cn.js";
+import { LINE_LOADING_PULSE_EASE, LOADING_LABEL_EXIT_S, LOADING_LABEL_EXIT_Y_PX, } from "./line-loading-timing.js";
+import { ShimmeringText } from "./shimmering-text.js";
+export function ChartLoadingLabel({ text = "Loading", className, exiting = false, }) {
+    if (!text.trim()) {
+        return null;
+    }
+    return (_jsx(motion.div, { animate: {
+            y: exiting ? LOADING_LABEL_EXIT_Y_PX : 0,
+            opacity: exiting ? 0 : 1,
+            filter: exiting ? "blur(2px)" : "blur(0px)",
+        }, "aria-live": "polite", className: cn("pointer-events-none absolute inset-0 flex items-center justify-center", className), initial: false, role: "status", transition: {
+            duration: LOADING_LABEL_EXIT_S,
+            ease: [...LINE_LOADING_PULSE_EASE],
+        }, children: _jsx(ShimmeringText, { className: "font-medium text-sm tracking-wide [--color:var(--muted-foreground)] [--shimmering-color:var(--foreground)]", text: text }) }));
+}
+export default ChartLoadingLabel;
+//# sourceMappingURL=chart-loading-label.js.map