@cronus-ui/ui 0.6.0

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

@@ -0,0 +1,49 @@
+import { type PatternPresetId } from "./pattern-preset.js";
+export interface GradientStop {
+    offset: number;
+    color: string;
+}
+export interface BarSquaresProps {
+    dataKey: string;
+    yAxisId?: string | number;
+    /** Fill color, gradient url, or pattern url. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Tooltip dot / ring stroke color when fill is gradient/pattern */
+    stroke?: string;
+    /** Gap between stacked squares in pixels. Default: 3 */
+    squareGap?: number;
+    /** Corner radius as a fraction of square size (0 = flat, 0.5 = circle). Default: 0.25 */
+    squareRadius?: number;
+    /** Redistribute gap so columns fit bar height exactly */
+    squareFit?: boolean;
+    /** Apply bar-spanning gradient from gradientStops */
+    useGradient?: boolean;
+    gradientStops?: GradientStop[];
+    /** Pattern preset when fill is a pattern (for gradient tinting) */
+    patternPreset?: PatternPresetId;
+    animate?: boolean;
+    fadedOpacity?: number;
+    staggerDelay?: number;
+    groupGap?: number;
+}
+export interface BarColumnTrackProps {
+    /** Fill color or pattern url. Default: var(--chart-grid) */
+    fill?: string;
+    opacity?: number;
+    squareGap?: number;
+    /** Corner radius fraction (matches squares). Default: 0.25 */
+    squareRadius?: number;
+    groupGap?: number;
+    squareFit?: boolean;
+    staggerDelay?: number;
+}
+export declare function BarSquares(props: BarSquaresProps): import("react").JSX.Element | null;
+export declare namespace BarSquares {
+    var displayName: string;
+}
+export declare function BarColumnTrack(props: BarColumnTrackProps): import("react").JSX.Element | null;
+export declare namespace BarColumnTrack {
+    var displayName: string;
+}
+export default BarSquares;
+//# sourceMappingURL=bar-squares.d.ts.map

package/dist/charts/bar-squares.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useId, useMemo } from "react";
+import { computeSquareColumn } from "./bar-squares-layout.js";
+import { chartCssVars, useChart, useChartStable, useYScale } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { transitionWithDelay } from "./motion-utils.js";
+import { renderPatternPreset } from "./pattern-preset.js";
+function isPatternFill(fill) {
+    return fill.startsWith("url(");
+}
+/** Delay between stacked squares within one column (bottom → top). */
+function squareCascadeStepSeconds(enterTransition, animationDurationMs, squareCount) {
+    if (squareCount <= 1) {
+        return 0;
+    }
+    const durationMs = enterTransition?.type === "tween" && typeof enterTransition.duration === "number"
+        ? enterTransition.duration * 1000
+        : animationDurationMs;
+    const cascadeSpreadMs = durationMs * 0.4;
+    return cascadeSpreadMs / 1000 / (squareCount - 1);
+}
+function cascadeColumnTransition(enterTransition, animationDurationMs, columnIndex, columnStaggerDelay, squareCount) {
+    const cascadeStep = squareCascadeStepSeconds(enterTransition, animationDurationMs, squareCount);
+    const base = transitionWithDelay(enterTransition, columnIndex * columnStaggerDelay);
+    if (squareCount <= 1 || base.type !== "tween") {
+        return base;
+    }
+    const baseDuration = typeof base.duration === "number" ? base.duration : animationDurationMs / 1000;
+    return {
+        ...base,
+        duration: baseDuration + cascadeStep * (squareCount - 1),
+    };
+}
+function SquareColumn({ x, baselineY, barLengthPx, squareSize, squareGap, squareRadius, squareFit, fill, useGradient, gradientStops, patternPreset, index, isFaded, fadedOpacity, animate, staggerDelay, animationDuration, enterTransition, revealEpoch, }) {
+    const layout = useMemo(() => computeSquareColumn({
+        barLengthPx,
+        squareSize,
+        gap: squareGap,
+        fit: squareFit,
+    }), [barLengthPx, squareSize, squareGap, squareFit]);
+    const rx = squareSize * squareRadius;
+    const columnTop = baselineY - layout.columnHeight;
+    const gradientId = `bar-squares-gradient-${index}-${revealEpoch}`;
+    const patternFill = isPatternFill(fill);
+    const patternId = `bar-squares-pattern-${index}-${revealEpoch}`;
+    const effectiveFill = useMemo(() => {
+        if (useGradient) {
+            if (patternFill && patternPreset && patternPreset !== "none") {
+                return `url(#${patternId})`;
+            }
+            return `url(#${gradientId})`;
+        }
+        return fill;
+    }, [useGradient, patternFill, patternPreset, fill, gradientId, patternId]);
+    const cascadeStep = squareCascadeStepSeconds(enterTransition, animationDuration, layout.count);
+    const squareOpacity = isFaded ? fadedOpacity : 1;
+    const gradientPatternNode = useGradient && patternFill && patternPreset && patternPreset !== "none"
+        ? renderPatternPreset(patternPreset, patternId, {
+            color: `url(#${gradientId})`,
+        })
+        : null;
+    const gradientDefs = useGradient ? (_jsxs("defs", { children: [_jsx("linearGradient", { gradientUnits: "userSpaceOnUse", id: gradientId, x1: 0, x2: 0, y1: baselineY, y2: columnTop, children: gradientStops.map((stop) => (_jsx("stop", { offset: `${stop.offset}%`, stopColor: stop.color }, `${stop.offset}-${stop.color}`))) }), gradientPatternNode] })) : null;
+    const squares = layout.positions.map((relY, squareIndex) => {
+        const y = columnTop + relY;
+        const bottomY = y + squareSize;
+        const key = `sq-${index}-${squareIndex}-${revealEpoch}`;
+        if (!animate) {
+            return (_jsx("rect", { fill: effectiveFill, height: squareSize, opacity: squareOpacity, rx: rx, ry: rx, width: squareSize, x: x, y: y }, key));
+        }
+        return (_jsx(motion.rect, { animate: { attrY: y, height: squareSize, opacity: squareOpacity }, fill: effectiveFill, height: squareSize, initial: { attrY: bottomY, height: 0, opacity: 1 }, rx: rx, ry: rx, transition: {
+                ...transitionWithDelay(enterTransition, index * staggerDelay + squareIndex * cascadeStep),
+                opacity: { duration: 0.15 },
+            }, width: squareSize, x: x }, key));
+    });
+    return (_jsxs(_Fragment, { children: [gradientDefs, squares] }));
+}
+const BarSquaresInner = memo(function BarSquaresInner({ dataKey, yAxisId, fill = chartCssVars.linePrimary, squareGap = 3, squareRadius = 0.25, squareFit = false, useGradient = false, gradientStops = [], patternPreset, animate = true, fadedOpacity = 0.3, staggerDelay, groupGap = 4, barScale, bandWidth, barXAccessor, }) {
+    const { data, innerHeight, hoveredBarIndex, lines, orientation, stacked, animationDuration, enterTransition, revealEpoch = 0, } = useChart();
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    const uniqueId = useId();
+    const isHorizontal = orientation === "horizontal";
+    const isUnsupported = isHorizontal || stacked;
+    const seriesIndex = useMemo(() => {
+        const idx = lines.findIndex((l) => l.dataKey === dataKey);
+        return idx >= 0 ? idx : 0;
+    }, [lines, dataKey]);
+    const seriesConfig = lines[seriesIndex];
+    const valueScale = useYScale(yAxisId ?? seriesConfig?.yAxisId);
+    const isLegendDimmed = legendHoveredIndex !== null && legendHoveredIndex !== seriesIndex;
+    const seriesCount = lines.length;
+    const squareSize = useMemo(() => {
+        if (!bandWidth || seriesCount === 0) {
+            return 0;
+        }
+        const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+        return (bandWidth - effectiveGroupGap * (seriesCount - 1)) / seriesCount;
+    }, [bandWidth, seriesCount, groupGap]);
+    const totalAnimDuration = animationDuration || 1100;
+    const staggerSpread = totalAnimDuration * 0.4;
+    const calculatedStaggerDelay = staggerDelay ?? (data.length > 1 ? staggerSpread / 1000 / data.length : 0);
+    const baselineY = valueScale(0) ?? innerHeight;
+    const stops = gradientStops.length >= 2
+        ? gradientStops
+        : [
+            { offset: 0, color: fill },
+            { offset: 100, color: fill },
+        ];
+    if (isUnsupported) {
+        return null;
+    }
+    return (_jsx("g", { className: `bar-squares-${uniqueId}`, children: data.map((d, i) => {
+            const value = d[dataKey];
+            if (typeof value !== "number" || value <= 0) {
+                return null;
+            }
+            const categoryValue = barXAccessor(d);
+            const bandPos = barScale(categoryValue) ?? 0;
+            const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+            const x = bandPos + seriesIndex * (squareSize + effectiveGroupGap);
+            const valuePos = valueScale(value) ?? 0;
+            const barLengthPx = baselineY - valuePos;
+            const isFaded = (hoveredBarIndex !== null && hoveredBarIndex !== i) || isLegendDimmed;
+            return (_jsx(SquareColumn, { animate: animate, animationDuration: animationDuration || 1100, barLengthPx: barLengthPx, baselineY: baselineY, enterTransition: enterTransition, fadedOpacity: fadedOpacity, fill: fill, gradientStops: stops, index: i, isFaded: isFaded, patternPreset: patternPreset, revealEpoch: revealEpoch, squareFit: squareFit, squareGap: squareGap, squareRadius: squareRadius, squareSize: squareSize, staggerDelay: calculatedStaggerDelay, useGradient: useGradient, x: x }, `bar-squares-${dataKey}-${categoryValue}`));
+        }) }));
+});
+export function BarSquares(props) {
+    const { barScale, bandWidth, barXAccessor } = useChartStable();
+    if (!(barScale && bandWidth && barXAccessor)) {
+        console.warn("BarSquares must be used within a BarChart");
+        return null;
+    }
+    return (_jsx(BarSquaresInner, { ...props, bandWidth: bandWidth, barScale: barScale, barXAccessor: barXAccessor }));
+}
+BarSquares.displayName = "BarSquares";
+const BarColumnTrackInner = memo(function BarColumnTrackInner({ fill = chartCssVars.grid, opacity = 0.3, squareGap = 3, squareRadius = 0.25, squareFit = false, groupGap = 4, staggerDelay, barScale, bandWidth, barXAccessor, }) {
+    const { data, lines, orientation, stacked, hoveredBarIndex, animationDuration, enterTransition, revealEpoch = 0, } = useChart();
+    const uniqueId = useId();
+    const isHorizontal = orientation === "horizontal";
+    const isUnsupported = isHorizontal || stacked;
+    const seriesCount = lines.length;
+    const squareSize = useMemo(() => {
+        if (!bandWidth || seriesCount === 0) {
+            return 0;
+        }
+        const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+        return (bandWidth - effectiveGroupGap * (seriesCount - 1)) / seriesCount;
+    }, [bandWidth, seriesCount, groupGap]);
+    const totalAnimDuration = animationDuration || 1100;
+    const staggerSpread = totalAnimDuration * 0.4;
+    const calculatedStaggerDelay = staggerDelay ?? (data.length > 1 ? staggerSpread / 1000 / data.length : 0);
+    if (isUnsupported) {
+        return null;
+    }
+    const rx = squareSize * squareRadius;
+    const effectiveOpacity = hoveredBarIndex === null ? opacity : 0;
+    return (_jsx("g", { className: `bar-column-track-${uniqueId}`, style: { transition: "opacity 0.15s ease-in-out" }, children: data.map((d, i) => {
+            const categoryValue = barXAccessor(d);
+            const bandPos = barScale(categoryValue) ?? 0;
+            const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+            return lines.map((line, seriesIndex) => (_jsx(TrackColumn, { animate: true, bandPos: bandPos, d: d, dataKey: line.dataKey, effectiveGroupGap: effectiveGroupGap, effectiveOpacity: effectiveOpacity, enterTransition: enterTransition, fill: fill, index: i, revealEpoch: revealEpoch, rx: rx, seriesIndex: seriesIndex, squareFit: squareFit, squareGap: squareGap, squareSize: squareSize, staggerDelay: calculatedStaggerDelay, yAxisId: line.yAxisId }, `track-${String(categoryValue)}-${line.dataKey}`)));
+        }) }));
+});
+function TrackColumn({ d, dataKey, yAxisId, bandPos, seriesIndex, effectiveGroupGap, squareSize, squareGap, squareFit, fill, rx, effectiveOpacity, index, staggerDelay, animate, enterTransition, revealEpoch, }) {
+    const { innerHeight, animationDuration: chartAnimationDuration } = useChart();
+    const valueScale = useYScale(yAxisId);
+    const value = d[dataKey];
+    if (typeof value !== "number" || value <= 0) {
+        return null;
+    }
+    const baselineY = valueScale(0) ?? innerHeight;
+    const valuePos = valueScale(value) ?? 0;
+    const barLengthPx = baselineY - valuePos;
+    const layout = computeSquareColumn({
+        barLengthPx,
+        squareSize,
+        gap: squareGap,
+        fit: squareFit,
+    });
+    const columnTop = baselineY - layout.columnHeight;
+    const trackHeight = Math.max(0, columnTop);
+    if (trackHeight <= 0 && !animate) {
+        return null;
+    }
+    const x = bandPos + seriesIndex * (squareSize + effectiveGroupGap);
+    const enterAnim = cascadeColumnTransition(enterTransition, chartAnimationDuration || 1100, index, staggerDelay, layout.count);
+    const animatedHeight = trackHeight > 0 ? trackHeight : 0;
+    if (animate) {
+        return (_jsx(motion.rect, { animate: { height: animatedHeight, y: 0 }, fill: fill, height: animatedHeight, initial: { height: baselineY, y: 0 }, opacity: effectiveOpacity, rx: rx, ry: rx, transition: enterAnim, width: squareSize, x: x }, `track-${index}-${seriesIndex}-${revealEpoch}`));
+    }
+    if (trackHeight <= 0) {
+        return null;
+    }
+    return (_jsx("rect", { fill: fill, height: trackHeight, opacity: effectiveOpacity, rx: rx, ry: rx, width: squareSize, x: x, y: 0 }));
+}
+export function BarColumnTrack(props) {
+    const { barScale, bandWidth, barXAccessor } = useChartStable();
+    if (!(barScale && bandWidth && barXAccessor)) {
+        console.warn("BarColumnTrack must be used within a BarChart");
+        return null;
+    }
+    return (_jsx(BarColumnTrackInner, { ...props, bandWidth: bandWidth, barScale: barScale, barXAccessor: barXAccessor }));
+}
+BarColumnTrack.displayName = "BarColumnTrack";
+export default BarSquares;
+//# sourceMappingURL=bar-squares.js.map

package/dist/charts/bar-x-axis.d.ts

@@ -0,0 +1,14 @@
+export interface BarXAxisProps {
+    /** Width of the date ticker box for fade calculation. Default: 50 */
+    tickerHalfWidth?: number;
+    /** Whether to show all labels or skip some for dense data. Default: false */
+    showAllLabels?: boolean;
+    /** Maximum number of labels to show. Default: 12 */
+    maxLabels?: number;
+}
+export declare function BarXAxis(props: BarXAxisProps): import("react").JSX.Element | null;
+export declare namespace BarXAxis {
+    var displayName: string;
+}
+export default BarXAxis;
+//# sourceMappingURL=bar-x-axis.d.ts.map

package/dist/charts/bar-x-axis.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useChart, useChartStable } from "./chart-context.js";
+function BarXAxisLabel({ label, x, crosshairX, isHovering, tickerHalfWidth }) {
+    const fadeBuffer = 20;
+    const fadeRadius = tickerHalfWidth + fadeBuffer;
+    let opacity = 1;
+    if (isHovering && crosshairX !== null) {
+        const distance = Math.abs(x - crosshairX);
+        if (distance < tickerHalfWidth) {
+            opacity = 0;
+        }
+        else if (distance < fadeRadius) {
+            opacity = (distance - tickerHalfWidth) / fadeBuffer;
+        }
+    }
+    // Zero-width container approach for perfect centering
+    return (_jsx("div", { className: "absolute", style: {
+            left: x,
+            bottom: 12,
+            width: 0,
+            display: "flex",
+            justifyContent: "center",
+        }, children: _jsx(motion.span, { animate: { opacity }, className: cn("whitespace-nowrap text-chart-label text-xs"), initial: { opacity: 1 }, transition: { duration: 0.4, ease: "easeInOut" }, children: label }) }));
+}
+export function BarXAxis(props) {
+    const { containerRef, barScale } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    if (!barScale) {
+        return null;
+    }
+    return _jsx(BarXAxisInner, { ...props, container: container });
+}
+const BarXAxisInner = memo(function BarXAxisInner({ tickerHalfWidth = 50, showAllLabels = false, maxLabels = 12, container, }) {
+    const { margin, tooltipData, barScale, bandWidth, barXAccessor, data } = useChart();
+    // Generate labels for each bar
+    const labelsToShow = useMemo(() => {
+        if (!(barScale && bandWidth && barXAccessor)) {
+            return [];
+        }
+        const allLabels = data.map((d) => {
+            const label = barXAccessor(d);
+            const bandX = barScale(label) ?? 0;
+            // Center the label under the bar group
+            const x = bandX + bandWidth / 2 + margin.left;
+            return { label, x };
+        });
+        // If showAllLabels is true or we have fewer than maxLabels, show all
+        if (showAllLabels || allLabels.length <= maxLabels) {
+            return allLabels;
+        }
+        // Otherwise, skip some labels to avoid crowding
+        const step = Math.ceil(allLabels.length / maxLabels);
+        return allLabels.filter((_, i) => i % step === 0);
+    }, [barScale, bandWidth, barXAccessor, data, margin.left, showAllLabels, maxLabels]);
+    const isHovering = tooltipData !== null;
+    const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+    return createPortal(_jsx("div", { className: "pointer-events-none absolute inset-0", children: labelsToShow.map((item) => (_jsx(BarXAxisLabel, { crosshairX: crosshairX, isHovering: isHovering, label: item.label, tickerHalfWidth: tickerHalfWidth, x: item.x }, `${item.label}-${item.x}`))) }), container);
+});
+BarXAxis.displayName = "BarXAxis";
+export default BarXAxis;
+//# sourceMappingURL=bar-x-axis.js.map

package/dist/charts/bar-y-axis.d.ts

@@ -0,0 +1,12 @@
+export interface BarYAxisProps {
+    /** Whether to show all labels or skip some for dense data. Default: true */
+    showAllLabels?: boolean;
+    /** Maximum number of labels to show. Default: 20 */
+    maxLabels?: number;
+}
+export declare function BarYAxis(props: BarYAxisProps): import("react").JSX.Element | null;
+export declare namespace BarYAxis {
+    var displayName: string;
+}
+export default BarYAxis;
+//# sourceMappingURL=bar-y-axis.d.ts.map

package/dist/charts/bar-y-axis.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useChart, useChartStable } from "./chart-context.js";
+function BarYAxisLabel({ label, y, bandHeight, isHovered }) {
+    return (_jsx("div", { className: "absolute right-0 flex items-center justify-end pr-2", style: {
+            top: y,
+            height: bandHeight,
+        }, children: _jsx(motion.span, { animate: {
+                opacity: isHovered ? 1 : 0.7,
+                color: isHovered ? "var(--foreground)" : "var(--chart-label, var(--color-zinc-500))",
+            }, className: cn("truncate whitespace-nowrap text-right text-xs"), initial: {
+                opacity: 0.7,
+                color: "var(--chart-label, var(--color-zinc-500))",
+            }, style: { maxWidth: 70 }, transition: { duration: 0.15 }, children: label }) }));
+}
+export function BarYAxis(props) {
+    const { containerRef, barScale } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    if (!barScale) {
+        return null;
+    }
+    return _jsx(BarYAxisInner, { ...props, container: container });
+}
+const BarYAxisInner = memo(function BarYAxisInner({ showAllLabels = true, maxLabels = 20, container, }) {
+    const { margin, barScale, bandWidth, barXAccessor, data, hoveredBarIndex } = useChart();
+    // Generate labels for each bar
+    const labelsToShow = useMemo(() => {
+        if (!(barScale && bandWidth && barXAccessor)) {
+            return [];
+        }
+        const allLabels = data.map((d, i) => {
+            const label = barXAccessor(d);
+            const bandY = barScale(label) ?? 0;
+            // Center the label vertically within the band
+            const y = bandY + margin.top;
+            return { label, y, bandHeight: bandWidth, index: i };
+        });
+        // If showAllLabels is true or we have fewer than maxLabels, show all
+        if (showAllLabels || allLabels.length <= maxLabels) {
+            return allLabels;
+        }
+        // Otherwise, skip some labels to avoid crowding
+        const step = Math.ceil(allLabels.length / maxLabels);
+        return allLabels.filter((_, i) => i % step === 0);
+    }, [barScale, bandWidth, barXAccessor, data, margin.top, showAllLabels, maxLabels]);
+    return createPortal(_jsx("div", { className: "pointer-events-none absolute top-0 bottom-0", style: {
+            left: 0,
+            width: margin.left,
+        }, children: labelsToShow.map((item) => (_jsx(BarYAxisLabel, { bandHeight: item.bandHeight, isHovered: hoveredBarIndex === item.index, label: item.label, y: item.y }, `${item.label}-${item.y}`))) }), container);
+});
+BarYAxis.displayName = "BarYAxis";
+export default BarYAxis;
+//# sourceMappingURL=bar-y-axis.js.map

package/dist/charts/bar.d.ts

@@ -0,0 +1,41 @@
+export type BarLineCap = "round" | "butt" | number;
+export type BarAnimationType = "grow" | "fade";
+export interface BarProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id for vertical bars (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Fill color for the bar. Can be a color, gradient url, or pattern url. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Color for tooltip dot. Use when fill is a gradient/pattern. Default: uses fill value */
+    stroke?: string;
+    /** Line cap style for bar ends: "round", "butt", or a number for custom radius. Default: "round" */
+    lineCap?: BarLineCap;
+    /** Whether to animate the bars. Default: true */
+    animate?: boolean;
+    /** Animation type: "grow" (height) or "fade" (opacity + blur). Default: "grow" */
+    animationType?: BarAnimationType;
+    /** Opacity when not hovered (when another bar is hovered). Default: 0.22 */
+    fadedOpacity?: number;
+    /** Stagger delay between bars in seconds. Auto-calculated if not provided. */
+    staggerDelay?: number;
+    /** Gap between stacked bars in pixels. Default: 0 */
+    stackGap?: number;
+    /** Gap between grouped bars in pixels. Default: 4 */
+    groupGap?: number;
+    /** Shrink each positive bar's top by its perspective rise so the front face
+     * lines up with `<BarDepthBack>`'s lid (instead of the lid sitting above the
+     * front face). Pass `true` whenever the chart also renders the bar-depth 3D
+     * surfaces. Default: false */
+    perspective?: boolean;
+    /** Minimum rendered bar height in px (non-stacked, vertical). Floors short or
+     * zero-value bars so they stay visible. Pair with the same value on
+     * `<BarDepthProvider minBarHeight>` when using the 3D surfaces. Default: 0 */
+    minBarHeight?: number;
+}
+export declare function Bar(props: BarProps): import("react").JSX.Element | null;
+export declare namespace Bar {
+    var displayName: string;
+}
+export default Bar;
+//# sourceMappingURL=bar.d.ts.map