@wallarm-org/design-system 0.35.0 → 0.36.0

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.d.ts

@@ -0,0 +1,37 @@
+import type { LineChartDatum, LineChartZoomDragState, LineChartZoomPendingState, LineChartZoomRange } from '../LineChartContext';
+interface UseLineChartZoomStateResult {
+    enabled: boolean;
+    drag: LineChartZoomDragState | null;
+    pending: LineChartZoomPendingState | null;
+    registerEnabled: () => () => void;
+    startDrag: (index: number, clientX: number, clientY: number) => void;
+    updateDrag: (index: number, clientX: number, clientY: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+    confirmZoom: () => void;
+    cancelPending: () => void;
+}
+/**
+ * Two-phase zoom selection state machine.
+ *
+ * - `drag` is the live mouse-held selection — updated on every mousemove,
+ *   torn down on Escape, promoted to `pending` on mouseup.
+ * - `pending` is the released-but-unconfirmed selection — renders the confirm
+ *   popover. Commits via `confirmZoom` (fires `onZoomChange`) or dismisses via
+ *   `cancelPending` (no emit).
+ *
+ * `enabledCount` (not a boolean) so multiple brush instances can't race when
+ * one unmounts while another remains. Window-level listeners are wired up by
+ * `useZoomDragListeners` so the popover keeps tracking when the cursor leaves
+ * the SVG and a mouseup outside the chart still releases into pending.
+ *
+ * Dataset changes invalidate cached indices on both `drag` and `pending`, so
+ * both reset whenever `data` or `xKey` flips — otherwise a stale range could
+ * be committed against a refreshed dataset.
+ */
+export declare const useLineChartZoomState: ({ data, xKey, onZoomChange, }: {
+    data: LineChartDatum[];
+    xKey: string;
+    onZoomChange: ((range: LineChartZoomRange | null) => void) | undefined;
+}) => UseLineChartZoomStateResult;
+export {};

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.js

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useState } from "react";
+import { useZoomDragListeners } from "./useZoomDragListeners.js";
+const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
+    const [zoomEnabledCount, setZoomEnabledCount] = useState(0);
+    const [zoomDrag, setZoomDrag] = useState(null);
+    const [zoomPending, setZoomPending] = useState(null);
+    const registerEnabled = useCallback(()=>{
+        setZoomEnabledCount((n)=>n + 1);
+        return ()=>setZoomEnabledCount((n)=>n - 1);
+    }, []);
+    const startDrag = useCallback((index, clientX, clientY)=>{
+        setZoomPending(null);
+        setZoomDrag({
+            startIndex: index,
+            endIndex: index,
+            clientX,
+            clientY
+        });
+    }, []);
+    const updateDrag = useCallback((index, clientX, clientY)=>{
+        setZoomDrag((prev)=>{
+            if (!prev) return null;
+            if (prev.endIndex === index && prev.clientX === clientX && prev.clientY === clientY) return prev;
+            return {
+                startIndex: prev.startIndex,
+                endIndex: index,
+                clientX,
+                clientY
+            };
+        });
+    }, []);
+    const cancelDrag = useCallback(()=>{
+        setZoomDrag(null);
+    }, []);
+    const endDrag = useCallback(()=>{
+        setZoomDrag((currentDrag)=>{
+            if (!currentDrag) return null;
+            const lo = Math.min(currentDrag.startIndex, currentDrag.endIndex);
+            const hi = Math.max(currentDrag.startIndex, currentDrag.endIndex);
+            if (lo === hi) return null;
+            const fromDatum = data[lo];
+            const toDatum = data[hi];
+            const from = fromDatum?.[xKey];
+            const to = toDatum?.[xKey];
+            if (null != from && null != to) setZoomPending({
+                range: {
+                    fromIndex: lo,
+                    toIndex: hi,
+                    from,
+                    to
+                },
+                clientX: currentDrag.clientX,
+                clientY: currentDrag.clientY
+            });
+            return null;
+        });
+    }, [
+        data,
+        xKey
+    ]);
+    const confirmZoom = useCallback(()=>{
+        setZoomPending((currentPending)=>{
+            if (currentPending) onZoomChange?.(currentPending.range);
+            return null;
+        });
+    }, [
+        onZoomChange
+    ]);
+    const cancelPending = useCallback(()=>{
+        setZoomPending(null);
+    }, []);
+    useEffect(()=>{
+        setZoomDrag(null);
+        setZoomPending(null);
+    }, [
+        data,
+        xKey
+    ]);
+    const isZoomDragging = null !== zoomDrag;
+    const handleDragMove = useCallback((clientX, clientY)=>{
+        setZoomDrag((prev)=>{
+            if (!prev) return null;
+            if (prev.clientX === clientX && prev.clientY === clientY) return prev;
+            return {
+                ...prev,
+                clientX,
+                clientY
+            };
+        });
+    }, []);
+    const handleDragEscape = useCallback(()=>setZoomDrag(null), []);
+    useZoomDragListeners({
+        enabled: isZoomDragging,
+        onMove: handleDragMove,
+        onEnd: endDrag,
+        onEscape: handleDragEscape
+    });
+    return {
+        enabled: zoomEnabledCount > 0,
+        drag: zoomDrag,
+        pending: zoomPending,
+        registerEnabled,
+        startDrag,
+        updateDrag,
+        endDrag,
+        cancelDrag,
+        confirmZoom,
+        cancelPending
+    };
+};
+export { useLineChartZoomState };

package/dist/components/SimpleCharts/LineChart/hooks/useZoomDragListeners.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Window-level drag follower. While `enabled` is `true` the chart's zoom drag
+ * is in progress: mousemove updates the cursor coordinates, mouseup releases
+ * into the pending state, Escape cancels outright. Listeners live on `window`
+ * rather than the chart body so the popover keeps tracking when the cursor
+ * leaves the SVG and a release outside the chart still commits.
+ *
+ * Pulled out of `<LineChart>` so the keyboard contract has a single source of
+ * truth that can be tested in isolation.
+ */
+export declare const useZoomDragListeners: ({ enabled, onMove, onEnd, onEscape, }: {
+    enabled: boolean;
+    onMove: (clientX: number, clientY: number) => void;
+    onEnd: () => void;
+    onEscape: () => void;
+}) => void;

package/dist/components/SimpleCharts/LineChart/hooks/useZoomDragListeners.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+const useZoomDragListeners = ({ enabled, onMove, onEnd, onEscape })=>{
+    useEffect(()=>{
+        if (!enabled) return;
+        const handleMove = (event)=>onMove(event.clientX, event.clientY);
+        const handleUp = ()=>onEnd();
+        const handleKey = (event)=>{
+            if ('Escape' !== event.key) return;
+            event.preventDefault();
+            onEscape();
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+        window.addEventListener('keydown', handleKey);
+        return ()=>{
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            window.removeEventListener('keydown', handleKey);
+        };
+    }, [
+        enabled,
+        onMove,
+        onEnd,
+        onEscape
+    ]);
+};
+export { useZoomDragListeners };

package/dist/components/SimpleCharts/LineChart/hooks/useZoomPendingListeners.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+/**
+ * Pending-phase listeners for the zoom confirm popover. Runs while `enabled`
+ * is `true` (i.e. a pending range exists):
+ *
+ * - Mousedown outside the popover dismisses the pending range. `mousedown`
+ *   rather than `click` so a fresh drag (which starts on the chart body's
+ *   `mousedown`) sees an already-cleared pending state.
+ * - Enter confirms, Escape cancels. Scope is gated to events whose target is
+ *   inside `rootRef`, inside `popoverRef` (portalled), or ambient (focus on
+ *   `<body>` / `<html>`). The ref-based scope is load-bearing: a generic
+ *   `closest('[data-slot="line-chart"]')` selector would let sibling charts
+ *   confirm a pending range that does not belong to them.
+ */
+export declare const useZoomPendingListeners: ({ enabled, rootRef, popoverRef, onConfirm, onCancel, }: {
+    enabled: boolean;
+    rootRef: RefObject<HTMLElement | null> | undefined;
+    popoverRef: RefObject<HTMLElement | null>;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}) => void;

package/dist/components/SimpleCharts/LineChart/hooks/useZoomPendingListeners.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+const useZoomPendingListeners = ({ enabled, rootRef, popoverRef, onConfirm, onCancel })=>{
+    useEffect(()=>{
+        if (!enabled) return;
+        const handleMouseDown = (event)=>{
+            const target = event.target;
+            if (target instanceof Node && popoverRef.current?.contains(target)) return;
+            onCancel?.();
+        };
+        const handleKey = (event)=>{
+            if ('Enter' !== event.key && 'Escape' !== event.key) return;
+            const target = event.target;
+            const isAmbient = null === target || target === document.body || target === document.documentElement;
+            const isInPopover = target instanceof Node && (popoverRef.current?.contains(target) ?? false);
+            const isInOwningChart = target instanceof Node && (rootRef?.current?.contains(target) ?? false);
+            if (!isAmbient && !isInPopover && !isInOwningChart) return;
+            event.preventDefault();
+            if ('Enter' === event.key) onConfirm?.();
+            else onCancel?.();
+        };
+        window.addEventListener('mousedown', handleMouseDown);
+        window.addEventListener('keydown', handleKey);
+        return ()=>{
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('keydown', handleKey);
+        };
+    }, [
+        enabled,
+        rootRef,
+        popoverRef,
+        onConfirm,
+        onCancel
+    ]);
+};
+export { useZoomPendingListeners };

package/dist/components/SimpleCharts/LineChart/index.d.ts

@@ -0,0 +1,19 @@
+export { LineChart, type LineChartProps } from './LineChart';
+export { LineChartBody, type LineChartBodyProps } from './LineChartBody';
+export type { LineChartDatum, LineChartLegendOrientation, LineChartSeries, LineChartZoomRange, } from './LineChartContext';
+export { LineChartEmpty, type LineChartEmptyProps } from './LineChartEmpty';
+export { LineChartGrid, type LineChartGridProps } from './LineChartGrid';
+export { LineChartHoverPopover, type LineChartHoverPopoverProps, } from './LineChartHoverPopover';
+export { LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, } from './LineChartHoverPopoverDot';
+export { LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, } from './LineChartHoverPopoverRow';
+export { LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, } from './LineChartHoverPopoverTimestamp';
+export { LineChartLegend, type LineChartLegendProps } from './LineChartLegend';
+export { LineChartLegendItem, type LineChartLegendItemProps, } from './LineChartLegendItem';
+export { LineChartLine, type LineChartLineProps } from './LineChartLine';
+export { LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, type LineChartTooltipRow, } from './LineChartTooltip';
+export { LineChartXAxis, type LineChartXAxisDensity, type LineChartXAxisProps, } from './LineChartXAxis';
+export { LineChartYAxis, type LineChartYAxisProps } from './LineChartYAxis';
+export { LineChartZoomBrush, type LineChartZoomBrushProps, } from './LineChartZoomBrush';
+export { LineChartZoomPopover, type LineChartZoomPopoverProps, } from './LineChartZoomPopover';
+export { LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, } from './LineChartZoomPopoverConfirm';
+export { LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, } from './LineChartZoomPopoverRange';

package/dist/components/SimpleCharts/LineChart/index.js

@@ -0,0 +1,19 @@
+import { LineChart } from "./LineChart.js";
+import { LineChartBody } from "./LineChartBody.js";
+import { LineChartEmpty } from "./LineChartEmpty.js";
+import { LineChartGrid } from "./LineChartGrid.js";
+import { LineChartHoverPopover } from "./LineChartHoverPopover.js";
+import { LineChartHoverPopoverDot } from "./LineChartHoverPopoverDot.js";
+import { LineChartHoverPopoverRow } from "./LineChartHoverPopoverRow.js";
+import { LineChartHoverPopoverTimestamp } from "./LineChartHoverPopoverTimestamp.js";
+import { LineChartLegend } from "./LineChartLegend.js";
+import { LineChartLegendItem } from "./LineChartLegendItem.js";
+import { LineChartLine } from "./LineChartLine.js";
+import { LineChartTooltip } from "./LineChartTooltip.js";
+import { LineChartXAxis } from "./LineChartXAxis.js";
+import { LineChartYAxis } from "./LineChartYAxis.js";
+import { LineChartZoomBrush } from "./LineChartZoomBrush.js";
+import { LineChartZoomPopover } from "./LineChartZoomPopover.js";
+import { LineChartZoomPopoverConfirm } from "./LineChartZoomPopoverConfirm.js";
+import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
+export { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange };

package/dist/components/SimpleCharts/LineChart/lib/dropEdgeGridLines.d.ts

@@ -0,0 +1,30 @@
+import { type ReactElement } from 'react';
+import type { GridLineTypeFunctionProps } from 'recharts/types/cartesian/CartesianGrid';
+interface DropEdgeGridLinesOptions {
+    /** Keep the topmost horizontal grid line unconditionally. */
+    keepTop?: boolean;
+    /** Keep the bottommost horizontal grid line unconditionally. */
+    keepBottom?: boolean;
+}
+/**
+ * `<CartesianGrid horizontal>` render function that conditionally omits the
+ * topmost and bottommost horizontal grid lines.
+ *
+ * - **Top** — implements the Figma "no top x-line" rule (anatomy node
+ *   `7533-3334`). Dropped only when the gap from the chart's top edge to the
+ *   topmost grid line is less than {@link TOP_LINE_GAP_THRESHOLD} of one
+ *   tick-to-tick spacing; above that ratio the gap reads as deliberate
+ *   whitespace and the line stays (useful for axes whose nice-tick max sits
+ *   well below the data max).
+ * - **Bottom** — dropped unconditionally so the solid X-axis line owns the
+ *   bottom rail (otherwise the dashed grid line and the solid axis line stack
+ *   on top of each other and read as a double line).
+ *
+ * Either drop can be suppressed via `keepTop` / `keepBottom` (e.g. when the
+ * caller hides the X-axis line and wants the grid to draw the bottom rail).
+ *
+ * Returning an empty `<g/>` (rather than `null`) keeps the type contract:
+ * `GridLineType`'s function form requires a `ReactElement<SVGElement>`.
+ */
+export declare const dropEdgeGridLines: ({ keepTop, keepBottom, }?: DropEdgeGridLinesOptions) => (props: GridLineTypeFunctionProps) => ReactElement<SVGElement>;
+export {};

package/dist/components/SimpleCharts/LineChart/lib/dropEdgeGridLines.js

@@ -0,0 +1,48 @@
+import { createElement } from "react";
+const TOP_LINE_GAP_THRESHOLD = 0.5;
+const collectTickYs = (yAxis)=>{
+    const { scale } = yAxis;
+    const tickValues = yAxis.niceTicks ?? yAxis.ticks;
+    if (!scale || !tickValues?.length) return [];
+    const ys = [];
+    for (const tick of tickValues){
+        const y = scale.map(tick);
+        if ('number' == typeof y) ys.push(y);
+    }
+    ys.sort((a, b)=>a - b);
+    return ys;
+};
+const asSvgElement = (el)=>el;
+const dropEdgeGridLines = ({ keepTop = false, keepBottom = false } = {})=>{
+    let cachedYs = null;
+    let cachedAxis = null;
+    return (props)=>{
+        const { offset, x1, x2, y1, y2, key, index: _index, yAxis, ...rest } = props;
+        const line = asSvgElement(createElement('line', {
+            ...rest,
+            x1,
+            x2,
+            y1,
+            y2
+        }));
+        if ('number' != typeof y1 || !yAxis) return line;
+        if (cachedAxis !== yAxis) {
+            cachedAxis = yAxis;
+            cachedYs = collectTickYs(yAxis);
+        }
+        const ys = cachedYs;
+        const [topY, secondY] = ys;
+        const bottomY = ys[ys.length - 1];
+        if (void 0 === topY || void 0 === secondY || void 0 === bottomY) return line;
+        const spacing = secondY - topY;
+        if (!keepBottom && Math.abs(y1 - bottomY) < 0.5) return asSvgElement(createElement('g', {
+            key
+        }));
+        if (keepTop || spacing <= 0 || Math.abs(y1 - topY) >= 0.5) return line;
+        if (topY - offset.top < spacing * TOP_LINE_GAP_THRESHOLD) return asSvgElement(createElement('g', {
+            key
+        }));
+        return line;
+    };
+};
+export { dropEdgeGridLines };

package/dist/components/SimpleCharts/LineChart/lib/formatRange.d.ts

@@ -0,0 +1,9 @@
+import type { LineChartZoomRange } from '../LineChartContext';
+/**
+ * Default range text for the zoom popover. Renders as `from → to` using the
+ * shared {@link formatChartDateTime} helper for numeric (timestamp) X values,
+ * which respects the app-level `order` / `hourCycle` defaults from the
+ * `DateFormatProvider`. Falls back to `String(value)` for non-numeric X values.
+ * Consumers override via the `formatRange` prop on `<LineChartZoomBrush>`.
+ */
+export declare const formatRange: (range: LineChartZoomRange) => string;

package/dist/components/SimpleCharts/LineChart/lib/formatRange.js

@@ -0,0 +1,7 @@
+import { formatChartDateTime } from "../../lib/timeFormatters.js";
+const formatRange = (range)=>{
+    const from = formatChartDateTime(range.from) || String(range.from);
+    const to = formatChartDateTime(range.to) || String(range.to);
+    return `${from} → ${to}`;
+};
+export { formatRange };

package/dist/components/SimpleCharts/LineChart/lib/sampleData.d.ts

@@ -0,0 +1,15 @@
+import type { LineChartDatum, LineChartSeries } from '../LineChartContext';
+export declare const genHourly: (count: number, seed?: number) => LineChartDatum[];
+export declare const genDaily: (count: number) => LineChartDatum[];
+export declare const singleSeries: LineChartSeries[];
+export declare const multiSeries: LineChartSeries[];
+export declare const dashedSeries: LineChartSeries[];
+export declare const customColorSeries: LineChartSeries[];
+export declare const hourlyData24: LineChartDatum[];
+export declare const hourlyDataA: LineChartDatum[];
+export declare const hourlyDataB: LineChartDatum[];
+export declare const dailyData60: LineChartDatum[];
+export declare const hourlyData1000: LineChartDatum[];
+export declare const singlePointData: LineChartDatum[];
+export declare const dataWithErrorGaps: LineChartDatum[];
+export declare const unitsByKey: Record<string, string>;

package/dist/components/SimpleCharts/LineChart/lib/sampleData.js

@@ -0,0 +1,109 @@
+const jitter = (i, seed, salt)=>{
+    const v = 43758.5453 * Math.sin((i + seed) * salt);
+    return v - Math.floor(v);
+};
+const genHourly = (count, seed = 1)=>{
+    const start = Date.UTC(2025, 0, 1, 0, 0, 0);
+    const out = [];
+    for(let i = 0; i < count; i++){
+        const t = start + 60 * i * 60000;
+        const requests = Math.round(120 + 30 * Math.sin((i + seed) / 4) + (jitter(i, seed, 12.9898) - 0.5) * 80);
+        const errors = Math.round(24 + 10 * Math.cos((i + seed) / 5) + (jitter(i, seed, 78.233) - 0.5) * 32);
+        const latency = Math.round(80 + 14 * Math.sin((i + seed) / 6) + (jitter(i, seed, 39.346) - 0.5) * 40);
+        out.push({
+            timestamp: t,
+            requests,
+            errors,
+            latency
+        });
+    }
+    return out;
+};
+const genDaily = (count)=>{
+    const start = Date.UTC(2024, 0, 1, 0, 0, 0);
+    const out = [];
+    for(let i = 0; i < count; i++){
+        const t = start + 24 * i * 3600000;
+        const requests = Math.round(1000 + 400 * Math.sin(i / 9) + i % 13 * 12);
+        const errors = Math.round(80 + 30 * Math.cos(i / 11) + i % 7 * 3);
+        out.push({
+            timestamp: t,
+            requests,
+            errors
+        });
+    }
+    return out;
+};
+const singleSeries = [
+    {
+        key: 'requests',
+        label: 'Requests',
+        color: 'brand'
+    }
+];
+const multiSeries = [
+    {
+        key: 'requests',
+        label: 'Requests',
+        color: 'brand'
+    },
+    {
+        key: 'errors',
+        label: 'Errors',
+        color: 'red'
+    },
+    {
+        key: 'latency',
+        label: 'Latency',
+        color: 'blue'
+    }
+];
+const dashedSeries = [
+    {
+        key: 'requests',
+        label: 'Requests',
+        color: 'brand'
+    },
+    {
+        key: 'errors',
+        label: 'Errors (target)',
+        color: 'red',
+        variant: 'dashed'
+    }
+];
+const customColorSeries = [
+    {
+        key: 'requests',
+        label: 'Requests',
+        color: 'var(--color-violet-500)'
+    },
+    {
+        key: 'errors',
+        label: 'Errors',
+        color: 'var(--color-emerald-500)'
+    }
+];
+const hourlyData24 = genHourly(24);
+const hourlyDataA = genHourly(24, 1);
+const hourlyDataB = genHourly(24, 7);
+const dailyData60 = genDaily(60);
+const hourlyData1000 = genHourly(1000);
+const singlePointData = [
+    {
+        timestamp: Date.UTC(2025, 0, 1, 12, 0, 0),
+        requests: 142
+    }
+];
+const dataWithErrorGaps = hourlyData24.map((d, i)=>{
+    if (i >= 6 && i <= 8 || i >= 15 && i <= 16) return {
+        ...d,
+        errors: null
+    };
+    return d;
+});
+const unitsByKey = {
+    requests: ' req',
+    errors: ' err',
+    latency: ' ms'
+};
+export { customColorSeries, dailyData60, dashedSeries, dataWithErrorGaps, genDaily, genHourly, hourlyData1000, hourlyData24, hourlyDataA, hourlyDataB, multiSeries, singlePointData, singleSeries, unitsByKey };

package/dist/components/SimpleCharts/LineChart/lib/tickHorizontalCoordinates.d.ts

@@ -0,0 +1,15 @@
+import type { HorizontalCoordinatesGenerator } from 'recharts/types/cartesian/CartesianGrid';
+/**
+ * `<CartesianGrid horizontalCoordinatesGenerator>` that emits one grid line
+ * per Y-axis tick.
+ *
+ * The recharts v3 default skips some ticks (notably the second-from-top) and
+ * folds the topmost grid line onto the plot's top edge instead of placing it
+ * at the topmost tick. That breaks the one-line-per-label visual contract:
+ * a label can appear with no corresponding grid line.
+ *
+ * Using `yAxis.niceTicks ?? yAxis.ticks` and mapping each through the axis
+ * scale produces a grid line at every rendered tick value. `dropEdgeGridLines`
+ * then handles top/bottom culling against the resulting coordinates.
+ */
+export declare const tickHorizontalCoordinates: HorizontalCoordinatesGenerator;

package/dist/components/SimpleCharts/LineChart/lib/tickHorizontalCoordinates.js

@@ -0,0 +1,13 @@
+const tickHorizontalCoordinates = ({ yAxis })=>{
+    if (!yAxis) return [];
+    const { scale } = yAxis;
+    const tickValues = yAxis.niceTicks ?? yAxis.ticks;
+    if (!scale || !tickValues?.length) return [];
+    const coords = [];
+    for (const tick of tickValues){
+        const y = scale.map(tick);
+        if ('number' == typeof y && Number.isFinite(y)) coords.push(y);
+    }
+    return coords;
+};
+export { tickHorizontalCoordinates };

package/dist/components/SimpleCharts/LineChart/lib/warn.d.ts

@@ -0,0 +1,4 @@
+type WarnFn = (...args: unknown[]) => void;
+export declare const warnLineChart: WarnFn;
+export declare const warnLineChartLine: WarnFn;
+export {};

package/dist/components/SimpleCharts/LineChart/lib/warn.js

@@ -0,0 +1,6 @@
+const PROD = ()=>{};
+const DEV = console.warn;
+const make = (component)=>'production' === process.env.NODE_ENV ? PROD : DEV.bind(console, `[${component}]`);
+const warnLineChart = make('LineChart');
+const warnLineChartLine = make('LineChartLine');
+export { warnLineChart, warnLineChartLine };

package/dist/components/SimpleCharts/PieChart/PieChartContext.js

@@ -1,7 +1,10 @@
 import { createContext } from "react";
+import { makeIsHoverSyncTarget } from "../lib/hoverSync.js";
 const EMPTY_SELECTION = new Set();
-const HOVER_SYNC_SELECTOR = '[data-slot="pie-chart-legend-item"], [data-slot="pie-chart-slice"]';
-const isHoverSyncTarget = (target)=>target instanceof Element && null !== target.closest(HOVER_SYNC_SELECTOR);
+const isHoverSyncTarget = makeIsHoverSyncTarget([
+    'pie-chart-legend-item',
+    'pie-chart-slice'
+]);
 const PieChartDataContext = createContext(null);
 const PieChartActiveContext = createContext({
     activeName: null

package/dist/components/SimpleCharts/PieChart/constants.d.ts

@@ -1,4 +1,4 @@
-import type { ChartColor } from '../types';
+export { CHART_PALETTE_FILL as PIE_SLICE_FILL } from '../lib/chartPalette';
 export declare const PIE_DONUT_SIZE = 120;
 export declare const PIE_DONUT_OUTER_RADIUS = 60;
 export declare const PIE_DONUT_INNER_RADIUS = 48;
@@ -6,4 +6,3 @@ export declare const PIE_DONUT_CORNER_RADIUS = 2;
 export declare const PIE_DONUT_PADDING_ANGLE = 2;
 export declare const PIE_DONUT_ANIMATION_DURATION = 400;
 export declare const PIE_DONUT_ANIMATION_BEGIN = 0;
-export declare const PIE_SLICE_FILL: Record<ChartColor, string>;

package/dist/components/SimpleCharts/PieChart/constants.js

@@ -1,3 +1,4 @@
+import { CHART_PALETTE_FILL } from "../lib/chartPalette.js";
 const PIE_DONUT_SIZE = 120;
 const PIE_DONUT_OUTER_RADIUS = 60;
 const PIE_DONUT_INNER_RADIUS = 48;
@@ -5,18 +6,4 @@ const PIE_DONUT_CORNER_RADIUS = 2;
 const PIE_DONUT_PADDING_ANGLE = 2;
 const PIE_DONUT_ANIMATION_DURATION = 400;
 const PIE_DONUT_ANIMATION_BEGIN = 0;
-const PIE_SLICE_FILL = {
-    brand: 'var(--color-w-orange-500)',
-    blue: 'var(--color-blue-500)',
-    green: 'var(--color-green-500)',
-    red: 'var(--color-red-500)',
-    amber: 'var(--color-amber-500)',
-    purple: 'var(--color-purple-500)',
-    slate: 'var(--color-badge-slate-dark-alt)',
-    teal: 'var(--color-teal-500)',
-    cyan: 'var(--color-cyan-500)',
-    indigo: 'var(--color-indigo-500)',
-    pink: 'var(--color-pink-500)',
-    rose: 'var(--color-rose-500)'
-};
-export { PIE_DONUT_ANIMATION_BEGIN, PIE_DONUT_ANIMATION_DURATION, PIE_DONUT_CORNER_RADIUS, PIE_DONUT_INNER_RADIUS, PIE_DONUT_OUTER_RADIUS, PIE_DONUT_PADDING_ANGLE, PIE_DONUT_SIZE, PIE_SLICE_FILL };
+export { PIE_DONUT_ANIMATION_BEGIN, PIE_DONUT_ANIMATION_DURATION, PIE_DONUT_CORNER_RADIUS, PIE_DONUT_INNER_RADIUS, PIE_DONUT_OUTER_RADIUS, PIE_DONUT_PADDING_ANGLE, PIE_DONUT_SIZE, CHART_PALETTE_FILL as PIE_SLICE_FILL };

package/dist/components/SimpleCharts/hooks/index.d.ts

@@ -0,0 +1 @@
+export { type ChartTimeFormatters, useChartTimeFormatters, } from './useChartTimeFormatters';

package/dist/components/SimpleCharts/hooks/index.js

@@ -0,0 +1,2 @@
+import { useChartTimeFormatters } from "./useChartTimeFormatters.js";
+export { useChartTimeFormatters };

package/dist/components/SimpleCharts/hooks/useChartTimeFormatters.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export interface ChartTimeFormatters {
+    formatHour: (value: unknown) => string;
+    formatDate: (value: unknown) => string;
+    formatDateTime: (value: unknown) => string;
+    formatTimezone: (value: unknown) => string;
+    formatHourWithTimezone: (value: unknown) => ReactNode;
+    formatDateWithTimezone: (value: unknown) => ReactNode;
+    formatDateTimeWithTimezone: (value: unknown) => ReactNode;
+    /** `from → to` using `formatDate`. Suitable for `<LineChartZoomBrush formatRange>`. */
+    formatDateRange: (range: {
+        from: unknown;
+        to: unknown;
+    }) => string;
+}
+/**
+ * Memoised bundle of chart time formatters bound to `DateFormatProvider`
+ * settings. Falls back to `day-first` + `hourCycle: 24` when no provider is
+ * mounted (mirrors `useDateFormat`).
+ */
+export declare const useChartTimeFormatters: () => ChartTimeFormatters;