@cronus-ui/ui 0.6.0

package/dist/charts/chart-brush-handle.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable } from "./chart-context.js";
+/** Matches shadcn `ResizableHandle` withHandle pill (`h-6 w-1 rounded-lg`). */
+const HANDLE_HEIGHT_PX = 24;
+const HANDLE_WIDTH_PX = 4;
+/**
+ * Invisible hit target for visx `BrushHandle` drag interaction.
+ * Visible pills render in `ChartBrushHandleOverlay` above the blur layer.
+ */
+function brushHandleCursor(className) {
+    return className.includes("left") || className.includes("right") ? "ew-resize" : "ns-resize";
+}
+export function renderChartBrushHandle({ x, y, width, height, className }) {
+    return (_jsx("rect", { className: className, fill: "transparent", height: height, style: { cursor: brushHandleCursor(className) }, width: width, x: x, y: y }));
+}
+/** Renders brush resize pills above the outside blur portal (`z-[2]`). */
+export function ChartBrushHandleOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    const x0 = Math.max(0, Math.min(selectionX0, selectionX1, innerWidth));
+    const x1 = Math.max(x0, Math.min(Math.max(selectionX0, selectionX1), innerWidth));
+    const edges = x0 === x1 ? [x0] : [x0, x1];
+    const plotLeft = margin.left;
+    const plotTop = margin.top;
+    const handleTop = plotTop + (innerHeight - HANDLE_HEIGHT_PX) / 2;
+    return createPortal(_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[2]", children: edges.map((edgeX) => (_jsx("div", { className: "absolute shrink-0 rounded-lg", style: {
+                top: handleTop,
+                left: plotLeft + edgeX - HANDLE_WIDTH_PX / 2,
+                width: HANDLE_WIDTH_PX,
+                height: HANDLE_HEIGHT_PX,
+                backgroundColor: "var(--chart-brush-border)",
+            } }, edgeX))) }), container);
+}
+export function ChartBrushHandleOverlay(props) {
+    const { containerRef, margin } = useChartStable();
+    return _jsx(ChartBrushHandleOverlayContent, { ...props, containerRef: containerRef, margin: margin });
+}
+//# sourceMappingURL=chart-brush-handle.js.map

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

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import type { ChartBrushSelection } from "./chart-brush.js";
+export interface ChartBrushLayoutState {
+    xDomain: [Date, Date] | undefined;
+    xDomainSlotCount: number | undefined;
+    brushSelection: ChartBrushSelection | null;
+    onBrushSelectionChange: (selection: ChartBrushSelection | null) => void;
+}
+export interface ChartBrushLayoutProps {
+    /** Full dataset backing the brush strip and main chart. */
+    data: Record<string, unknown>[];
+    xDataKey?: string;
+    /** Extends the brush track max beyond the last data row (e.g. projection horizon). */
+    xExtentMax?: Date;
+    /** When false, children render without brush zoom state. */
+    enabled: boolean;
+    /** Fixed height of the brush strip in pixels. */
+    height: number;
+    /** When true, the main chart area hugs content instead of growing to fill space. */
+    fitMainContent?: boolean;
+    className?: string;
+    children: (layout: ChartBrushLayoutState) => ReactNode;
+    /** Mini chart + brush handles rendered below the main chart when `enabled`. */
+    brushStrip?: (layout: ChartBrushLayoutState) => ReactNode;
+}
+export declare const ChartBrushLayout: import("react").MemoExoticComponent<({ data, xDataKey, xExtentMax, enabled, height, fitMainContent, className, children, brushStrip, }: ChartBrushLayoutProps) => import("react").JSX.Element>;
+//# sourceMappingURL=chart-brush-layout.d.ts.map

package/dist/charts/chart-brush-layout.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { resolveBrushTrackXExtent } from "./filter-data-by-x-domain.js";
+function createXAccessor(xDataKey) {
+    return (d) => {
+        const value = d[xDataKey];
+        return value instanceof Date ? value : new Date(value);
+    };
+}
+export const ChartBrushLayout = memo(function ChartBrushLayout({ data, xDataKey = "date", xExtentMax, enabled, height, fitMainContent = false, className, children, brushStrip, }) {
+    const xAccessor = useMemo(() => createXAccessor(xDataKey), [xDataKey]);
+    const fullExtent = useMemo(() => resolveBrushTrackXExtent(data, xAccessor, xExtentMax), [data, xAccessor, xExtentMax]);
+    const [brushSelection, setBrushSelection] = useState(null);
+    useEffect(() => {
+        if (!fullExtent) {
+            setBrushSelection(null);
+            return;
+        }
+        setBrushSelection({ start: fullExtent[0], end: fullExtent[1] });
+    }, [fullExtent]);
+    const handleBrushSelectionChange = useCallback((selection) => {
+        if (!selection) {
+            if (fullExtent) {
+                setBrushSelection({ start: fullExtent[0], end: fullExtent[1] });
+            }
+            return;
+        }
+        setBrushSelection(selection);
+    }, [fullExtent]);
+    const layoutState = useMemo(() => ({
+        xDomain: enabled && brushSelection
+            ? [brushSelection.start, brushSelection.end]
+            : undefined,
+        xDomainSlotCount: enabled ? data.length : undefined,
+        brushSelection,
+        onBrushSelectionChange: handleBrushSelectionChange,
+    }), [brushSelection, data.length, enabled, handleBrushSelectionChange]);
+    return (_jsxs("div", { className: cn("flex size-full min-h-0 min-w-0 flex-col", fitMainContent ? "justify-start gap-1" : "gap-3", className), children: [_jsx("div", { className: cn("min-h-0 min-w-0", fitMainContent ? "shrink-0" : "flex-1"), children: children(layoutState) }), enabled && brushStrip ? (_jsx("div", { className: "min-h-0 shrink-0", style: { height }, children: brushStrip(layoutState) })) : null] }));
+});
+//# sourceMappingURL=chart-brush-layout.js.map

package/dist/charts/chart-brush-selection-overlay.d.ts

@@ -0,0 +1,19 @@
+import type { ChartBrushOverlayHost } from "./chart-brush-track-overlay.js";
+import { type PatternPresetId, type PatternPresetOptions } from "./pattern-preset.js";
+export type ChartBrushPatternPreset = PatternPresetId;
+export interface ChartBrushSelectionPattern extends PatternPresetOptions {
+    preset: ChartBrushPatternPreset;
+    color: string;
+    opacity?: number;
+}
+export interface ChartBrushSelectionOverlayProps {
+    innerWidth: number;
+    innerHeight: number;
+    selectionX0: number;
+    selectionX1: number;
+    pattern?: ChartBrushSelectionPattern;
+}
+/** Pattern fill between brush handles (`z-[1]`, above blur panes). */
+export declare function ChartBrushSelectionOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, pattern, }: ChartBrushSelectionOverlayProps & ChartBrushOverlayHost): import("react").ReactPortal | null;
+export declare function ChartBrushSelectionOverlay(props: ChartBrushSelectionOverlayProps): import("react").JSX.Element;
+//# sourceMappingURL=chart-brush-selection-overlay.d.ts.map

package/dist/charts/chart-brush-selection-overlay.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable } from "./chart-context.js";
+import { renderPatternPreset, } from "./pattern-preset.js";
+/** Pattern fill between brush handles (`z-[1]`, above blur panes). */
+export function ChartBrushSelectionOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, pattern, }) {
+    const [mounted, setMounted] = useState(false);
+    const patternId = useId().replace(/:/g, "");
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container && pattern && pattern.preset !== "none")) {
+        return null;
+    }
+    const x0 = Math.max(0, Math.min(selectionX0, selectionX1, innerWidth));
+    const x1 = Math.max(x0, Math.min(Math.max(selectionX0, selectionX1), innerWidth));
+    const selectionWidth = x1 - x0;
+    if (selectionWidth <= 0) {
+        return null;
+    }
+    const plotLeft = margin.left;
+    const plotTop = margin.top;
+    const patternNode = renderPatternPreset(pattern.preset, patternId, {
+        color: pattern.color,
+        scale: pattern.scale,
+        strokeWidth: pattern.strokeWidth,
+        radius: pattern.radius,
+        complement: pattern.complement,
+        fill: pattern.fill,
+        tileBackground: pattern.tileBackground,
+    });
+    if (!patternNode) {
+        return null;
+    }
+    return createPortal(_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[1]", height: "100%", width: "100%", children: [_jsx("defs", { children: patternNode }), _jsx("rect", { fill: `url(#${patternId})`, fillOpacity: pattern.opacity ?? 1, height: innerHeight, width: selectionWidth, x: plotLeft + x0, y: plotTop })] }), container);
+}
+export function ChartBrushSelectionOverlay(props) {
+    const { containerRef, margin } = useChartStable();
+    return (_jsx(ChartBrushSelectionOverlayContent, { ...props, containerRef: containerRef, margin: margin }));
+}
+//# sourceMappingURL=chart-brush-selection-overlay.js.map

package/dist/charts/chart-brush-track-overlay.d.ts

@@ -0,0 +1,23 @@
+import type { RefObject } from "react";
+import type { Margin } from "./chart-context.js";
+export interface ChartBrushTrackOverlayStyle {
+    /** Backdrop blur in px (0–5). Default: 1.5 */
+    blurPx?: number;
+    /** Fade blur at the outer left/right track ends. Default: true */
+    fadeOuterEdges?: boolean;
+}
+export interface ChartBrushTrackOverlayProps extends ChartBrushTrackOverlayStyle {
+    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;
+}
+export interface ChartBrushOverlayHost {
+    containerRef: RefObject<HTMLDivElement | null>;
+    margin: Margin;
+}
+export declare function ChartBrushTrackOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, blurPx, fadeOuterEdges, }: ChartBrushTrackOverlayProps & ChartBrushOverlayHost): import("react").ReactPortal | null;
+export declare function ChartBrushTrackOverlay(props: ChartBrushTrackOverlayProps): import("react").JSX.Element;
+//# sourceMappingURL=chart-brush-track-overlay.d.ts.map

package/dist/charts/chart-brush-track-overlay.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable } from "./chart-context.js";
+/** Fade dimming panes at the outer track ends — matches series edge fade (15%). */
+const BRUSH_TRACK_OUTER_FADE = 0.15;
+function outsidePaneStyle(edge, style) {
+    const fadeStop = `${BRUSH_TRACK_OUTER_FADE * 100}%`;
+    let mask;
+    if (style.fadeOuterEdges) {
+        mask =
+            edge === "left"
+                ? `linear-gradient(to right, transparent 0%, black ${fadeStop}, black 100%)`
+                : `linear-gradient(to left, transparent 0%, black ${fadeStop}, black 100%)`;
+    }
+    return {
+        pointerEvents: "none",
+        backdropFilter: style.blurPx > 0 ? `blur(${style.blurPx}px)` : undefined,
+        WebkitBackdropFilter: style.blurPx > 0 ? `blur(${style.blurPx}px)` : undefined,
+        maskImage: mask,
+        WebkitMaskImage: mask,
+    };
+}
+export function ChartBrushTrackOverlayContent({ containerRef, margin, innerWidth, innerHeight, selectionX0, selectionX1, blurPx = 1.5, fadeOuterEdges = true, }) {
+    const [mounted, setMounted] = useState(false);
+    const overlayStyle = {
+        blurPx: Math.min(5, Math.max(0, blurPx)),
+        fadeOuterEdges,
+    };
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    const x0 = Math.max(0, Math.min(selectionX0, selectionX1, innerWidth));
+    const x1 = Math.max(x0, Math.min(Math.max(selectionX0, selectionX1), innerWidth));
+    const leftWidth = Math.max(0, x0);
+    const rightWidth = Math.max(0, innerWidth - x1);
+    if (leftWidth <= 0 && rightWidth <= 0) {
+        return null;
+    }
+    const plotLeft = margin.left;
+    const plotTop = margin.top;
+    return createPortal(_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[1]", children: [leftWidth > 0 ? (_jsx("div", { className: "absolute", style: {
+                    ...outsidePaneStyle("left", overlayStyle),
+                    top: plotTop,
+                    left: plotLeft,
+                    width: leftWidth,
+                    height: innerHeight,
+                } })) : null, rightWidth > 0 ? (_jsx("div", { className: "absolute", style: {
+                    ...outsidePaneStyle("right", overlayStyle),
+                    top: plotTop,
+                    left: plotLeft + x1,
+                    width: rightWidth,
+                    height: innerHeight,
+                } })) : null] }), container);
+}
+export function ChartBrushTrackOverlay(props) {
+    const { containerRef, margin } = useChartStable();
+    return _jsx(ChartBrushTrackOverlayContent, { ...props, containerRef: containerRef, margin: margin });
+}
+//# sourceMappingURL=chart-brush-track-overlay.js.map

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

@@ -0,0 +1,32 @@
+import type React from "react";
+import { type ChartBrushSelectionPattern } from "./chart-brush-selection-overlay.js";
+export interface ChartBrushSelection {
+    start: Date;
+    end: Date;
+}
+export interface ChartBrushProps {
+    /** Callback when brush selection ends. Domain is the selected time range. */
+    onSelectionChange?: (domain: ChartBrushSelection | null) => void;
+    /** Brush direction. Default: "horizontal" for time range selection. */
+    brushDirection?: "horizontal" | "vertical" | "both";
+    /** Fill style for the selected region. Default: chart segment style. */
+    selectedBoxStyle?: React.SVGProps<SVGRectElement>;
+    /** Initial selection so the brush overlay is visible on load (e.g. first 50% of range). */
+    initialSelection?: ChartBrushSelection | null;
+    /** Current selection (e.g. from parent state). When set, a visible selection rect is drawn. */
+    selection?: ChartBrushSelection | null;
+    /** Use window move events for brush (can fix coordinate offset when SVG is in transformed container). Default: true for brush-in-strip. */
+    useWindowMoveEvents?: boolean;
+    /** Backdrop blur on dimmed track (0–5 px). Default: 1.5 */
+    blurPx?: number;
+    /** Fade dimmed regions at the outer track edges. Default: true */
+    fadeOuterEdges?: boolean;
+    /** Optional pattern overlay inside the brush selection window. */
+    selectionPattern?: ChartBrushSelectionPattern;
+}
+export declare function ChartBrush({ onSelectionChange, brushDirection, selectedBoxStyle, initialSelection, selection: _selection, useWindowMoveEvents, blurPx, fadeOuterEdges, selectionPattern, }: ChartBrushProps): React.JSX.Element | null;
+export declare namespace ChartBrush {
+    var displayName: string;
+}
+export default ChartBrush;
+//# sourceMappingURL=chart-brush.d.ts.map

package/dist/charts/chart-brush.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brush } from "@visx/brush";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { ChartBrushHandleOverlay, renderChartBrushHandle } from "./chart-brush-handle.js";
+import { ChartBrushSelectionOverlay, } from "./chart-brush-selection-overlay.js";
+import { ChartBrushTrackOverlay, } from "./chart-brush-track-overlay.js";
+import { chartCssVars, useChartStable } from "./chart-context.js";
+const BrushComponent = (() => Brush)();
+function toDate(value) {
+    if (value instanceof Date) {
+        return value;
+    }
+    if (typeof value === "number") {
+        return new Date(value);
+    }
+    return new Date(Number(value));
+}
+function boundsToPixelExtent(bounds, xScale, innerWidth) {
+    if (!bounds || typeof bounds.x0 === "undefined" || typeof bounds.x1 === "undefined") {
+        return null;
+    }
+    const start = toDate(bounds.x0);
+    const end = toDate(bounds.x1);
+    const xScaleFn = xScale;
+    const x0 = Math.max(0, xScaleFn(start < end ? start : end) ?? 0);
+    const x1 = Math.min(innerWidth, xScaleFn(end > start ? end : start) ?? innerWidth);
+    if (x1 <= x0) {
+        return null;
+    }
+    return { x0, x1 };
+}
+const ChartBrushInner = memo(function ChartBrushInner({ brushDirection = "horizontal", selectedBoxStyle, initialSelection, useWindowMoveEvents = true, xScale, yScale, innerWidth, innerHeight, margin, onBrushPreview, onBrushCommit, blurPx, fadeOuterEdges, selectionPattern, }) {
+    const initialBrushPosition = useMemo(() => {
+        if (!initialSelection || innerWidth <= 0 || innerHeight <= 0) {
+            return undefined;
+        }
+        const xScaleFn = xScale;
+        const x0 = Math.max(0, xScaleFn(initialSelection.start) ?? 0);
+        const x1 = Math.min(innerWidth, xScaleFn(initialSelection.end) ?? innerWidth);
+        if (x1 <= x0) {
+            return undefined;
+        }
+        return {
+            start: { x: x0, y: 0 },
+            end: { x: x1, y: innerHeight },
+        };
+    }, [initialSelection, xScale, innerWidth, innerHeight]);
+    const [pixelExtent, setPixelExtent] = useState(() => ({
+        x0: initialBrushPosition?.start.x ?? 0,
+        x1: initialBrushPosition?.end.x ?? innerWidth,
+    }));
+    useEffect(() => {
+        setPixelExtent({
+            x0: initialBrushPosition?.start.x ?? 0,
+            x1: initialBrushPosition?.end.x ?? innerWidth,
+        });
+    }, [initialBrushPosition, innerWidth]);
+    const updatePixelExtent = useCallback((bounds) => {
+        const pixels = boundsToPixelExtent(bounds, xScale, innerWidth);
+        if (pixels) {
+            setPixelExtent(pixels);
+        }
+    }, [innerWidth, xScale]);
+    const handleBrushPreview = useCallback((bounds) => {
+        updatePixelExtent(bounds);
+        onBrushPreview?.(bounds);
+    }, [onBrushPreview, updatePixelExtent]);
+    const handleBrushCommit = useCallback((bounds) => {
+        updatePixelExtent(bounds);
+        onBrushCommit(bounds);
+    }, [onBrushCommit, updatePixelExtent]);
+    const defaultStyle = {
+        fill: "transparent",
+        fillOpacity: 0,
+        stroke: chartCssVars.brushBorder,
+        strokeWidth: 1,
+    };
+    return (_jsxs("g", { className: "chart-brush", children: [_jsx(ChartBrushTrackOverlay, { blurPx: blurPx, fadeOuterEdges: fadeOuterEdges, innerHeight: innerHeight, innerWidth: innerWidth, selectionX0: pixelExtent.x0, selectionX1: pixelExtent.x1 }), _jsx(ChartBrushSelectionOverlay, { innerHeight: innerHeight, innerWidth: innerWidth, pattern: selectionPattern, selectionX0: pixelExtent.x0, selectionX1: pixelExtent.x1 }), _jsx(ChartBrushHandleOverlay, { innerHeight: innerHeight, innerWidth: innerWidth, selectionX0: pixelExtent.x0, selectionX1: pixelExtent.x1 }), _jsx(BrushComponent, { brushDirection: brushDirection, handleSize: 8, height: innerHeight, initialBrushPosition: initialBrushPosition, margin: useWindowMoveEvents ? margin : { top: 0, left: 0, right: 0, bottom: 0 }, onBrushEnd: handleBrushCommit, onChange: handleBrushPreview, renderBrushHandle: renderChartBrushHandle, selectedBoxStyle: selectedBoxStyle ?? defaultStyle, useWindowMoveEvents: useWindowMoveEvents, width: innerWidth, xScale: xScale, yScale: yScale }, `brush-${innerWidth}-${innerHeight}`)] }));
+});
+export function ChartBrush({ onSelectionChange, brushDirection = "horizontal", selectedBoxStyle, initialSelection, selection: _selection, useWindowMoveEvents = true, blurPx, fadeOuterEdges, selectionPattern, }) {
+    const { xScale, yScale, innerWidth, innerHeight, margin, isLoaded } = useChartStable();
+    const boundsToSelection = useCallback((bounds) => {
+        if (!bounds || typeof bounds.x0 === "undefined" || typeof bounds.x1 === "undefined") {
+            return null;
+        }
+        const start = toDate(bounds.x0);
+        const end = toDate(bounds.x1);
+        if (start.getTime() === end.getTime()) {
+            return null;
+        }
+        return {
+            start: start < end ? start : end,
+            end: end > start ? end : start,
+        };
+    }, []);
+    const notifySelectionChange = useCallback((bounds) => {
+        if (!onSelectionChange) {
+            return;
+        }
+        onSelectionChange(boundsToSelection(bounds));
+    }, [onSelectionChange, boundsToSelection]);
+    const handleBrushPreview = useCallback((bounds) => {
+        notifySelectionChange(bounds);
+    }, [notifySelectionChange]);
+    const handleBrushCommit = useCallback((bounds) => {
+        notifySelectionChange(bounds);
+    }, [notifySelectionChange]);
+    if (!isLoaded || innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    return (_jsx(ChartBrushInner, { blurPx: blurPx, brushDirection: brushDirection, fadeOuterEdges: fadeOuterEdges, initialSelection: initialSelection, innerHeight: innerHeight, innerWidth: innerWidth, margin: margin, onBrushCommit: handleBrushCommit, onBrushPreview: handleBrushPreview, selectedBoxStyle: selectedBoxStyle, selectionPattern: selectionPattern, useWindowMoveEvents: useWindowMoveEvents, xScale: xScale, yScale: yScale }));
+}
+ChartBrush.displayName = "ChartBrush";
+export default ChartBrush;
+//# sourceMappingURL=chart-brush.js.map

package/dist/charts/chart-center-typography.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Fluid typography for pie / ring / gauge center labels.
+ *
+ * Uses CSS container query units (`cqw`) so values scale with the center
+ * hole — not the viewport — which keeps stat text readable on small charts.
+ */
+export declare const chartCenterContainerClassName = "@container/chart-center size-full min-w-0";
+/** Primary stat — ~22% of center width, clamped between text-sm and text-3xl. */
+export declare const chartCenterValueClassName = "font-bold tabular-nums leading-none text-[clamp(0.75rem,22cqw,1.875rem)]";
+/** Supporting label — ~9% of center width, clamped between 10px and text-xs. */
+export declare const chartCenterLabelClassName = "max-w-full truncate leading-tight text-[clamp(0.625rem,9cqw,0.75rem)]";
+//# sourceMappingURL=chart-center-typography.d.ts.map

package/dist/charts/chart-center-typography.js

@@ -0,0 +1,12 @@
+/**
+ * Fluid typography for pie / ring / gauge center labels.
+ *
+ * Uses CSS container query units (`cqw`) so values scale with the center
+ * hole — not the viewport — which keeps stat text readable on small charts.
+ */
+export const chartCenterContainerClassName = "@container/chart-center size-full min-w-0";
+/** Primary stat — ~22% of center width, clamped between text-sm and text-3xl. */
+export const chartCenterValueClassName = "font-bold tabular-nums leading-none text-[clamp(0.75rem,22cqw,1.875rem)]";
+/** Supporting label — ~9% of center width, clamped between 10px and text-xs. */
+export const chartCenterLabelClassName = "max-w-full truncate leading-tight text-[clamp(0.625rem,9cqw,0.75rem)]";
+//# sourceMappingURL=chart-center-typography.js.map

package/dist/charts/chart-child-passthrough.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement, type ReactNode } from "react";
+/** Marker on wrapper components whose single child should inherit clip classification. */
+export declare const CHART_CLIP_PASSTHROUGH: "__chartClipPassthrough";
+export declare function isChartClipPassthrough(type: unknown): boolean;
+/** Unwrap visibility wrappers so `Grid` / axes stay outside the series clip. */
+export declare function resolveChartChildElement(child: ReactElement): ReactElement;
+/** Walk chart children, flattening React fragments (studio often groups layers in `<>...</>`). */
+export declare function forEachChartChild(children: ReactNode, callback: (child: ReactElement, index: number) => void): void;
+/** Markers render after the interaction overlay so they stay clickable. */
+export declare function isPostOverlayComponent(child: ReactElement): boolean;
+/** Renders above grid/axes but below series; excluded from grow-clip reveal. */
+export declare function isUnderlayComponent(child: ReactElement): boolean;
+/** Grid and axes stay visible during series clip reveal (e.g. loading → ready). */
+export declare function isClipExcludedComponent(child: ReactElement): boolean;
+/** SVG layer lists from chart shells need stable keys when rendered as arrays. */
+export declare function renderKeyedChartLayers(children: ReactElement[]): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];
+//# sourceMappingURL=chart-child-passthrough.d.ts.map

package/dist/charts/chart-child-passthrough.js

@@ -0,0 +1,74 @@
+import { Children, cloneElement, Fragment, isValidElement, } from "react";
+/** Marker on wrapper components whose single child should inherit clip classification. */
+export const CHART_CLIP_PASSTHROUGH = "__chartClipPassthrough";
+export function isChartClipPassthrough(type) {
+    return (typeof type === "function" &&
+        type[CHART_CLIP_PASSTHROUGH] === true);
+}
+/** Unwrap visibility wrappers so `Grid` / axes stay outside the series clip. */
+export function resolveChartChildElement(child) {
+    if (isChartClipPassthrough(child.type)) {
+        const inner = child.props.children;
+        if (isValidElement(inner)) {
+            return resolveChartChildElement(inner);
+        }
+    }
+    return child;
+}
+/** Walk chart children, flattening React fragments (studio often groups layers in `<>...</>`). */
+export function forEachChartChild(children, callback) {
+    let index = 0;
+    const visit = (nodes) => {
+        Children.forEach(nodes, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            if (child.type === Fragment) {
+                visit(child.props.children);
+                return;
+            }
+            callback(child, index);
+            index += 1;
+        });
+    };
+    visit(children);
+}
+const CLIP_EXCLUDED_COMPONENT_NAMES = new Set([
+    "Background",
+    "Grid",
+    "XAxis",
+    "YAxis",
+    "BarXAxis",
+    "BarYAxis",
+    "LiveXAxis",
+    "LiveYAxis",
+]);
+const UNDERLAY_COMPONENT_NAMES = new Set(["ReferenceArea", "BarColumnTrack"]);
+/** Markers render after the interaction overlay so they stay clickable. */
+export function isPostOverlayComponent(child) {
+    const childType = child.type;
+    if (childType.__isChartMarkers || childType.__isPostOverlay) {
+        return true;
+    }
+    const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+    return (componentName === "ChartMarkers" ||
+        componentName === "MarkerGroup" ||
+        componentName === "ChartBrush");
+}
+/** Renders above grid/axes but below series; excluded from grow-clip reveal. */
+export function isUnderlayComponent(child) {
+    const childType = child.type;
+    const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+    return UNDERLAY_COMPONENT_NAMES.has(componentName);
+}
+/** Grid and axes stay visible during series clip reveal (e.g. loading → ready). */
+export function isClipExcludedComponent(child) {
+    const childType = child.type;
+    const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+    return CLIP_EXCLUDED_COMPONENT_NAMES.has(componentName);
+}
+/** SVG layer lists from chart shells need stable keys when rendered as arrays. */
+export function renderKeyedChartLayers(children) {
+    return children.map((child, index) => cloneElement(child, { key: child.key ?? `chart-layer-${index}` }));
+}
+//# sourceMappingURL=chart-child-passthrough.js.map

package/dist/charts/chart-config-context.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+export interface SpringConfig {
+    stiffness: number;
+    damping: number;
+}
+export interface ChartConfigValue {
+    /** Crosshair indicator, tooltip dot, date pill. */
+    tooltipSpring: SpringConfig;
+    /** Floating tooltip panel. */
+    tooltipBoxSpring: SpringConfig;
+    /** Line/area hover-highlight band (x + width). */
+    highlightSpring: SpringConfig;
+}
+export declare const DEFAULT_CHART_CONFIG: ChartConfigValue;
+export interface ChartConfigProviderProps {
+    value?: Partial<ChartConfigValue>;
+    children: ReactNode;
+}
+export declare function ChartConfigProvider({ value, children }: ChartConfigProviderProps): import("react").JSX.Element;
+export declare function useChartConfig(): ChartConfigValue;
+/** Maps a damping slider to the floating tooltip panel follow spring. `0` = instant. */
+export declare function resolveTooltipBoxMotion(damping?: number): {
+    animate: boolean;
+    springConfig: SpringConfig;
+};
+//# sourceMappingURL=chart-config-context.d.ts.map

package/dist/charts/chart-config-context.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+export const DEFAULT_CHART_CONFIG = {
+    tooltipSpring: { stiffness: 300, damping: 30 },
+    tooltipBoxSpring: { stiffness: 100, damping: 20 },
+    highlightSpring: { stiffness: 180, damping: 28 },
+};
+const ChartConfigContext = createContext(null);
+export function ChartConfigProvider({ value, children }) {
+    const merged = useMemo(() => ({
+        ...DEFAULT_CHART_CONFIG,
+        ...value,
+    }), [value]);
+    return _jsx(ChartConfigContext.Provider, { value: merged, children: children });
+}
+export function useChartConfig() {
+    return useContext(ChartConfigContext) ?? DEFAULT_CHART_CONFIG;
+}
+const DEFAULT_TOOLTIP_BOX_DAMPING = DEFAULT_CHART_CONFIG.tooltipBoxSpring.damping;
+/** Maps a damping slider to the floating tooltip panel follow spring. `0` = instant. */
+export function resolveTooltipBoxMotion(damping) {
+    if (damping === 0) {
+        return {
+            animate: false,
+            springConfig: DEFAULT_CHART_CONFIG.tooltipBoxSpring,
+        };
+    }
+    const effectiveDamping = damping ?? DEFAULT_TOOLTIP_BOX_DAMPING;
+    let stiffness = DEFAULT_CHART_CONFIG.tooltipBoxSpring.stiffness;
+    if (effectiveDamping < DEFAULT_TOOLTIP_BOX_DAMPING) {
+        const t = (DEFAULT_TOOLTIP_BOX_DAMPING - effectiveDamping) / DEFAULT_TOOLTIP_BOX_DAMPING;
+        stiffness += t * 400;
+    }
+    else if (effectiveDamping > DEFAULT_TOOLTIP_BOX_DAMPING) {
+        const t = (effectiveDamping - DEFAULT_TOOLTIP_BOX_DAMPING) / (100 - DEFAULT_TOOLTIP_BOX_DAMPING);
+        stiffness -= t * 85;
+    }
+    return {
+        animate: true,
+        springConfig: {
+            stiffness: Math.max(12, Math.round(stiffness)),
+            damping: effectiveDamping,
+        },
+    };
+}
+//# sourceMappingURL=chart-config-context.js.map