@cronus-ui/ui 0.6.0

package/dist/charts/bar-chart.js

@@ -0,0 +1,432 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { localPoint } from "@visx/event";
+import { ParentSize } from "@visx/responsive";
+import { scaleBand, scaleLinear } from "@visx/scale";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_ANIMATION_EASING } from "./animation.js";
+import { topSquareCenterY } from "./bar-squares-layout.js";
+import { forEachChartChild, isChartClipPassthrough, isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, renderKeyedChartLayers, resolveChartChildElement, } from "./chart-child-passthrough.js";
+import { ChartProvider } from "./chart-context.js";
+import { isGradientDefComponent, isPatternDefComponent } from "./chart-defs.js";
+import { shortDateFmt } from "./chart-formatters.js";
+import { DEFAULT_CHART_LIFECYCLE, resolveRestingChartPhase, } from "./chart-phase.js";
+import { BarLoadingSkeleton } from "./loading-sweep.js";
+import { extractReferenceAreaConfigs } from "./reference-area-config.js";
+import { useScheduledTooltip } from "./use-scheduled-tooltip.js";
+import { buildYScalesForLines, getPrimaryYScale, normalizeYAxisId, wrapSingleYScale, } from "./y-axis-scales.js";
+/** Skeleton bars to show when `status="loading"` and `data` is empty. */
+const FALLBACK_LOADING_BARS = 12;
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+// Extract bar configs from children synchronously
+function extractBarConfigs(children) {
+    const configs = [];
+    forEachChartChild(children, (child) => {
+        const childType = child.type;
+        // Bar-depth surface layers (BarDepthBack/Front, BarPulse) carry a
+        // `dataKey` to pair with a Bar but are not series themselves — skip them
+        // so they don't inflate the series count and shrink the real bars.
+        if (childType.__isBarDepthLayer) {
+            return;
+        }
+        const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+        const props = child.props;
+        const isBarComponent = componentName === "Bar" ||
+            componentName === "BarSquares" ||
+            (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+        if (isBarComponent && props?.dataKey) {
+            // Use stroke for tooltip dot color if provided, otherwise fall back to fill
+            // This allows gradient/pattern fills to have a solid dot color
+            const dotColor = props.stroke || props.fill || "var(--chart-line-primary)";
+            configs.push({
+                dataKey: props.dataKey,
+                stroke: dotColor,
+                strokeWidth: 0,
+                yAxisId: props.yAxisId,
+            });
+        }
+    });
+    return configs;
+}
+function ChartInner(props) {
+    const { width, height } = props;
+    if (width < 10 || height < 10) {
+        return null;
+    }
+    return _jsx(ChartCore, { ...props });
+}
+const ChartCore = memo(function ChartCore({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature = "", barGap, barWidthProp, orientation, stacked, stackGap, squareSnap, children, containerRef, onPhaseChange, status, }) {
+    const { tooltipData, setTooltipData, scheduleTooltip, clearTooltip } = useScheduledTooltip();
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const hoveredBarIndex = tooltipData?.index ?? null;
+    const isHorizontal = orientation === "horizontal";
+    // Extract bar configs synchronously from children
+    const lines = useMemo(() => extractBarConfigs(children), [children]);
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    // Category accessor function - returns string for categorical scale
+    const categoryAccessor = useCallback((d) => {
+        const value = d[xDataKey];
+        if (value instanceof Date) {
+            return shortDateFmt.format(value);
+        }
+        return String(value ?? "");
+    }, [xDataKey]);
+    // For compatibility with ChartContext, provide a Date-based xAccessor
+    const xAccessorDate = useCallback((d) => {
+        const value = d[xDataKey];
+        if (value instanceof Date) {
+            return value;
+        }
+        return new Date();
+    }, [xDataKey]);
+    // Category scale (band) - for the categorical axis
+    const categoryScale = useMemo(() => {
+        const domain = data.map((d) => categoryAccessor(d));
+        const range = isHorizontal ? [0, innerHeight] : [0, innerWidth];
+        return scaleBand({
+            range,
+            domain,
+            padding: barGap,
+        });
+    }, [innerWidth, innerHeight, data, categoryAccessor, barGap, isHorizontal]);
+    // Band width for bars - use prop if provided, otherwise use scale's bandwidth
+    const bandWidth = barWidthProp ?? categoryScale.bandwidth();
+    // Compute max value considering stacking
+    const maxValue = useMemo(() => {
+        if (stacked) {
+            // For stacked bars, sum all values at each data point
+            let max = 0;
+            for (const d of data) {
+                let sum = 0;
+                for (const line of lines) {
+                    const value = d[line.dataKey];
+                    if (typeof value === "number") {
+                        sum += value;
+                    }
+                }
+                if (sum > max) {
+                    max = sum;
+                }
+            }
+            return max || 100;
+        }
+        // For grouped bars, find max single value
+        let max = 0;
+        for (const line of lines) {
+            for (const d of data) {
+                const value = d[line.dataKey];
+                if (typeof value === "number" && value > max) {
+                    max = value;
+                }
+            }
+        }
+        return max || 100;
+    }, [data, lines, stacked]);
+    // Value scale (linear) - for the value axis
+    const valueScale = useMemo(() => {
+        const range = isHorizontal ? [0, innerWidth] : [innerHeight, 0];
+        return scaleLinear({
+            range,
+            domain: [0, maxValue * 1.1],
+            nice: true,
+        });
+    }, [innerWidth, innerHeight, maxValue, isHorizontal]);
+    const yScales = useMemo(() => {
+        if (isHorizontal) {
+            return wrapSingleYScale(valueScale);
+        }
+        return buildYScalesForLines({
+            lines,
+            data,
+            innerHeight,
+            resolveDomain: (dataKeys) => {
+                let max = 0;
+                for (const d of data) {
+                    for (const key of dataKeys) {
+                        const value = d[key];
+                        if (typeof value === "number" && value > max) {
+                            max = value;
+                        }
+                    }
+                }
+                return [0, (max || 100) * 1.1];
+            },
+        });
+    }, [data, innerHeight, isHorizontal, lines, valueScale]);
+    const primaryYScale = getPrimaryYScale(yScales, valueScale);
+    // Compute stack offsets for stacked bars
+    const stackOffsets = useMemo(() => {
+        if (!stacked) {
+            return undefined;
+        }
+        const offsets = new Map();
+        for (let i = 0; i < data.length; i++) {
+            const d = data[i];
+            if (!d) {
+                continue;
+            }
+            const pointOffsets = new Map();
+            let cumulative = 0;
+            for (const line of lines) {
+                pointOffsets.set(line.dataKey, cumulative);
+                const value = d[line.dataKey];
+                if (typeof value === "number") {
+                    cumulative += value;
+                }
+            }
+            offsets.set(i, pointOffsets);
+        }
+        return offsets;
+    }, [data, lines, stacked]);
+    // Column width for tooltip indicator
+    const columnWidth = useMemo(() => {
+        if (data.length < 1) {
+            return 0;
+        }
+        return isHorizontal ? innerHeight / data.length : innerWidth / data.length;
+    }, [innerWidth, innerHeight, data.length, isHorizontal]);
+    // Pre-compute labels for ticker animation
+    const dateLabels = useMemo(() => data.map((d) => categoryAccessor(d)), [data, categoryAccessor]);
+    // Create a fake time scale for compatibility with ChartContext
+    const fakeTimeScale = useMemo(() => {
+        const now = Date.now();
+        const start = now - data.length * 24 * 60 * 60 * 1000;
+        const scale = {
+            ...categoryScale,
+            domain: () => [new Date(start), new Date(now)],
+            range: () => [0, innerWidth],
+            invert: (x) => new Date(start + (x / innerWidth) * (now - start)),
+            copy: () => scale,
+        };
+        return scale;
+    }, [categoryScale, innerWidth, data.length]);
+    // Animation timing — replay when motion settings change
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature
+    useEffect(() => {
+        setRevealEpoch((n) => n + 1);
+        setIsLoaded(false);
+        // While loading, hold the skeleton (no reveal, no interaction). When
+        // status flips to "ready" this effect re-runs and plays the grow reveal.
+        if (status === "loading") {
+            return;
+        }
+        const staggerMs = data.length > 1 ? animationDuration * 0.4 : 0;
+        const timer = setTimeout(() => {
+            setIsLoaded(true);
+        }, animationDuration + staggerMs);
+        return () => clearTimeout(timer);
+    }, [animationDuration, revealSignature, status]);
+    useEffect(() => {
+        onPhaseChange?.(isLoaded ? "ready" : "revealing");
+    }, [isLoaded, onPhaseChange]);
+    // Mouse move handler
+    const handleMouseMove = useCallback((event) => {
+        const point = localPoint(event);
+        if (!point) {
+            return;
+        }
+        const pos = isHorizontal ? point.y - margin.top : point.x - margin.left;
+        // Find which band the mouse is over
+        const bandIndex = Math.floor(pos / columnWidth);
+        const clampedIndex = Math.max(0, Math.min(data.length - 1, bandIndex));
+        const d = data[clampedIndex];
+        if (!d) {
+            return;
+        }
+        // Calculate positions for each bar
+        const yPositions = {};
+        const xPositions = {};
+        const barPos = categoryScale(categoryAccessor(d)) ?? 0;
+        if (isHorizontal) {
+            // Horizontal bars: dots at end of bar (x = value), centered vertically in band
+            const seriesCount = lines.length;
+            const groupGap = seriesCount > 1 ? 4 : 0;
+            const individualBarHeight = seriesCount > 0 ? (bandWidth - groupGap * (seriesCount - 1)) / seriesCount : bandWidth;
+            if (stacked) {
+                // Stacked horizontal: all bars same y, x at cumulative end
+                let cumulative = 0;
+                for (const line of lines) {
+                    const value = d[line.dataKey];
+                    if (typeof value === "number") {
+                        cumulative += value;
+                        const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? valueScale;
+                        xPositions[line.dataKey] = axisScale(cumulative) ?? 0;
+                        yPositions[line.dataKey] = barPos + bandWidth / 2;
+                    }
+                }
+            }
+            else {
+                // Grouped horizontal: each bar at its own y position
+                lines.forEach((line, idx) => {
+                    const value = d[line.dataKey];
+                    if (typeof value === "number") {
+                        const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? valueScale;
+                        xPositions[line.dataKey] = axisScale(value) ?? 0;
+                        yPositions[line.dataKey] =
+                            barPos + idx * (individualBarHeight + groupGap) + individualBarHeight / 2;
+                    }
+                });
+            }
+        }
+        else if (stacked) {
+            // Vertical stacked bars
+            let cumulative = 0;
+            let seriesIdx = 0;
+            for (const line of lines) {
+                const value = d[line.dataKey];
+                if (typeof value === "number") {
+                    cumulative += value;
+                    const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? primaryYScale;
+                    const gapOffset = seriesIdx * stackGap;
+                    yPositions[line.dataKey] = (axisScale(cumulative) ?? 0) - gapOffset;
+                    seriesIdx++;
+                }
+            }
+        }
+        else {
+            // Vertical grouped bars
+            const seriesCount = lines.length;
+            const groupGap = seriesCount > 1 ? 4 : 0;
+            const individualBarWidth = seriesCount > 0 ? (bandWidth - groupGap * (seriesCount - 1)) / seriesCount : bandWidth;
+            lines.forEach((line, idx) => {
+                const value = d[line.dataKey];
+                if (typeof value === "number") {
+                    const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? primaryYScale;
+                    const baselineY = axisScale(0) ?? innerHeight;
+                    const valueY = axisScale(value) ?? 0;
+                    const barLengthPx = baselineY - valueY;
+                    if (squareSnap && !isHorizontal && value > 0) {
+                        yPositions[line.dataKey] = topSquareCenterY({
+                            baselineY,
+                            barLengthPx,
+                            squareSize: individualBarWidth,
+                            gap: squareSnap.squareGap,
+                            fit: squareSnap.fit,
+                        });
+                    }
+                    else {
+                        yPositions[line.dataKey] = valueY;
+                    }
+                    xPositions[line.dataKey] =
+                        barPos + idx * (individualBarWidth + groupGap) + individualBarWidth / 2;
+                }
+            });
+        }
+        // Tooltip position: for horizontal, position at max bar end; for vertical, center of band
+        let tooltipX;
+        if (isHorizontal) {
+            // Position tooltip at the end of the longest bar
+            const maxX = Math.max(...Object.values(xPositions), 0);
+            tooltipX = maxX;
+        }
+        else {
+            tooltipX = barPos + bandWidth / 2;
+        }
+        scheduleTooltip({
+            point: d,
+            index: clampedIndex,
+            x: tooltipX,
+            yPositions,
+            xPositions: Object.keys(xPositions).length > 0 ? xPositions : undefined,
+        });
+    }, [
+        categoryScale,
+        valueScale,
+        data,
+        lines,
+        margin.left,
+        margin.top,
+        categoryAccessor,
+        columnWidth,
+        bandWidth,
+        isHorizontal,
+        stacked,
+        stackGap,
+        scheduleTooltip,
+        yScales,
+        primaryYScale,
+        squareSnap,
+        innerHeight,
+    ]);
+    const handleMouseLeave = useCallback(() => {
+        clearTooltip();
+    }, [clearTooltip]);
+    const canInteract = isLoaded;
+    // Separate children into defs, pre-overlay, and post-overlay
+    const defsChildren = [];
+    const clipExcludedChildren = [];
+    const underlayChildren = [];
+    const preOverlayChildren = [];
+    const postOverlayChildren = [];
+    forEachChartChild(children, (child) => {
+        const resolvedChild = resolveChartChildElement(child);
+        if (isGradientDefComponent(child)) {
+            defsChildren.push(child);
+        }
+        else if (isPatternDefComponent(child)) {
+            preOverlayChildren.push(child);
+        }
+        else if (isPostOverlayComponent(resolvedChild)) {
+            postOverlayChildren.push(resolvedChild);
+        }
+        else if (isClipExcludedComponent(resolvedChild)) {
+            clipExcludedChildren.push(isChartClipPassthrough(child.type) ? resolvedChild : child);
+        }
+        else if (isUnderlayComponent(resolvedChild)) {
+            underlayChildren.push(resolvedChild);
+        }
+        else {
+            preOverlayChildren.push(child);
+        }
+    });
+    const referenceAreas = useMemo(() => extractReferenceAreaConfigs(children), [children]);
+    const contextValue = {
+        ...DEFAULT_CHART_LIFECYCLE,
+        chartPhase: resolveRestingChartPhase(status),
+        chartStatus: status,
+        data,
+        renderData: data,
+        xScale: fakeTimeScale,
+        yScale: isHorizontal ? valueScale : primaryYScale,
+        yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        isLoaded,
+        animationDuration,
+        animationEasing,
+        enterTransition,
+        revealEpoch,
+        xAccessor: xAccessorDate,
+        dateLabels,
+        // Bar-specific properties
+        barScale: categoryScale,
+        bandWidth,
+        hoveredBarIndex,
+        barXAccessor: categoryAccessor,
+        orientation,
+        stacked,
+        stackOffsets,
+        squareSnap,
+    };
+    return (_jsx(ChartProvider, { value: contextValue, children: _jsxs("svg", { "aria-hidden": "true", className: "overflow-visible", height: height, width: width, children: [defsChildren.length > 0 && _jsx("defs", { children: defsChildren }), _jsx("rect", { fill: "transparent", height: height, width: width, x: 0, y: 0 }), _jsxs("g", { onMouseLeave: canInteract ? handleMouseLeave : undefined, onMouseMove: canInteract ? handleMouseMove : undefined, style: { cursor: canInteract ? "crosshair" : "default" }, transform: `translate(${margin.left},${margin.top})`, children: [_jsx("rect", { fill: "transparent", height: innerHeight, width: innerWidth, x: 0, y: 0 }), renderKeyedChartLayers(clipExcludedChildren), renderKeyedChartLayers(underlayChildren), status === "loading" ? (_jsx(BarLoadingSkeleton, { barCount: data.length || FALLBACK_LOADING_BARS, innerHeight: innerHeight, innerWidth: innerWidth })) : (renderKeyedChartLayers(preOverlayChildren)), renderKeyedChartLayers(postOverlayChildren)] })] }) }));
+});
+export function BarChart({ data, xDataKey = "name", margin: marginProp, animationDuration = 1100, animationEasing = DEFAULT_ANIMATION_EASING, enterTransition, revealSignature, aspectRatio = "2 / 1", className = "", barGap = 0.2, barWidth, orientation = "vertical", stacked = false, stackGap = 0, squareSnap, children, onPhaseChange, status = "ready", }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    return (_jsx("div", { "data-slot": "bar-chart", className: cn("relative w-full overflow-visible", className), ref: containerRef, style: { aspectRatio }, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(ChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, barGap: barGap, barWidthProp: barWidth, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, margin: margin, onPhaseChange: onPhaseChange, orientation: orientation, revealSignature: revealSignature, squareSnap: squareSnap, stacked: stacked, stackGap: stackGap, status: status, width: width, xDataKey: xDataKey, children: children })) }) }));
+}
+BarChart.displayName = "BarChart";
+export default BarChart;
+//# sourceMappingURL=bar-chart.js.map

package/dist/charts/bar-depth-geometry.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared 3D bar-depth geometry — the single source of truth for the
+ * perspective math used by BOTH `<Bar perspective>` (which shrinks a
+ * bar's front-face top) AND the bar-depth surfaces (`<BarDepthBack>`'s side +
+ * lid). Keeping the formula here means the front face and the 3D lid can never
+ * drift out of alignment.
+ */
+/** Hard ceiling on side-face thickness in px. Capped further by the column gap
+ * so depth never bleeds past the next bar's leading edge. */
+export declare const BAR_DEPTH_MAX_PX = 7;
+/** The side parallelogram's back edge lifts by `depth * this ratio`, giving a
+ * subtle head-on perspective slope. */
+export declare const BAR_DEPTH_PERSPECTIVE_RATIO = 0.45;
+/**
+ * Maximum side-face depth in px for a chart, clamped so depth never spills past
+ * the gap between bars. `stepWidth` is d3-scaleBand's `step()` (bandwidth +
+ * gap); `bandWidth` is a single bar's width. Returns 0 for gapless/dense charts.
+ */
+export declare function barDepthMaxDepth(stepWidth: number, bandWidth: number): number;
+/**
+ * Per-bar side-face depth + perspective rise.
+ *
+ * - `absOffset` ∈ [0, 1]: the bar's normalized distance from the chart's
+ *   horizontal center. 0 = dead center (no depth); 1 = chart edge (full depth).
+ * - `naturalHeight`: the bar's pixel height. Depth is capped by it so a short
+ *   bar's side never reads wider than the bar is tall.
+ * - `maxDepth`: from `barDepthMaxDepth`.
+ */
+export declare function barDepthAndRise(absOffset: number, naturalHeight: number, maxDepth: number): {
+    depth: number;
+    perspectiveRise: number;
+};
+//# sourceMappingURL=bar-depth-geometry.d.ts.map

package/dist/charts/bar-depth-geometry.js

@@ -0,0 +1,38 @@
+/**
+ * Shared 3D bar-depth geometry — the single source of truth for the
+ * perspective math used by BOTH `<Bar perspective>` (which shrinks a
+ * bar's front-face top) AND the bar-depth surfaces (`<BarDepthBack>`'s side +
+ * lid). Keeping the formula here means the front face and the 3D lid can never
+ * drift out of alignment.
+ */
+/** Hard ceiling on side-face thickness in px. Capped further by the column gap
+ * so depth never bleeds past the next bar's leading edge. */
+export const BAR_DEPTH_MAX_PX = 7;
+/** The side parallelogram's back edge lifts by `depth * this ratio`, giving a
+ * subtle head-on perspective slope. */
+export const BAR_DEPTH_PERSPECTIVE_RATIO = 0.45;
+/**
+ * Maximum side-face depth in px for a chart, clamped so depth never spills past
+ * the gap between bars. `stepWidth` is d3-scaleBand's `step()` (bandwidth +
+ * gap); `bandWidth` is a single bar's width. Returns 0 for gapless/dense charts.
+ */
+export function barDepthMaxDepth(stepWidth, bandWidth) {
+    const gap = Math.max(0, stepWidth - bandWidth);
+    return Math.min(bandWidth * 0.22, Math.max(0, gap - 1), BAR_DEPTH_MAX_PX);
+}
+/**
+ * Per-bar side-face depth + perspective rise.
+ *
+ * - `absOffset` ∈ [0, 1]: the bar's normalized distance from the chart's
+ *   horizontal center. 0 = dead center (no depth); 1 = chart edge (full depth).
+ * - `naturalHeight`: the bar's pixel height. Depth is capped by it so a short
+ *   bar's side never reads wider than the bar is tall.
+ * - `maxDepth`: from `barDepthMaxDepth`.
+ */
+export function barDepthAndRise(absOffset, naturalHeight, maxDepth) {
+    const offset = Math.min(1, Math.max(0, absOffset));
+    const cappedMaxDepth = Math.min(maxDepth, Math.max(0, naturalHeight));
+    const depth = offset * cappedMaxDepth;
+    return { depth, perspectiveRise: depth * BAR_DEPTH_PERSPECTIVE_RATIO };
+}
+//# sourceMappingURL=bar-depth-geometry.js.map

package/dist/charts/bar-depth.d.ts

@@ -0,0 +1,157 @@
+import { type ReactNode } from "react";
+export interface BarDepthEntry {
+    label: string;
+    /** Index in the original `data` array — used for stagger calc. NOT the
+     * index in this entries list. */
+    dataIndex: number;
+    /** Original datum reference — handed back to `colorAccessor` /
+     * `segmentsAccessor` so consumers can color or split bars without
+     * bar-depth knowing the data shape. */
+    datum: Record<string, unknown>;
+    /** True when this bar is the active bar (`dataIndex === activeIndex`).
+     * Used only by `<BarPulse>`; geometry is identical regardless. */
+    isActive: boolean;
+    /** True when the bar's value is negative — the bar extends downward from
+     * the baseline. The lid still sits at the baseline; the side parallelogram
+     * grows downward instead of upward. */
+    isNegative: boolean;
+    /** y of the chart's baseline (= `yScale(0)`). For positive bars this equals
+     * `bottomY`; for negative bars it equals `topY`. Used as the grow-from
+     * anchor for both the clipPath (side face) and the glass rect. */
+    baselineY: number;
+    bandX: number;
+    bandWidth: number;
+    /** Visual top of the bar in screen Y (smaller y = higher on screen). */
+    topY: number;
+    /** Visual bottom of the bar in screen Y. */
+    bottomY: number;
+    barHeight: number;
+    /** Un-trimmed natural pixel height of the bar (= `|baselineY - yScale(value)|`).
+     * Segment heights are scaled against this so they line up with `<Bar>`. */
+    naturalHeight: number;
+    /** Pixels subtracted from the bar's visual top (and added to `topY`) so the
+     * lid's back edge lands at `yScale(value)` regardless of depth. */
+    topYTrim: number;
+    /** Side-face thickness in px (0 = dead-center bar / dense chart). */
+    depth: number;
+    perspectiveRise: number;
+    isRightOfCenter: boolean;
+}
+/** One segment of a stacked bar, in stack order bottom→top. The values across
+ * all segments should sum to the bar's value; bar-depth uses the proportions
+ * to pick segment boundaries that line up with the front face's stacking. */
+export interface BarDepthSegment {
+    value: number;
+    color: string;
+}
+/** Resolve a per-datum color, falling back to the shared `color` default. */
+type ColorAccessor = (datum: Record<string, unknown>, index: number) => string;
+interface BarDepthContextValue {
+    segmentsAccessor?: (datum: Record<string, unknown>) => BarDepthSegment[] | null | undefined;
+    /** Opacity (0–1) of the baseline contact shadow. 0 removes it. */
+    groundShadow?: number;
+    /** Minimum bar height in px — floors short/zero bars so they stay visible.
+     * Match the value passed to `<Bar minBarHeight>`. */
+    minBarHeight?: number;
+}
+export interface BarDepthProviderProps extends BarDepthContextValue {
+    children: ReactNode;
+}
+/**
+ * Provides shared bar-depth configuration to every depth surface beneath it.
+ * Wrap a `<BarChart>` whose children include `<BarDepthBack>` /
+ * `<BarDepthFront>` / `<BarPulse>` with this provider to:
+ *   - split stacked bars into per-segment side faces (`segmentsAccessor`),
+ *   - tune the baseline contact shadow (`groundShadow`, default 0.26; 0 = off),
+ *   - floor short/zero bars so they stay visible (`minBarHeight`; pair with the
+ *     same value on `<Bar minBarHeight>`).
+ *
+ * Because the glass gradient is chart-wide (one Y-anchored ramp shared by the
+ * front face and the side glass), the provider is the single source of truth —
+ * so the surfaces can never disagree.
+ */
+export declare function BarDepthProvider({ segmentsAccessor, groundShadow, minBarHeight, children, }: BarDepthProviderProps): import("react").JSX.Element;
+export declare namespace BarDepthProvider {
+    var displayName: string;
+}
+/**
+ * Compute per-bar 3D depth geometry from chart context.
+ *
+ * Memoized on the chart's scales + data, so calling this from sibling layers
+ * within the same chart is essentially free after the first settles. Returns
+ * one entry per renderable bar; bars with no resolvable height are excluded.
+ *
+ * Negative-value bars are kept — `isNegative` flips the entry's geometry so
+ * the side parallelogram and lid render in the correct direction.
+ *
+ * Exported for advanced consumers that want to render custom layers aligned
+ * with the same geometry (e.g. labels above each bar's top face).
+ */
+export declare function useBarDepthEntries(dataKey: string, activeIndex?: number): BarDepthEntry[];
+export interface BarDepthBackProps {
+    /** Key in data for the bar value. Match the sibling `<Bar dataKey>`. */
+    dataKey: string;
+    /** Solid color for the side + top faces. Default: var(--chart-line-primary). */
+    color?: string;
+    /** Per-bar color override; takes precedence over `color` when provided. */
+    colorAccessor?: ColorAccessor;
+}
+/**
+ * Renders the back surfaces (side + top faces) of the 3D bar effect.
+ *
+ * Place BEFORE the `<Bar>` elements in `<BarChart>` children so the bar's
+ * solid front face occludes any depth that would extend into an adjacent
+ * column. Skips bars at chart center (depth ≈ 0) and dense charts.
+ *
+ * For stacked bars, wrap the `<BarChart>` in a
+ * `<BarDepthProvider segmentsAccessor={...}>` so the side face splits into
+ * per-segment parallelograms and the lid color matches the topmost segment.
+ */
+export declare function BarDepthBack({ dataKey, color, colorAccessor, }: BarDepthBackProps): import("react").JSX.Element;
+export declare namespace BarDepthBack {
+    var displayName: string;
+}
+export interface BarDepthFrontProps {
+    /** Key in data for the bar value. Match the sibling `<Bar dataKey>`. */
+    dataKey: string;
+}
+/**
+ * Renders the front surface: a glossy glass sheen over the bar's solid fill.
+ * Place AFTER the `<Bar>` elements in `<BarChart>` children so the gradient
+ * sits on top of the bar.
+ *
+ * Reads `segmentsAccessor` from the surrounding `<BarDepthProvider>` (if any)
+ * via `useBarDepthEntries`, so the glass rectangle's `topY` automatically
+ * matches the lid+side's trim. No prop wiring required.
+ */
+export declare function BarDepthFront({ dataKey }: BarDepthFrontProps): import("react").JSX.Element;
+export declare namespace BarDepthFront {
+    var displayName: string;
+}
+export interface BarPulseProps {
+    /** Key in data for the bar value. Match the sibling `<Bar dataKey>`. */
+    dataKey: string;
+    /** Index (in the data array) of the bar to pulse. */
+    activeIndex?: number;
+    /** Suppress the sweep while keeping the bar's 3D + glass treatment. */
+    pulsePaused?: boolean;
+}
+/**
+ * Vertical wave that sweeps from a bar's root (baseline) toward its tip on a
+ * continuous loop, painted across the bar's full 3D silhouette (front face +
+ * lid + visible side). Reads as a heartbeat pulse flowing up the column for
+ * positive bars and down for negative bars — useful for marking a live or
+ * in-progress value without adding any fixed element.
+ *
+ * Select the bar via `activeIndex`. Set `pulsePaused` to freeze it. Place
+ * AFTER `<BarDepthFront />` so the wave brightens on top of the glass.
+ *
+ * Performance: at most one clipped `<motion.rect>` with a single Y translate
+ * per frame (no per-frame paint of gradient stops, no SVG filters).
+ */
+export declare function BarPulse({ dataKey, activeIndex, pulsePaused }: BarPulseProps): import("react").JSX.Element | null;
+export declare namespace BarPulse {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=bar-depth.d.ts.map