@cronus-ui/ui 0.6.0

package/dist/charts/use-grid-shimmer.js

@@ -0,0 +1,63 @@
+"use client";
+import { animate, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { useEffect } from "react";
+import { LINE_LOADING_LOOP_PAUSE_MS, LINE_LOADING_PULSE_CYCLE_S, LINE_LOADING_PULSE_EASE, } from "./line-loading-timing.js";
+export function useGridShimmer({ innerWidth, shimmer, shimmerLength, shimmerSpeed, shimmerSync, active, oneShot = false, }) {
+    const progress = useMotionValue(0);
+    const reducedMotion = useReducedMotion();
+    const shimmerCycleS = LINE_LOADING_PULSE_CYCLE_S / Math.max(shimmerSpeed, 0.1);
+    const shimmerEnabled = active && shimmer && reducedMotion !== true && innerWidth > 0;
+    useEffect(() => {
+        if (!shimmerEnabled) {
+            return;
+        }
+        let cancelled = false;
+        let timeoutId;
+        let controls;
+        const runSyncedCycle = () => {
+            if (cancelled) {
+                return;
+            }
+            progress.set(0);
+            controls = animate(progress, 1, {
+                duration: shimmerCycleS,
+                ease: [...LINE_LOADING_PULSE_EASE],
+                onComplete: () => {
+                    if (cancelled) {
+                        return;
+                    }
+                    timeoutId = window.setTimeout(runSyncedCycle, LINE_LOADING_LOOP_PAUSE_MS);
+                },
+            });
+        };
+        if (shimmerSync && oneShot) {
+            progress.set(0);
+            controls = animate(progress, 1, {
+                duration: shimmerCycleS / 2,
+                ease: [...LINE_LOADING_PULSE_EASE],
+            });
+            return () => controls?.stop();
+        }
+        if (shimmerSync) {
+            runSyncedCycle();
+            return () => {
+                cancelled = true;
+                controls?.stop();
+                if (timeoutId !== undefined) {
+                    window.clearTimeout(timeoutId);
+                }
+            };
+        }
+        progress.set(0);
+        controls = animate(progress, 1, {
+            duration: shimmerCycleS,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [...LINE_LOADING_PULSE_EASE],
+        });
+        return () => controls?.stop();
+    }, [oneShot, progress, shimmerCycleS, shimmerEnabled, shimmerSync]);
+    const shimmerX = useTransform(progress, (value) => -shimmerLength + value * (innerWidth + shimmerLength * 2));
+    const shimmerTransform = useTransform(shimmerX, (x) => `translate(${x}, 0)`);
+    return { shimmerEnabled, shimmerTransform };
+}
+//# sourceMappingURL=use-grid-shimmer.js.map

package/dist/charts/use-highlight-segment.d.ts

@@ -0,0 +1,14 @@
+import { useSpring } from "motion/react";
+export interface HighlightSegmentResult {
+    xSpring: ReturnType<typeof useSpring>;
+    widthSpring: ReturnType<typeof useSpring>;
+    isActive: boolean;
+}
+/**
+ * @param enabled set false when there is no stroke to highlight (e.g. an area
+ *   with `showLine={false}`); defaults true.
+ */
+export declare function useHighlightSegment({ enabled, }?: {
+    enabled?: boolean;
+}): HighlightSegmentResult;
+//# sourceMappingURL=use-highlight-segment.d.ts.map

package/dist/charts/use-highlight-segment.js

@@ -0,0 +1,34 @@
+"use client";
+import { useSpring } from "motion/react";
+import { useMemo, useRef } from "react";
+import { useChartConfig } from "./chart-config-context.js";
+import { useChartHover, useChartStable } from "./chart-context.js";
+import { computeSegmentBounds, INACTIVE_SEGMENT } from "./highlight-segment-bounds.js";
+/**
+ * @param enabled set false when there is no stroke to highlight (e.g. an area
+ *   with `showLine={false}`); defaults true.
+ */
+export function useHighlightSegment({ enabled = true, } = {}) {
+    const { data, xScale, xAccessor } = useChartStable();
+    const { tooltipData, selection } = useChartHover();
+    const { highlightSpring } = useChartConfig();
+    const bounds = useMemo(() => enabled
+        ? computeSegmentBounds(data, xScale, xAccessor, tooltipData, selection)
+        : INACTIVE_SEGMENT, [enabled, data, xScale, xAccessor, tooltipData, selection]);
+    const xSpring = useSpring(0, highlightSpring);
+    const widthSpring = useSpring(0, highlightSpring);
+    // Jump on inactive→active so the band appears at the hovered point instead
+    // of sliding in from x=0; ease on subsequent moves.
+    const wasActive = useRef(false);
+    if (bounds.isActive && !wasActive.current) {
+        xSpring.jump(bounds.x);
+        widthSpring.jump(bounds.width);
+    }
+    else {
+        xSpring.set(bounds.x);
+        widthSpring.set(bounds.width);
+    }
+    wasActive.current = bounds.isActive;
+    return { xSpring, widthSpring, isActive: bounds.isActive };
+}
+//# sourceMappingURL=use-highlight-segment.js.map

package/dist/charts/use-mount-progress.d.ts

@@ -0,0 +1,4 @@
+import { type Transition } from "motion/react";
+/** Drives 0→1 enter progress using the studio motion transition (spring or tween). */
+export declare function useMountProgress(enterTransition: Transition | undefined, delaySeconds: number, replayKey: number | string): import("motion/react").MotionValue<number>;
+//# sourceMappingURL=use-mount-progress.d.ts.map

package/dist/charts/use-mount-progress.js

@@ -0,0 +1,22 @@
+"use client";
+import { animate, useMotionValue } from "motion/react";
+import { useEffect, useRef } from "react";
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+/** Drives 0→1 enter progress using the studio motion transition (spring or tween). */
+export function useMountProgress(enterTransition, delaySeconds, replayKey) {
+    const progress = useMotionValue(0);
+    const transitionRef = useRef(enterTransition);
+    transitionRef.current = enterTransition;
+    // replayKey intentionally retriggers enter when motion settings change
+    // biome-ignore lint/correctness/useExhaustiveDependencies: replayKey
+    useEffect(() => {
+        progress.set(0);
+        const controls = animate(progress, 1, {
+            ...(transitionRef.current ?? DEFAULT_CHART_ENTER_TRANSITION),
+            delay: delaySeconds,
+        });
+        return () => controls.stop();
+    }, [delaySeconds, replayKey, progress]);
+    return progress;
+}
+//# sourceMappingURL=use-mount-progress.js.map

package/dist/charts/use-scatter-chart-interaction.d.ts

@@ -0,0 +1,35 @@
+import type { ScaleLinear, ScaleTime } from "d3-scale";
+import type { LineConfig, Margin, TooltipData } from "./chart-context.js";
+import type { ChartSelection } from "./use-chart-interaction.js";
+type XScale = ScaleTime<number, number>;
+type YScale = ScaleLinear<number, number>;
+interface UseScatterChartInteractionParams {
+    xScale: XScale;
+    yScale: YScale;
+    yScales: Record<string, YScale>;
+    data: Record<string, unknown>[];
+    lines: LineConfig[];
+    margin: Margin;
+    xAccessor: (d: Record<string, unknown>) => Date;
+    bisectDate: (data: Record<string, unknown>[], date: Date, lo: number) => number;
+    canInteract: boolean;
+}
+interface ScatterChartInteractionResult {
+    tooltipData: TooltipData | null;
+    setTooltipData: React.Dispatch<React.SetStateAction<TooltipData | null>>;
+    selection: ChartSelection | null;
+    clearSelection: () => void;
+    interactionHandlers: {
+        onMouseMove?: (event: React.MouseEvent<SVGGElement>) => void;
+        onMouseLeave?: () => void;
+        onMouseDown?: (event: React.MouseEvent<SVGGElement>) => void;
+        onMouseUp?: () => void;
+        onTouchStart?: (event: React.TouchEvent<SVGGElement>) => void;
+        onTouchMove?: (event: React.TouchEvent<SVGGElement>) => void;
+        onTouchEnd?: () => void;
+    };
+    interactionStyle: React.CSSProperties;
+}
+export declare function useScatterChartInteraction({ xScale, yScale, yScales, data, lines, margin, xAccessor, bisectDate, canInteract, }: UseScatterChartInteractionParams): ScatterChartInteractionResult;
+export {};
+//# sourceMappingURL=use-scatter-chart-interaction.d.ts.map

package/dist/charts/use-scatter-chart-interaction.js

@@ -0,0 +1,228 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+import { localPointFromSvg } from "./scatter-svg.js";
+import { useScheduledTooltip } from "./use-scheduled-tooltip.js";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+export function useScatterChartInteraction({ xScale, yScale, yScales, data, lines, margin, xAccessor, bisectDate, canInteract, }) {
+    const [selection, setSelection] = useState(null);
+    const { tooltipData, setTooltipData, scheduleTooltip, clearTooltip, resetTooltipDedupe } = useScheduledTooltip();
+    const isDraggingRef = useRef(false);
+    const dragStartXRef = useRef(0);
+    const resolveTooltipFromX = useCallback((pixelX) => {
+        const x0 = xScale.invert(pixelX);
+        const index = bisectDate(data, x0, 1);
+        const d0 = data[index - 1];
+        const d1 = data[index];
+        if (!d0) {
+            return null;
+        }
+        let d = d0;
+        let finalIndex = index - 1;
+        if (d1) {
+            const d0Time = xAccessor(d0).getTime();
+            const d1Time = xAccessor(d1).getTime();
+            if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+                d = d1;
+                finalIndex = index;
+            }
+        }
+        const yPositions = {};
+        for (const line of lines) {
+            const value = d[line.dataKey];
+            if (typeof value === "number") {
+                const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? yScale;
+                yPositions[line.dataKey] = axisScale(value) ?? 0;
+            }
+        }
+        return {
+            point: d,
+            index: finalIndex,
+            x: xScale(xAccessor(d)) ?? 0,
+            yPositions,
+        };
+    }, [xScale, yScale, yScales, data, lines, xAccessor, bisectDate]);
+    const resolveIndexFromX = useCallback((pixelX) => {
+        const x0 = xScale.invert(pixelX);
+        const index = bisectDate(data, x0, 1);
+        const d0 = data[index - 1];
+        const d1 = data[index];
+        if (!d0) {
+            return 0;
+        }
+        if (d1) {
+            const d0Time = xAccessor(d0).getTime();
+            const d1Time = xAccessor(d1).getTime();
+            if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+                return index;
+            }
+        }
+        return index - 1;
+    }, [xScale, data, xAccessor, bisectDate]);
+    const getChartX = useCallback((event, touchIndex = 0) => {
+        const svg = event.currentTarget.ownerSVGElement;
+        let clientX;
+        let clientY;
+        if ("touches" in event) {
+            const touch = event.touches[touchIndex];
+            if (!touch) {
+                return null;
+            }
+            clientX = touch.clientX;
+            clientY = touch.clientY;
+        }
+        else {
+            clientX = event.clientX;
+            clientY = event.clientY;
+        }
+        const point = localPointFromSvg(svg, clientX, clientY);
+        if (!point) {
+            return null;
+        }
+        return point.x - margin.left;
+    }, [margin.left]);
+    const handleMouseMove = useCallback((event) => {
+        const chartX = getChartX(event);
+        if (chartX === null) {
+            return;
+        }
+        if (isDraggingRef.current) {
+            const startX = Math.min(dragStartXRef.current, chartX);
+            const endX = Math.max(dragStartXRef.current, chartX);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+            return;
+        }
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+            scheduleTooltip(tooltip);
+        }
+    }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip]);
+    const handleMouseLeave = useCallback(() => {
+        clearTooltip();
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+        }
+        setSelection(null);
+    }, [clearTooltip]);
+    const handleMouseDown = useCallback((event) => {
+        const chartX = getChartX(event);
+        if (chartX === null) {
+            return;
+        }
+        isDraggingRef.current = true;
+        dragStartXRef.current = chartX;
+        clearTooltip();
+        setSelection(null);
+    }, [getChartX, clearTooltip]);
+    const handleMouseUp = useCallback(() => {
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+        }
+        setSelection(null);
+    }, []);
+    const handleTouchStart = useCallback((event) => {
+        if (event.touches.length === 1) {
+            event.preventDefault();
+            const chartX = getChartX(event, 0);
+            if (chartX === null) {
+                return;
+            }
+            const tooltip = resolveTooltipFromX(chartX);
+            if (tooltip) {
+                scheduleTooltip(tooltip);
+            }
+        }
+        else if (event.touches.length === 2) {
+            event.preventDefault();
+            resetTooltipDedupe();
+            clearTooltip();
+            const x0 = getChartX(event, 0);
+            const x1 = getChartX(event, 1);
+            if (x0 === null || x1 === null) {
+                return;
+            }
+            const startX = Math.min(x0, x1);
+            const endX = Math.max(x0, x1);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+        }
+    }, [
+        getChartX,
+        resolveTooltipFromX,
+        resolveIndexFromX,
+        scheduleTooltip,
+        resetTooltipDedupe,
+        clearTooltip,
+    ]);
+    const handleTouchMove = useCallback((event) => {
+        if (event.touches.length === 1) {
+            event.preventDefault();
+            const chartX = getChartX(event, 0);
+            if (chartX === null) {
+                return;
+            }
+            const tooltip = resolveTooltipFromX(chartX);
+            if (tooltip) {
+                scheduleTooltip(tooltip);
+            }
+        }
+        else if (event.touches.length === 2) {
+            event.preventDefault();
+            const x0 = getChartX(event, 0);
+            const x1 = getChartX(event, 1);
+            if (x0 === null || x1 === null) {
+                return;
+            }
+            const startX = Math.min(x0, x1);
+            const endX = Math.max(x0, x1);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+        }
+    }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip]);
+    const handleTouchEnd = useCallback(() => {
+        clearTooltip();
+        setSelection(null);
+    }, [clearTooltip]);
+    const clearSelection = useCallback(() => {
+        setSelection(null);
+    }, []);
+    const interactionHandlers = canInteract
+        ? {
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onMouseDown: handleMouseDown,
+            onMouseUp: handleMouseUp,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+        }
+        : {};
+    const interactionStyle = {
+        cursor: canInteract ? "crosshair" : "default",
+        touchAction: "none",
+    };
+    return {
+        tooltipData,
+        setTooltipData,
+        selection,
+        clearSelection,
+        interactionHandlers,
+        interactionStyle,
+    };
+}
+//# sourceMappingURL=use-scatter-chart-interaction.js.map

package/dist/charts/use-scheduled-tooltip.d.ts

@@ -0,0 +1,9 @@
+export interface ScheduledTooltipControls<T> {
+    tooltipData: T | null;
+    setTooltipData: React.Dispatch<React.SetStateAction<T | null>>;
+    scheduleTooltip: (tooltip: T, dedupeKey?: string) => void;
+    clearTooltip: () => void;
+    resetTooltipDedupe: () => void;
+}
+export declare function useScheduledTooltip<T>(): ScheduledTooltipControls<T>;
+//# sourceMappingURL=use-scheduled-tooltip.d.ts.map

package/dist/charts/use-scheduled-tooltip.js

@@ -0,0 +1,76 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function defaultDedupeKey(tooltip) {
+    if (typeof tooltip === "object" &&
+        tooltip !== null &&
+        "index" in tooltip &&
+        typeof tooltip.index === "number") {
+        const { index, x } = tooltip;
+        if (typeof x === "number") {
+            return `${index}:${Math.round(x)}`;
+        }
+        return String(index);
+    }
+    return JSON.stringify(tooltip);
+}
+export function useScheduledTooltip() {
+    const [tooltipData, setTooltipData] = useState(null);
+    const lastKeyRef = useRef(null);
+    const pendingRef = useRef(null);
+    const rafRef = useRef(null);
+    const pendingKeyRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, []);
+    const commitTooltip = useCallback((tooltip, dedupeKey) => {
+        if (dedupeKey === lastKeyRef.current) {
+            return;
+        }
+        lastKeyRef.current = dedupeKey;
+        setTooltipData(tooltip);
+    }, []);
+    const scheduleTooltip = useCallback((tooltip, dedupeKey) => {
+        const key = dedupeKey ?? defaultDedupeKey(tooltip);
+        pendingRef.current = tooltip;
+        pendingKeyRef.current = key;
+        if (key === lastKeyRef.current) {
+            return;
+        }
+        if (rafRef.current !== null) {
+            return;
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            const next = pendingRef.current;
+            const nextKey = pendingKeyRef.current;
+            if (next && nextKey) {
+                commitTooltip(next, nextKey);
+            }
+        });
+    }, [commitTooltip]);
+    const clearTooltip = useCallback(() => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        pendingRef.current = null;
+        pendingKeyRef.current = null;
+        lastKeyRef.current = null;
+        setTooltipData(null);
+    }, []);
+    const resetTooltipDedupe = useCallback(() => {
+        lastKeyRef.current = null;
+    }, []);
+    return {
+        tooltipData,
+        setTooltipData,
+        scheduleTooltip,
+        clearTooltip,
+        resetTooltipDedupe,
+    };
+}
+//# sourceMappingURL=use-scheduled-tooltip.js.map

package/dist/charts/visx-pattern.d.ts

@@ -0,0 +1,19 @@
+import { PatternCircles as VisxPatternCircles, PatternHexagons as VisxPatternHexagons, PatternLines as VisxPatternLines, PatternWaves as VisxPatternWaves } from "@visx/pattern";
+import type { ComponentProps } from "react";
+export declare function PatternLines(props: ComponentProps<typeof VisxPatternLines>): import("react").JSX.Element;
+export declare namespace PatternLines {
+    var displayName: string;
+}
+export declare function PatternCircles(props: ComponentProps<typeof VisxPatternCircles>): import("react").JSX.Element;
+export declare namespace PatternCircles {
+    var displayName: string;
+}
+export declare function PatternWaves(props: ComponentProps<typeof VisxPatternWaves>): import("react").JSX.Element;
+export declare namespace PatternWaves {
+    var displayName: string;
+}
+export declare function PatternHexagons(props: ComponentProps<typeof VisxPatternHexagons>): import("react").JSX.Element;
+export declare namespace PatternHexagons {
+    var displayName: string;
+}
+//# sourceMappingURL=visx-pattern.d.ts.map

package/dist/charts/visx-pattern.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PatternCircles as VisxPatternCircles, PatternHexagons as VisxPatternHexagons, PatternLines as VisxPatternLines, PatternWaves as VisxPatternWaves, } from "@visx/pattern";
+export function PatternLines(props) {
+    return _jsx(VisxPatternLines, { ...props });
+}
+PatternLines.displayName = "PatternLines";
+export function PatternCircles(props) {
+    return _jsx(VisxPatternCircles, { ...props });
+}
+PatternCircles.displayName = "PatternCircles";
+export function PatternWaves(props) {
+    return _jsx(VisxPatternWaves, { ...props });
+}
+PatternWaves.displayName = "PatternWaves";
+export function PatternHexagons(props) {
+    return _jsx(VisxPatternHexagons, { ...props });
+}
+PatternHexagons.displayName = "PatternHexagons";
+//# sourceMappingURL=visx-pattern.js.map

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

@@ -0,0 +1,27 @@
+export interface XAxisProps {
+    /** Number of ticks to show (including first and last). Default: 5. */
+    numTicks?: number;
+    /** Width of the date ticker box for fade calculation. Default: 50 */
+    tickerHalfWidth?: number;
+    /**
+     * `"data"` — tick labels snap to data rows so crosshair and tooltip stay aligned (default).
+     * `"domain"` — evenly spaced ticks across the time domain (may not align with hover).
+     */
+    tickMode?: "domain" | "data";
+}
+/**
+ * Picks tick indices with the most even on-screen spacing. Tries
+ * `targetCount ± 1` and evaluates every gap layout when feasible.
+ */
+export declare function selectEvenlySpacedIndices(length: number, targetCount: number, options?: {
+    data?: Record<string, unknown>[];
+    dateLabels?: string[];
+    xAccessor?: (d: Record<string, unknown>) => Date;
+    resolveXPx?: (index: number) => number;
+}): number[];
+export declare function XAxis(props: XAxisProps): import("react").JSX.Element | null;
+export declare namespace XAxis {
+    var displayName: string;
+}
+export default XAxis;
+//# sourceMappingURL=x-axis.d.ts.map