@cronus-ui/ui 0.6.0

package/dist/charts/bar.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useId, useMemo } from "react";
+import { barDepthAndRise, barDepthMaxDepth } from "./bar-depth-geometry.js";
+import { chartCssVars, useChart, useChartStable, useYScale } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { transitionWithDelay } from "./motion-utils.js";
+// ── Bar-depth perspective trim ───────────────────────────────────────────
+// Uses the SHARED geometry (`bar-depth-geometry.ts`) so a
+// `<Bar perspective>` front face lines up exactly with
+// `<BarDepthBack>`'s lid — the formula lives in one place for both.
+/** perspectiveRise for a positive bar whose visual top sits at `topY`.
+ * Returns 0 for a dead-center bar or a dense chart (degenerate depth). */
+function barDepthPerspectiveRise(barScale, bandWidth, barXAccessor, innerWidth, datum, topY, baselineY) {
+    const centerX = innerWidth / 2;
+    if (centerX <= 0) {
+        return 0;
+    }
+    const step = barScale.step?.() ?? bandWidth;
+    const maxDepth = barDepthMaxDepth(step, bandWidth);
+    const bandX = barScale(barXAccessor(datum)) ?? 0;
+    const cx = bandX + bandWidth / 2;
+    const absOffset = Math.min(1, Math.abs((cx - centerX) / centerX));
+    const naturalHeight = Math.abs(baselineY - topY);
+    return barDepthAndRise(absOffset, naturalHeight, maxDepth).perspectiveRise;
+}
+function AnimatedBar({ x, y, width, height, fill, rx, ry, index, isFaded, animationType, innerHeight, fadedOpacity, staggerDelay, enterTransition, revealEpoch, isHorizontal, }) {
+    const enterAnim = transitionWithDelay(enterTransition, index * staggerDelay);
+    if (animationType === "fade") {
+        return (_jsx(motion.rect, { animate: {
+                opacity: isFaded ? fadedOpacity : 1,
+                filter: "blur(0px)",
+            }, fill: fill, height: height, initial: { opacity: 0, filter: "blur(2px)" }, rx: rx, ry: ry, transition: enterAnim, width: width, x: x, y: y }, `fade-${index}-${revealEpoch}`));
+    }
+    const initial = isHorizontal
+        ? { width: 0, height, x: 0, y }
+        : { width, height: 0, x, y: innerHeight };
+    const target = isHorizontal ? { width, height, x: 0, y } : { width, height, x, y };
+    return (_jsx("g", { opacity: isFaded ? fadedOpacity : 1, style: { transition: "opacity 0.15s ease-in-out" }, children: _jsx(motion.rect, { animate: target, fill: fill, initial: initial, rx: rx, ry: ry, transition: enterAnim }, `grow-${index}-${revealEpoch}`) }));
+}
+const BarInner = memo(function BarInner({ dataKey, yAxisId, fill = chartCssVars.linePrimary, lineCap = "round", animate = true, animationType = "grow", fadedOpacity = 0.22, staggerDelay, stackGap = 0, groupGap = 4, perspective = false, minBarHeight = 0, barScale, bandWidth, barXAccessor, }) {
+    const { data, yScale: chartYScale, innerHeight, innerWidth, isLoaded, hoveredBarIndex, lines, orientation, stacked, stackOffsets, animationDuration, enterTransition, revealEpoch = 0, } = useChart();
+    // Calculate stagger delay automatically if not provided
+    // Total animation duration is ~1200ms, with 40% for stagger spread and 60% for bar animation
+    const totalAnimDuration = animationDuration || 1100;
+    const staggerSpread = totalAnimDuration * 0.4; // 40% of time for stagger spread
+    const calculatedStaggerDelay = staggerDelay ?? (data.length > 1 ? staggerSpread / 1000 / data.length : 0);
+    const uniqueId = useId();
+    const isHorizontal = orientation === "horizontal";
+    // Find the index of this bar series among all bar series
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    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 isLastSeries = seriesIndex === seriesCount - 1;
+    // Calculate the width for each bar within a group (for non-stacked)
+    const barWidth = useMemo(() => {
+        if (!bandWidth || seriesCount === 0) {
+            return 0;
+        }
+        if (stacked) {
+            // Stacked bars use full band width
+            return bandWidth;
+        }
+        // Leave a gap between grouped bars (controlled by groupGap prop)
+        const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+        return (bandWidth - effectiveGroupGap * (seriesCount - 1)) / seriesCount;
+    }, [bandWidth, seriesCount, stacked, groupGap]);
+    // Calculate corner radius based on lineCap. Perspective bars force a flat
+    // top (radius 0) so the 3D lid from `<BarDepthBack>` meets the bar with no
+    // gap — rounded corners would leave a wedge, so `perspective` overrides it.
+    const cornerRadius = useMemo(() => {
+        if (perspective) {
+            return 0;
+        }
+        if (typeof lineCap === "number") {
+            return lineCap;
+        }
+        if (lineCap === "round" && barWidth) {
+            return Math.min(barWidth / 2, 8);
+        }
+        return 0;
+    }, [lineCap, barWidth, perspective]);
+    return (_jsx("g", { className: `bar-series-${uniqueId}`, children: data.map((d, i) => {
+            const value = d[dataKey];
+            if (typeof value !== "number") {
+                return null;
+            }
+            const categoryValue = barXAccessor(d);
+            const bandPos = barScale(categoryValue) ?? 0;
+            let x;
+            let y;
+            let barHeight;
+            let barW;
+            const scale = isHorizontal ? chartYScale : valueScale;
+            if (isHorizontal) {
+                // Horizontal bars: category on y-axis, value on x-axis
+                const valuePos = scale(value) ?? 0;
+                barW = valuePos; // Width is the value position (grows from left)
+                barHeight = barWidth;
+                if (stacked && stackOffsets) {
+                    const offset = stackOffsets.get(i)?.get(dataKey) ?? 0;
+                    x = scale(offset) ?? 0;
+                    barW = valuePos - x;
+                    // Apply stack gap for horizontal: shift right and reduce width
+                    const gapOffset = seriesIndex * stackGap;
+                    x += gapOffset;
+                    if (!isLastSeries && stackGap > 0) {
+                        barW = Math.max(0, barW - stackGap);
+                    }
+                }
+                else {
+                    x = 0;
+                    // For grouped bars, offset y position
+                    const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+                    y = bandPos + seriesIndex * (barWidth + effectiveGroupGap);
+                }
+                y = stacked
+                    ? bandPos
+                    : bandPos + seriesIndex * (barWidth + (seriesCount > 1 ? groupGap : 0));
+            }
+            else {
+                // Vertical bars: category on x-axis, value on y-axis
+                const valuePos = scale(value) ?? 0;
+                barHeight = innerHeight - valuePos;
+                barW = barWidth;
+                if (stacked && stackOffsets) {
+                    const offset = stackOffsets.get(i)?.get(dataKey) ?? 0;
+                    const offsetY = scale(offset) ?? innerHeight;
+                    // Apply stack gap: shift up and reduce height
+                    const gapOffset = seriesIndex * stackGap;
+                    y = offsetY - barHeight - gapOffset;
+                    // Reduce height slightly for non-last bars to create visual gap
+                    if (!isLastSeries && stackGap > 0) {
+                        barHeight = Math.max(0, barHeight - stackGap);
+                    }
+                }
+                else {
+                    y = valuePos;
+                    // For grouped bars, offset x position
+                    const effectiveGroupGap = seriesCount > 1 ? groupGap : 0;
+                    x = bandPos + seriesIndex * (barWidth + effectiveGroupGap);
+                }
+                x = stacked
+                    ? bandPos
+                    : bandPos + seriesIndex * (barWidth + (seriesCount > 1 ? groupGap : 0));
+                // Minimum visible height — floor short/zero non-stacked bars so a
+                // zero-value data point still reads as a tiny bar instead of
+                // vanishing. Grows up from the baseline. Floored bars skip the
+                // perspective trim (sub-pixel on a 3px bar; keeps the front aligned
+                // with bar-depth, which also skips trim for floored bars).
+                let isFloored = false;
+                if (!stacked && minBarHeight > 0 && value >= 0 && barHeight < minBarHeight) {
+                    const baselineY = scale(0) ?? innerHeight;
+                    barHeight = minBarHeight;
+                    y = baselineY - minBarHeight;
+                    isFloored = true;
+                }
+                // Perspective trim — shrink the topmost positive bar's front-face
+                // top down by its perspective rise so it meets `<BarDepthBack>`'s
+                // lid back edge. Stacked: only the last (topmost) series; grouped or
+                // single: every positive bar. Clamped to `barHeight - 1` so very
+                // short bars keep a positive height (matches bar-depth's clamp).
+                if (perspective && value > 0 && !isFloored && (!stacked || isLastSeries)) {
+                    const baselineY = scale(0) ?? innerHeight;
+                    const rise = barDepthPerspectiveRise(barScale, bandWidth, barXAccessor, innerWidth, d, y, baselineY);
+                    const trim = Math.min(rise, Math.max(0, barHeight - 1));
+                    y += trim;
+                    barHeight -= trim;
+                }
+            }
+            const isFaded = (hoveredBarIndex !== null && hoveredBarIndex !== i) || isLegendDimmed;
+            // Use categoryValue as key since it's the unique identifier from data
+            const barKey = `bar-${dataKey}-${categoryValue}`;
+            // Apply rounded corners:
+            // - For non-stacked: always apply
+            // - For stacked with gap: apply to all bars
+            // - For stacked without gap: only apply to the last series
+            const applyRounding = !stacked || stackGap > 0 || isLastSeries;
+            const effectiveRx = applyRounding ? cornerRadius : 0;
+            const effectiveRy = applyRounding ? cornerRadius : 0;
+            if (animate && !isLoaded) {
+                return (_jsx(AnimatedBar, { animationType: animationType, enterTransition: enterTransition, fadedOpacity: fadedOpacity, fill: fill, height: barHeight, index: i, innerHeight: innerHeight, isFaded: isFaded, isHorizontal: isHorizontal, revealEpoch: revealEpoch, rx: effectiveRx, ry: effectiveRy, staggerDelay: calculatedStaggerDelay, width: barW, x: x, y: y }, barKey));
+            }
+            // Static bar after animation completes
+            return (_jsx("rect", { fill: fill, height: barHeight, opacity: isFaded ? fadedOpacity : 1, rx: effectiveRx, ry: effectiveRy, style: {
+                    cursor: "default",
+                    transition: "opacity 0.15s ease-in-out",
+                }, width: barW, x: x, y: y }, barKey));
+        }) }));
+});
+export function Bar(props) {
+    const { barScale, bandWidth, barXAccessor } = useChartStable();
+    if (!(barScale && bandWidth && barXAccessor)) {
+        console.warn("Bar component must be used within a BarChart");
+        return null;
+    }
+    return (_jsx(BarInner, { ...props, bandWidth: bandWidth, barScale: barScale, barXAccessor: barXAccessor }));
+}
+Bar.displayName = "Bar";
+export default Bar;
+//# sourceMappingURL=bar.js.map

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

@@ -0,0 +1,46 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type Margin } from "./chart-context.js";
+export interface OHLCDataPoint {
+    date: Date;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+}
+export interface CandlestickChartProps {
+    /** OHLC data array */
+    data: OHLCDataPoint[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1500 */
+    animationDuration?: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers enter replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Inline styles for the container (e.g. { height: 320 }) */
+    style?: React.CSSProperties;
+    /** Gap between candles as fraction of slot width (0–1). Default: 0.2. Ignored when candleWidth is set. */
+    candleGap?: number;
+    /** Fixed candle body width in pixels. If set, overrides candleGap. */
+    candleWidth?: number;
+    /** When set, xScale uses this domain instead of deriving from data. Use with brush so main chart and strip share the same scale. */
+    xDomain?: [Date, Date];
+    /** When xDomain is set, use this as the number of slots for scale padding (e.g. full data length). */
+    xDomainSlotCount?: number;
+    /** Child components (Candlestick, Grid, XAxis, YAxis, ChartTooltip, etc.) */
+    children: ReactNode;
+}
+export declare function CandlestickChart({ data, xDataKey, margin: marginProp, animationDuration, enterTransition, revealSignature, aspectRatio, className, style, candleGap, candleWidth, xDomain, xDomainSlotCount, children, }: CandlestickChartProps): import("react").JSX.Element;
+export declare namespace CandlestickChart {
+    var displayName: string;
+}
+export default CandlestickChart;
+//# sourceMappingURL=candlestick-chart.d.ts.map

package/dist/charts/candlestick-chart.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear, scaleTime } from "@visx/scale";
+import { bisector } from "d3-array";
+import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, } from "./chart-child-passthrough.js";
+import { ChartProvider } from "./chart-context.js";
+import { shortDateFmt } from "./chart-formatters.js";
+import { DEFAULT_CHART_LIFECYCLE } from "./chart-phase.js";
+import { decimateOhlcData, maxRenderPointsForWidth } from "./decimate-time-series.js";
+import { extractReferenceAreaConfigs } from "./reference-area-config.js";
+import { useChartInteraction } from "./use-chart-interaction.js";
+import { wrapSingleYScale } from "./y-axis-scales.js";
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+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, enterTransition, revealSignature = "", candleGap, candleWidthProp, xDomain, xDomainSlotCount, children, containerRef, }) {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const xAccessor = useCallback((d) => {
+        const value = d[xDataKey];
+        return value instanceof Date ? value : new Date(value);
+    }, [xDataKey]);
+    const bisectDate = useMemo(() => bisector((d) => xAccessor(d)).left, [xAccessor]);
+    const slotCount = xDomain && xDomainSlotCount != null ? xDomainSlotCount : data.length;
+    const slotWidth = innerWidth / Math.max(slotCount, 1);
+    const xScale = useMemo(() => {
+        const minTime = xDomain
+            ? xDomain[0].getTime()
+            : Math.min(...data.map((d) => xAccessor(d).getTime()));
+        const maxTime = xDomain
+            ? xDomain[1].getTime()
+            : Math.max(...data.map((d) => xAccessor(d).getTime()));
+        const padding = slotWidth / 2;
+        return scaleTime({
+            range: [padding, innerWidth - padding],
+            domain: [minTime, maxTime],
+        });
+    }, [innerWidth, data, xAccessor, slotWidth, xDomain]);
+    const yScale = useMemo(() => {
+        let minVal = Number.POSITIVE_INFINITY;
+        let maxVal = Number.NEGATIVE_INFINITY;
+        for (const d of data) {
+            const low = d.low;
+            const high = d.high;
+            if (typeof low === "number" && low < minVal) {
+                minVal = low;
+            }
+            if (typeof high === "number" && high > maxVal) {
+                maxVal = high;
+            }
+        }
+        if (minVal === Number.POSITIVE_INFINITY) {
+            minVal = 0;
+        }
+        if (maxVal === Number.NEGATIVE_INFINITY) {
+            maxVal = 100;
+        }
+        const padding = (maxVal - minVal) * 0.05 || 1;
+        return scaleLinear({
+            range: [innerHeight, 0],
+            domain: [minVal - padding, maxVal + padding],
+            nice: true,
+        });
+    }, [innerHeight, data]);
+    const columnWidth = slotWidth;
+    const bandWidth = candleWidthProp ?? slotWidth * (1 - candleGap);
+    const lines = useMemo(() => [{ dataKey: "close", stroke: "var(--chart-line-primary)", strokeWidth: 0 }], []);
+    const renderData = useMemo(() => decimateOhlcData(data, maxRenderPointsForWidth(innerWidth)), [data, innerWidth]);
+    const dateLabels = useMemo(() => data.map((d) => shortDateFmt.format(xAccessor(d))), [data, xAccessor]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature
+    useEffect(() => {
+        setRevealEpoch((n) => n + 1);
+        setIsLoaded(false);
+        const timer = setTimeout(() => setIsLoaded(true), animationDuration);
+        return () => clearTimeout(timer);
+    }, [animationDuration, revealSignature]);
+    const { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, } = useChartInteraction({
+        xScale,
+        yScale,
+        yScales: wrapSingleYScale(yScale),
+        data,
+        lines,
+        margin,
+        xAccessor,
+        bisectDate,
+        canInteract: isLoaded,
+    });
+    const hoveredCandleIndex = tooltipData?.index ?? null;
+    const isDefsComponent = (child) => {
+        const displayName = child.type?.displayName ||
+            child.type?.name ||
+            "";
+        return (displayName.includes("Gradient") ||
+            displayName.includes("Pattern") ||
+            displayName === "LinearGradient" ||
+            displayName === "RadialGradient" ||
+            displayName === "Lines" ||
+            displayName === "PatternLines");
+    };
+    const defsChildren = [];
+    const clipExcludedChildren = [];
+    const underlayChildren = [];
+    const preOverlayChildren = [];
+    const postOverlayChildren = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (isDefsComponent(child)) {
+            defsChildren.push(child);
+        }
+        else if (isPostOverlayComponent(child)) {
+            postOverlayChildren.push(child);
+        }
+        else if (isClipExcludedComponent(child)) {
+            clipExcludedChildren.push(child);
+        }
+        else if (isUnderlayComponent(child)) {
+            underlayChildren.push(child);
+        }
+        else {
+            preOverlayChildren.push(child);
+        }
+    });
+    const referenceAreas = useMemo(() => extractReferenceAreaConfigs(children), [children]);
+    const yScales = useMemo(() => wrapSingleYScale(yScale), [yScale]);
+    const contextValue = useMemo(() => ({
+        ...DEFAULT_CHART_LIFECYCLE,
+        data,
+        renderData,
+        xScale,
+        yScale,
+        yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        isLoaded,
+        animationDuration,
+        enterTransition,
+        revealEpoch,
+        xAccessor,
+        dateLabels,
+        selection: selection ?? null,
+        clearSelection,
+        bandWidth,
+        hoveredCandleIndex,
+    }), [
+        data,
+        renderData,
+        xScale,
+        yScale,
+        yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        isLoaded,
+        animationDuration,
+        enterTransition,
+        revealEpoch,
+        xAccessor,
+        dateLabels,
+        selection,
+        clearSelection,
+        bandWidth,
+        hoveredCandleIndex,
+    ]);
+    return (_jsx(ChartProvider, { value: contextValue, children: _jsxs("svg", { "aria-hidden": "true", height: height, width: width, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "candlestick-positive", x1: "0", x2: "0", y1: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-emerald-500)" }), _jsx("stop", { offset: "100%", stopColor: "var(--color-emerald-500)" })] }), _jsxs("linearGradient", { id: "candlestick-negative", x1: "0", x2: "0", y1: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-red-500)" }), _jsx("stop", { offset: "100%", stopColor: "var(--color-red-500)" })] }), defsChildren] }), _jsx("rect", { fill: "transparent", height: height, width: width, x: 0, y: 0 }), _jsxs("g", { ...interactionHandlers, style: interactionStyle, transform: `translate(${margin.left},${margin.top})`, children: [_jsx("rect", { fill: "transparent", height: innerHeight, width: innerWidth, x: 0, y: 0 }), clipExcludedChildren, underlayChildren, preOverlayChildren, postOverlayChildren] })] }) }));
+});
+export function CandlestickChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, enterTransition, revealSignature, aspectRatio = "2 / 1", className = "", style, candleGap = 0.2, candleWidth, xDomain, xDomainSlotCount, children, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    const dataAsRecords = data;
+    return (_jsx("div", { "data-slot": "candlestick-chart", className: cn("relative w-full", className), ref: containerRef, style: { aspectRatio, touchAction: "none", ...style }, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(ChartInner, { animationDuration: animationDuration, candleGap: candleGap, candleWidthProp: candleWidth, containerRef: containerRef, data: dataAsRecords, enterTransition: enterTransition, height: height, margin: margin, revealSignature: revealSignature, width: width, xDataKey: xDataKey, xDomain: xDomain, xDomainSlotCount: xDomainSlotCount, children: children })) }) }));
+}
+CandlestickChart.displayName = "CandlestickChart";
+export default CandlestickChart;
+//# sourceMappingURL=candlestick-chart.js.map

package/dist/charts/candlestick.d.ts

@@ -0,0 +1,24 @@
+export interface CandlestickProps {
+    /** Whether to animate the candlesticks. Default: true */
+    animate?: boolean;
+    /** Fill for positive (close >= open) candles. Color or url(#gradient). Default: emerald */
+    positiveFill?: string;
+    /** Fill for negative candles. Color or url(#gradient). Default: red */
+    negativeFill?: string;
+    /** Optional pattern URL for body only (e.g. url(#pattern)). When set, body is drawn solid first, then pattern overlaid and masked to the body rect. */
+    bodyPatternPositive?: string;
+    /** Optional pattern URL for negative candle body. */
+    bodyPatternNegative?: string;
+    /** Inner border width on the body (drawn inside so it does not expand the shape). Default: 0 (off). */
+    insideStrokeWidth?: number;
+    /** Opacity when another candle is hovered. Default: 0.3 */
+    fadedOpacity?: number;
+    /** Dim non-hovered candles on hover. Default: true */
+    showHoverFade?: boolean;
+}
+export declare function Candlestick({ animate, positiveFill, negativeFill, bodyPatternPositive, bodyPatternNegative, insideStrokeWidth, fadedOpacity, showHoverFade, }: CandlestickProps): import("react").JSX.Element;
+export declare namespace Candlestick {
+    var displayName: string;
+}
+export default Candlestick;
+//# sourceMappingURL=candlestick.d.ts.map

package/dist/charts/candlestick.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo, useMemo } from "react";
+import { useChart } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { transitionWithDelay } from "./motion-utils.js";
+const DEFAULT_POSITIVE = "url(#candlestick-positive)";
+const DEFAULT_NEGATIVE = "url(#candlestick-negative)";
+const SOLID_POSITIVE = "var(--color-emerald-500)";
+const SOLID_NEGATIVE = "var(--color-red-500)";
+const WICK_WIDTH = 1.5;
+function getSolidColor(isPositive) {
+    return isPositive ? SOLID_POSITIVE : SOLID_NEGATIVE;
+}
+function computeGeometries(renderData, xScale, yScale, xAccessor, candleWidth, positiveFill, negativeFill, bodyPatternPositive, bodyPatternNegative, insideStrokeWidth) {
+    return renderData.map((d) => {
+        const date = xAccessor(d);
+        const open = d.open;
+        const high = d.high;
+        const low = d.low;
+        const close = d.close;
+        const centerX = xScale(date) ?? 0;
+        const yHigh = yScale(high) ?? 0;
+        const yLow = yScale(low) ?? 0;
+        const yOpen = yScale(open) ?? 0;
+        const yClose = yScale(close) ?? 0;
+        const bodyTop = Math.min(yOpen, yClose);
+        const bodyHeight = Math.abs(yClose - yOpen) || 1;
+        const bodyLeft = centerX - candleWidth / 2;
+        const wickTop = Math.min(yHigh, yLow);
+        const wickHeight = Math.abs(yLow - yHigh) || 1;
+        const isPositive = close >= open;
+        const fill = isPositive ? positiveFill : negativeFill;
+        const bodyPattern = isPositive ? bodyPatternPositive : bodyPatternNegative;
+        const hasPatternOverlay = Boolean(bodyPattern);
+        const bodySolidFill = hasPatternOverlay ? getSolidColor(isPositive) : fill;
+        return {
+            time: date.getTime(),
+            centerX,
+            bodyTop,
+            bodyHeight,
+            bodyLeft,
+            candleWidth,
+            wickTop,
+            wickHeight,
+            wickLeft: centerX - WICK_WIDTH / 2,
+            bodySolidFill,
+            wickFill: hasPatternOverlay ? bodySolidFill : fill,
+            bodyPattern: hasPatternOverlay ? bodyPattern : undefined,
+            insideStrokeWidth,
+            isPositive,
+        };
+    });
+}
+function geometryDimOpacity(geometry, fadedOpacity, legendHoveredIndex, hoveredTime) {
+    if (legendHoveredIndex !== null) {
+        const dimFromLegend = (legendHoveredIndex === 0 && !geometry.isPositive) ||
+            (legendHoveredIndex === 1 && geometry.isPositive);
+        return dimFromLegend ? fadedOpacity : 1;
+    }
+    if (hoveredTime !== null && geometry.time !== hoveredTime) {
+        return fadedOpacity;
+    }
+    return 1;
+}
+const CandlestickBody = memo(function CandlestickBody({ geometry }) {
+    const { wickLeft, wickTop, wickHeight, wickFill, bodyLeft, bodyTop, bodyHeight, candleWidth, bodySolidFill, bodyPattern, insideStrokeWidth, } = geometry;
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { fill: wickFill, height: wickHeight, width: WICK_WIDTH, x: wickLeft, y: wickTop }), _jsx("rect", { fill: bodySolidFill, height: bodyHeight, rx: 1, ry: 1, stroke: bodySolidFill, strokeWidth: 1, width: candleWidth, x: bodyLeft, y: bodyTop }), bodyPattern ? (_jsx("rect", { fill: bodyPattern, height: bodyHeight, rx: 1, ry: 1, width: candleWidth, x: bodyLeft, y: bodyTop })) : null, insideStrokeWidth > 0 ? (_jsx("rect", { fill: "none", height: bodyHeight - insideStrokeWidth, rx: 1, ry: 1, stroke: bodySolidFill, strokeWidth: insideStrokeWidth, width: candleWidth - insideStrokeWidth, x: bodyLeft + insideStrokeWidth / 2, y: bodyTop + insideStrokeWidth / 2 })) : null] }));
+});
+const CandlestickBodies = memo(function CandlestickBodies({ geometries, fadedOpacity, legendHoveredIndex, hoveredTime, }) {
+    return (_jsx(_Fragment, { children: geometries.map((geometry) => (_jsx("g", { opacity: geometryDimOpacity(geometry, fadedOpacity, legendHoveredIndex, hoveredTime), style: { transition: "opacity 0.15s ease-in-out" }, children: _jsx(CandlestickBody, { geometry: geometry }) }, geometry.time))) }));
+});
+function AnimatedCandle({ geometry, delay, enterTransition, revealEpoch }) {
+    const t = transitionWithDelay(enterTransition, delay);
+    const bodyOrigin = `${geometry.centerX}px ${geometry.bodyTop + geometry.bodyHeight / 2}px`;
+    const wickCenterY = geometry.wickTop + geometry.wickHeight / 2;
+    return (_jsxs(motion.g, { animate: { opacity: 1 }, initial: { opacity: 0 }, style: { transformOrigin: `${geometry.centerX}px ${wickCenterY}px` }, transition: { ...t, opacity: { duration: 0.15 } }, children: [_jsx(motion.rect, { animate: { scaleY: 1 }, fill: geometry.wickFill, height: geometry.wickHeight, initial: { scaleY: 0 }, style: { transformOrigin: `${geometry.centerX}px ${wickCenterY}px` }, transition: t, width: WICK_WIDTH, x: geometry.wickLeft, y: geometry.wickTop }), _jsx(motion.rect, { animate: { scaleY: 1 }, fill: geometry.bodySolidFill, height: geometry.bodyHeight, initial: { scaleY: 0 }, rx: 1, ry: 1, stroke: geometry.bodySolidFill, strokeWidth: 1, style: { transformOrigin: bodyOrigin }, transition: t, width: geometry.candleWidth, x: geometry.bodyLeft, y: geometry.bodyTop }), geometry.bodyPattern ? (_jsx(motion.rect, { animate: { scaleY: 1 }, fill: geometry.bodyPattern, height: geometry.bodyHeight, initial: { scaleY: 0 }, rx: 1, ry: 1, style: { transformOrigin: bodyOrigin }, transition: t, width: geometry.candleWidth, x: geometry.bodyLeft, y: geometry.bodyTop })) : null] }, `candle-enter-${geometry.time}-${revealEpoch}`));
+}
+export function Candlestick({ animate = true, positiveFill = DEFAULT_POSITIVE, negativeFill = DEFAULT_NEGATIVE, bodyPatternPositive, bodyPatternNegative, insideStrokeWidth = 0, fadedOpacity = 0.3, showHoverFade = true, }) {
+    const { data, xScale, yScale, xAccessor, animationDuration, enterTransition, revealEpoch = 0, isLoaded, bandWidth, columnWidth, hoveredCandleIndex, } = useChart();
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    const candleWidth = Math.min(bandWidth ?? columnWidth * 0.8, columnWidth);
+    const geometries = useMemo(() => computeGeometries(data, xScale, yScale, xAccessor, candleWidth, positiveFill, negativeFill, bodyPatternPositive, bodyPatternNegative, insideStrokeWidth), [
+        data,
+        xScale,
+        yScale,
+        xAccessor,
+        candleWidth,
+        positiveFill,
+        negativeFill,
+        bodyPatternPositive,
+        bodyPatternNegative,
+        insideStrokeWidth,
+    ]);
+    const hoveredTime = useMemo(() => {
+        if (hoveredCandleIndex == null) {
+            return null;
+        }
+        const point = data[hoveredCandleIndex];
+        return point ? xAccessor(point).getTime() : null;
+    }, [hoveredCandleIndex, data, xAccessor]);
+    const highlightGeometry = useMemo(() => {
+        if (hoveredCandleIndex == null) {
+            return null;
+        }
+        const point = data[hoveredCandleIndex];
+        if (!point) {
+            return null;
+        }
+        return (computeGeometries([point], xScale, yScale, xAccessor, candleWidth, positiveFill, negativeFill, bodyPatternPositive, bodyPatternNegative, insideStrokeWidth)[0] ?? null);
+    }, [
+        hoveredCandleIndex,
+        data,
+        xScale,
+        yScale,
+        xAccessor,
+        candleWidth,
+        positiveFill,
+        negativeFill,
+        bodyPatternPositive,
+        bodyPatternNegative,
+        insideStrokeWidth,
+    ]);
+    const defaultEnter = {
+        type: "spring",
+        duration: 0.8,
+        bounce: 0.15,
+    };
+    const enter = enterTransition ?? defaultEnter;
+    const staggerDelayMs = data.length > 0 ? (animationDuration * 0.6) / data.length : 0;
+    if (animate && !isLoaded) {
+        return (_jsx("g", { className: "chart-candlesticks", children: geometries.map((geometry, index) => (_jsx(AnimatedCandle, { delay: (index * staggerDelayMs) / 1000, enterTransition: enter, geometry: geometry, revealEpoch: revealEpoch }, geometry.time))) }));
+    }
+    return (_jsxs("g", { className: "chart-candlesticks", children: [_jsx(CandlestickBodies, { fadedOpacity: fadedOpacity, geometries: geometries, hoveredTime: showHoverFade ? hoveredTime : null, legendHoveredIndex: legendHoveredIndex }), highlightGeometry ? (_jsx("g", { children: _jsx(CandlestickBody, { geometry: highlightGeometry }) })) : null] }));
+}
+Candlestick.displayName = "Candlestick";
+export default Candlestick;
+//# sourceMappingURL=candlestick.js.map

package/dist/charts/chart-brush-handle.d.ts

@@ -0,0 +1,15 @@
+import type { BrushHandleRenderProps } from "@visx/brush/lib/BrushHandle";
+import type { ChartBrushOverlayHost } from "./chart-brush-track-overlay.js";
+export declare function renderChartBrushHandle({ x, y, width, height, className }: BrushHandleRenderProps): import("react").JSX.Element;
+export interface ChartBrushHandleOverlayProps {
+    innerWidth: number;
+    innerHeight: number;
+    /** Pixel x of the selection start within the plot area. */
+    selectionX0: number;
+    /** Pixel x of the selection end within the plot area. */
+    selectionX1: number;
+}
+/** Renders brush resize pills above the outside blur portal (`z-[2]`). */
+export declare function ChartBrushHandleOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, }: ChartBrushHandleOverlayProps & ChartBrushOverlayHost): import("react").ReactPortal | null;
+export declare function ChartBrushHandleOverlay(props: ChartBrushHandleOverlayProps): import("react").JSX.Element;
+//# sourceMappingURL=chart-brush-handle.d.ts.map