@cronus-ui/ui 0.6.0

package/dist/charts/area.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveMonotoneX } from "@visx/curve";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { AreaGradientDefs } from "./area-gradient-defs.js";
+import { chartCssVars, useChartStable, useYScale } from "./chart-context.js";
+import { resolveFadeSides } from "./fade-edges.js";
+import { LineLoadingPulseStroke, resolveLineLoadingPulseMode, } from "./line-loading-pulse.js";
+import { LINE_LOADING_LOOP_PAUSE_MS } from "./line-loading-timing.js";
+import { LineLoadingSweep } from "./loading-sweep.js";
+import { resolveDashTailBounds, usePathStrokeMetrics } from "./path-stroke-utils.js";
+import { SeriesDashTailOverlay } from "./series-dash-tail-overlay.js";
+import { SeriesHighlightLayer } from "./series-highlight-layer.js";
+import { SeriesHoverDim } from "./series-hover-dim.js";
+import { SeriesMarkers } from "./series-markers.js";
+function useAreaLoadingPulseState(chartPhase, loading, loadingPulseMode, notifyLoadingPulseComplete) {
+    const phasePulseMode = resolveLineLoadingPulseMode(chartPhase);
+    const pulseMode = loading === false ? null : (loadingPulseMode ?? (loading === true ? "loop" : phasePulseMode));
+    const showLoadingPulse = pulseMode != null;
+    const showSeriesContent = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady";
+    const [pulseEpoch, setPulseEpoch] = useState(0);
+    const handleLoadingPulseComplete = useCallback(() => {
+        if (pulseMode === "loop") {
+            window.setTimeout(() => {
+                setPulseEpoch((epoch) => epoch + 1);
+            }, LINE_LOADING_LOOP_PAUSE_MS);
+            return;
+        }
+        notifyLoadingPulseComplete?.();
+    }, [notifyLoadingPulseComplete, pulseMode]);
+    return {
+        handleLoadingPulseComplete,
+        pulseMode,
+        pulseEpoch,
+        showLoadingPulse,
+        showSeriesContent,
+    };
+}
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mirrors Line series layout (fill, stroke, dash, markers, pulse)
+export function Area({ dataKey, yAxisId, fill = chartCssVars.linePrimary, fillOpacity = 0.4, stroke, strokeWidth = 2, curve = curveMonotoneX, animate = true, showLine = true, showHighlight = true, gradientToOpacity = 0, gradientSpan = 1, fadeEdges = false, showMarkers = false, markers, dashFromIndex, dashArray = "6,4", loading, loadingStroke = chartCssVars.foreground, loadingStrokeOpacity = 0.5, loadingPulseMode, loadingStyle = "pulse", }) {
+    // Stable slice only: hover state lives inside `<SeriesHoverDim>` and
+    // `<SeriesHighlightLayer>` so this component (and its expensive
+    // <SeriesDashTailOverlay> child) does not re-render on cursor motion.
+    // The reveal-clip is now a single shared clipPath at the chart-shell
+    // level (`time-series-chart-shell.tsx`); we no longer render a per-area
+    // `<ChartRevealClip>` or read `revealEpoch` here.
+    const { data, renderData, xScale, innerHeight, innerWidth, xAccessor, lines, chartPhase, notifyLoadingPulseComplete, } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const { handleLoadingPulseComplete, pulseMode, pulseEpoch, showLoadingPulse, showSeriesContent } = useAreaLoadingPulseState(chartPhase, loading, loadingPulseMode, notifyLoadingPulseComplete);
+    const seriesIndex = useMemo(() => {
+        const index = lines.findIndex((line) => line.dataKey === dataKey);
+        return index >= 0 ? index : 0;
+    }, [lines, dataKey]);
+    const pathRef = useRef(null);
+    const { pathLength, pathD } = usePathStrokeMetrics(pathRef, [
+        renderData,
+        innerWidth,
+        dashFromIndex,
+        showLine,
+        showSeriesContent,
+        showLoadingPulse,
+    ]);
+    // Unique IDs for this area
+    const uniqueId = useId();
+    const gradientId = `area-gradient-${dataKey}-${uniqueId}`;
+    const strokeGradientId = `area-stroke-gradient-${dataKey}-${uniqueId}`;
+    const edgeMaskId = `area-edge-mask-${dataKey}-${uniqueId}`;
+    const edgeGradientId = `${edgeMaskId}-gradient`;
+    const isPatternFill = fill.startsWith("url(");
+    const showAreaFill = isPatternFill || fillOpacity > 0;
+    const areaFill = isPatternFill ? fill : `url(#${gradientId})`;
+    // Resolved stroke color (defaults to fill; pattern URLs need a real color)
+    const resolvedStroke = stroke || (isPatternFill ? chartCssVars.linePrimary : fill);
+    const getY = useCallback((d) => {
+        const value = d[dataKey];
+        return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    }, [dataKey, yScale]);
+    const hasDashTail = resolveDashTailBounds(dashFromIndex, data.length);
+    // The stroke gradient is only emitted when at least one edge fades, so fall
+    // back to the resolved solid color otherwise — avoids an invalid url(#...).
+    const fadeSides = resolveFadeSides(fadeEdges);
+    const useViewportEdgeFade = fadeSides.any && !isPatternFill;
+    let strokePaint = resolvedStroke;
+    if (!useViewportEdgeFade && fadeSides.any) {
+        strokePaint = `url(#${strokeGradientId})`;
+    }
+    const highlightEnabled = showHighlight && showLine && !showLoadingPulse && showSeriesContent;
+    const showSeriesStroke = showSeriesContent && showLine;
+    let visibleStroke = "transparent";
+    if (showSeriesStroke && !hasDashTail) {
+        visibleStroke = strokePaint;
+    }
+    const shouldMeasurePath = showLine && (showSeriesContent || showLoadingPulse);
+    const seriesLayers = (_jsxs(_Fragment, { children: [showSeriesContent && showAreaFill ? (_jsx(AreaClosed, { curve: curve, data: renderData, fill: areaFill, x: (d) => xScale(xAccessor(d)) ?? 0, y: getY, yScale: yScale })) : null, shouldMeasurePath ? (_jsxs(_Fragment, { children: [_jsx(LinePath, { curve: curve, data: renderData, innerRef: pathRef, stroke: visibleStroke, strokeLinecap: "round", strokeWidth: strokeWidth, x: (d) => xScale(xAccessor(d)) ?? 0, y: getY }), showSeriesStroke ? (_jsx(SeriesDashTailOverlay, { dashArray: dashArray, dashFromIndex: dashFromIndex, data: data, innerHeight: innerHeight, innerWidth: innerWidth, pathD: pathD, pathLength: pathLength, stroke: strokePaint, strokeWidth: strokeWidth, xAccessor: xAccessor, xScale: xScale })) : null] })) : null] }));
+    // Sweep style owns all loading modes (loop + the exit/enter transitions),
+    // drawing its own silhouette; the pulse covers the default style.
+    const sweepLoading = showLoadingPulse && innerWidth > 0 && loadingStyle === "sweep";
+    const pulseLoading = showLoadingPulse && innerWidth > 0 && !sweepLoading;
+    return (_jsxs(_Fragment, { children: [_jsx(AreaGradientDefs, { edgeGradientId: edgeGradientId, edgeMaskId: edgeMaskId, fadeEdges: fadeEdges, fill: fill, fillOpacity: fillOpacity, gradientId: gradientId, gradientSpan: gradientSpan, gradientToOpacity: gradientToOpacity, innerHeight: innerHeight, innerWidth: innerWidth, isPatternFill: isPatternFill, resolvedStroke: resolvedStroke, strokeGradientId: strokeGradientId }), _jsx(SeriesHoverDim, { dimOpacity: 0.6, enabled: showHighlight, seriesIndex: seriesIndex, children: useViewportEdgeFade ? _jsx("g", { mask: `url(#${edgeMaskId})`, children: seriesLayers }) : seriesLayers }), _jsx(SeriesHighlightLayer, { enabled: highlightEnabled, height: innerHeight, pathRef: pathRef, stroke: resolvedStroke, strokeWidth: strokeWidth }), showMarkers && showSeriesContent ? (_jsx(SeriesMarkers, { animate: animate, dataKey: dataKey, ...markers, fill: markers?.fill ?? resolvedStroke, stroke: markers?.stroke ?? markers?.fill ?? resolvedStroke })) : null, sweepLoading ? (_jsx(LineLoadingSweep, { curve: curve, mode: pulseMode ?? "loop", onTransitionComplete: handleLoadingPulseComplete, stroke: loadingStroke, strokeOpacity: loadingStrokeOpacity, strokeWidth: strokeWidth, withArea: true }, "loading-sweep")) : null, pulseLoading && pathD ? (_jsx(LineLoadingPulseStroke, { loopEpoch: pulseEpoch, mode: pulseMode ?? undefined, onCycleComplete: handleLoadingPulseComplete, pathD: pathD, stroke: loadingStroke, strokeOpacity: loadingStrokeOpacity, strokeWidth: strokeWidth }, "loading-pulse")) : null] }));
+}
+Area.displayName = "Area";
+export default Area;
+//# sourceMappingURL=area.js.map

package/dist/charts/background.d.ts

@@ -0,0 +1,27 @@
+import { type PatternPresetId, type PatternPresetOptions } from "./pattern-preset.js";
+export type BackgroundPatternPreset = PatternPresetId;
+export interface BackgroundProps extends PatternPresetOptions {
+    /** Pattern preset. `"none"` renders nothing. */
+    pattern?: BackgroundPatternPreset;
+    /** Pattern stroke color. Default: `var(--chart-grid)` */
+    color?: string;
+    /** Apply the pattern texture to the plot area. Default: true */
+    showFill?: boolean;
+    /** Pattern fill opacity. Default: 1 */
+    opacity?: number;
+    /** Fade pattern at the left and right chart edges. Default: true */
+    fadeHorizontal?: boolean;
+    /** Fade pattern at the top and bottom chart edges. Default: true */
+    fadeVertical?: boolean;
+    /** Horizontal fade zone as % of plot width per edge. Default: 10 */
+    fadeHorizontalLength?: number;
+    /** Vertical fade zone as % of plot height per edge. Default: 10 */
+    fadeVerticalLength?: number;
+}
+/** Plot-area pattern fill for charts without a grid. Renders behind series layers. */
+export declare function Background({ pattern, color, scale, strokeWidth, radius, complement, fill, dotFill, tileBackground, showFill, opacity, fadeHorizontal, fadeVertical, fadeHorizontalLength, fadeVerticalLength, }: BackgroundProps): import("react").JSX.Element | null;
+export declare namespace Background {
+    var displayName: string;
+}
+export default Background;
+//# sourceMappingURL=background.d.ts.map

package/dist/charts/background.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useId, useMemo } from "react";
+import { useChartStable } from "./chart-context.js";
+import { renderPatternPreset, } from "./pattern-preset.js";
+const BACKGROUND_ENTER_FADE_MS = 420;
+function clampFadeLength(length) {
+    return Math.min(45, Math.max(0, length));
+}
+function fadeMaskStops(lengthPercent) {
+    const edge = clampFadeLength(lengthPercent);
+    return [
+        { offset: "0%", opacity: 0 },
+        { offset: `${edge}%`, opacity: 1 },
+        { offset: `${100 - edge}%`, opacity: 1 },
+        { offset: "100%", opacity: 0 },
+    ];
+}
+/** Plot-area pattern fill for charts without a grid. Renders behind series layers. */
+export function Background({ pattern = "diagonal", color = "var(--chart-grid)", scale = 1, strokeWidth, radius, complement, fill, dotFill, tileBackground, showFill = true, opacity = 1, fadeHorizontal = true, fadeVertical = true, fadeHorizontalLength = 10, fadeVerticalLength = 10, }) {
+    const { innerWidth, innerHeight, isLoaded, enterTransition } = useChartStable();
+    const uniqueId = useId();
+    const patternId = `chart-background-${uniqueId.replace(/:/g, "")}`;
+    const hStops = useMemo(() => fadeMaskStops(fadeHorizontalLength), [fadeHorizontalLength]);
+    const vStops = useMemo(() => fadeMaskStops(fadeVerticalLength), [fadeVerticalLength]);
+    if (pattern === "none" || !showFill || innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    const patternNode = renderPatternPreset(pattern, patternId, {
+        color,
+        scale,
+        strokeWidth,
+        radius,
+        complement,
+        fill,
+        dotFill,
+        tileBackground,
+    });
+    if (!patternNode) {
+        return null;
+    }
+    const fadeMask = fadeHorizontal || fadeVertical;
+    const hMaskId = `chart-background-fade-h-${uniqueId.replace(/:/g, "")}`;
+    const hGradientId = `${hMaskId}-gradient`;
+    const vMaskId = `chart-background-fade-v-${uniqueId.replace(/:/g, "")}`;
+    const vGradientId = `${vMaskId}-gradient`;
+    const combinedMaskId = `chart-background-fade-${uniqueId.replace(/:/g, "")}`;
+    let maskRef;
+    if (fadeHorizontal && fadeVertical) {
+        maskRef = `url(#${combinedMaskId})`;
+    }
+    else if (fadeHorizontal) {
+        maskRef = `url(#${hMaskId})`;
+    }
+    else if (fadeVertical) {
+        maskRef = `url(#${vMaskId})`;
+    }
+    const targetOpacity = opacity;
+    const revealOpacity = isLoaded ? targetOpacity : 0;
+    const enterFade = enterTransition && typeof enterTransition === "object"
+        ? enterTransition
+        : { duration: BACKGROUND_ENTER_FADE_MS / 1000, ease: "easeOut" };
+    return (_jsxs("g", { "aria-hidden": "true", className: "chart-background", children: [fadeMask ? (_jsxs("defs", { children: [fadeHorizontal ? (_jsxs(_Fragment, { children: [_jsx("linearGradient", { id: hGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: hStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: "white", stopOpacity: stop.opacity } }, stop.offset))) }), _jsx("mask", { id: hMaskId, children: _jsx("rect", { fill: `url(#${hGradientId})`, height: innerHeight, width: innerWidth, x: 0, y: 0 }) })] })) : null, fadeVertical ? (_jsxs(_Fragment, { children: [_jsx("linearGradient", { id: vGradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: vStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: "white", stopOpacity: stop.opacity } }, stop.offset))) }), _jsx("mask", { id: vMaskId, children: _jsx("rect", { fill: `url(#${vGradientId})`, height: innerHeight, width: innerWidth, x: 0, y: 0 }) })] })) : null, fadeHorizontal && fadeVertical ? (_jsx("mask", { id: combinedMaskId, children: _jsx("g", { mask: `url(#${hMaskId})`, children: _jsx("rect", { fill: `url(#${vGradientId})`, height: innerHeight, width: innerWidth, x: 0, y: 0 }) }) })) : null] })) : null, _jsx("defs", { children: patternNode }), _jsx(motion.rect, { animate: { opacity: revealOpacity }, fill: `url(#${patternId})`, height: innerHeight, initial: { opacity: 0 }, mask: maskRef, transition: isLoaded ? enterFade : { duration: 0 }, width: innerWidth, x: 0, y: 0 })] }));
+}
+Background.displayName = "Background";
+export default Background;
+//# sourceMappingURL=background.js.map

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

@@ -0,0 +1,17 @@
+import type { Margin } from "./chart-context.js";
+export interface BarChartLoadingProps {
+    /** Chart margins. */
+    margin?: Partial<Margin>;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container. */
+    className?: string;
+}
+/**
+ * Turnkey loading skeleton for bar charts, a thin shortcut for
+ * `<BarChart status="loading" />`. Renders shimmer-swept placeholder bars while
+ * data is fetching; swap in a real `<BarChart>` once it resolves.
+ */
+export declare function BarChartLoading({ margin, aspectRatio, className, }: BarChartLoadingProps): import("react").JSX.Element;
+export default BarChartLoading;
+//# sourceMappingURL=bar-chart-loading.d.ts.map

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BarChart } from "./bar-chart.js";
+const EMPTY_DATA = [];
+/**
+ * Turnkey loading skeleton for bar charts, a thin shortcut for
+ * `<BarChart status="loading" />`. Renders shimmer-swept placeholder bars while
+ * data is fetching; swap in a real `<BarChart>` once it resolves.
+ */
+export function BarChartLoading({ margin, aspectRatio = "2 / 1", className = "", }) {
+    return (_jsx(BarChart, { aspectRatio: aspectRatio, className: className, data: EMPTY_DATA, margin: margin, status: "loading" }));
+}
+export default BarChartLoading;
+//# sourceMappingURL=bar-chart-loading.js.map

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

@@ -0,0 +1,55 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type Margin } from "./chart-context.js";
+import { type ChartPhase, type ChartStatus } from "./chart-phase.js";
+export type BarOrientation = "vertical" | "horizontal";
+export interface BarChartProps {
+    /** Data array - each item should have an x-axis key and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the categorical axis. Default: "name" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for bar grow transitions. */
+    animationEasing?: string;
+    /** 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;
+    /** Gap between bar groups as a fraction of band width (0-1). Default: 0.2 */
+    barGap?: number;
+    /** Fixed bar width in pixels. If not set, bars auto-size to fill the band. */
+    barWidth?: number;
+    /** Bar chart orientation. Default: "vertical" */
+    orientation?: BarOrientation;
+    /** Whether to stack bars instead of grouping them. Default: false */
+    stacked?: boolean;
+    /** Gap between stacked bar segments in pixels. Default: 0 */
+    stackGap?: number;
+    /** When set, tooltip Y positions snap to the top square center (shape variant). */
+    squareSnap?: {
+        squareGap: number;
+        groupGap?: number;
+        fit?: boolean;
+    };
+    /** Child components (Bar, Grid, ChartTooltip, etc.). Optional — omit for a
+     * pure `status="loading"` skeleton. */
+    children?: ReactNode;
+    /** Reports reveal lifecycle for OG screenshots and loading orchestration. */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Fetch / display status. When `"loading"`, a shimmer skeleton replaces the
+     * bars (no chart data required). Default: `"ready"`. */
+    status?: ChartStatus;
+}
+export declare function BarChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, barGap, barWidth, orientation, stacked, stackGap, squareSnap, children, onPhaseChange, status, }: BarChartProps): import("react").JSX.Element;
+export declare namespace BarChart {
+    var displayName: string;
+}
+export default BarChart;
+//# sourceMappingURL=bar-chart.d.ts.map