@wallarm-org/design-system 0.35.0 → 0.36.0

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { XAxis } from "recharts";
+import { LINE_AXIS_TICK_TEXT_PROPS } from "./constants.js";
+import { LineChartDataContext } from "./LineChartContext.js";
+const DENSITY_MIN_TICK_GAP = {
+    sparse: 64,
+    normal: 32,
+    dense: 16
+};
+const AXIS_LINE_PROPS = {
+    stroke: 'var(--color-border-primary-light)'
+};
+const LineChartXAxis = ({ tickFormatter, density, interval, tickCount, ticks, minTickGap, domain, padding, type, hideTicks = false, axisLine = true })=>{
+    const dataCtx = useContext(LineChartDataContext);
+    const xKey = dataCtx?.xKey ?? 'x';
+    const resolvedMinTickGap = minTickGap ?? (density ? DENSITY_MIN_TICK_GAP[density] : void 0);
+    return /*#__PURE__*/ jsx(XAxis, {
+        dataKey: xKey,
+        type: type,
+        tickLine: false,
+        axisLine: axisLine ? AXIS_LINE_PROPS : false,
+        tick: hideTicks ? false : LINE_AXIS_TICK_TEXT_PROPS,
+        tickFormatter: tickFormatter,
+        interval: interval,
+        tickCount: tickCount,
+        ticks: ticks,
+        minTickGap: resolvedMinTickGap,
+        domain: domain,
+        padding: padding
+    });
+};
+LineChartXAxis.displayName = 'LineChartXAxis';
+export { LineChartXAxis };

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

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+export interface LineChartYAxisProps {
+    /** Format the rendered tick label. */
+    tickFormatter?: (value: unknown, index: number) => string;
+    /** Recharts target tick count. */
+    tickCount?: number;
+    /** Explicit tick values. Overrides recharts' generator. */
+    ticks?: ReadonlyArray<number | string>;
+    /** Recharts domain override. */
+    domain?: [
+        number | string | 'auto' | 'dataMin' | 'dataMax',
+        number | string | 'auto' | 'dataMin' | 'dataMax'
+    ];
+    /** Padding between the plot edge and the first/last tick. */
+    padding?: {
+        top?: number;
+        bottom?: number;
+    };
+    /** Y-label gutter width. Defaults to the Figma-mandated `LINE_Y_LABEL_WIDTH` (38px). */
+    width?: number;
+    /** Render the axis area as a spacer (preserves layout, hides the labels). */
+    hideTicks?: boolean;
+}
+export declare const LineChartYAxis: FC<LineChartYAxisProps>;

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Text, YAxis } from "recharts";
+import { LINE_AXIS_TICK_TEXT_PROPS, LINE_Y_LABEL_WIDTH } from "./constants.js";
+const renderTick = (props)=>{
+    const { x, y, payload, visibleTicksCount, textAnchor, verticalAnchor, tickFormatter, index } = props;
+    if (index === visibleTicksCount - 1) return null;
+    const value = tickFormatter ? tickFormatter(payload.value, payload.index) : payload.value;
+    return /*#__PURE__*/ jsx(Text, {
+        x: x,
+        y: y,
+        textAnchor: textAnchor,
+        verticalAnchor: verticalAnchor,
+        ...LINE_AXIS_TICK_TEXT_PROPS,
+        children: value
+    });
+};
+const LineChartYAxis = ({ tickFormatter, tickCount, ticks, domain, padding, width = LINE_Y_LABEL_WIDTH, hideTicks = false })=>/*#__PURE__*/ jsx(YAxis, {
+        width: width,
+        tickLine: false,
+        axisLine: false,
+        tick: hideTicks ? false : renderTick,
+        tickFormatter: tickFormatter,
+        tickCount: tickCount,
+        ticks: ticks,
+        domain: domain,
+        padding: padding,
+        interval: 0
+    });
+LineChartYAxis.displayName = 'LineChartYAxis';
+export { LineChartYAxis };

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

@@ -0,0 +1,32 @@
+import { type FC, type ReactNode } from 'react';
+import { type LineChartZoomRange } from './LineChartContext';
+export interface LineChartZoomBrushProps {
+    /** When `true` the zoom interaction is removed entirely. */
+    disabled?: boolean;
+    /** Override the default range text rendered inside the popover. */
+    formatRange?: (range: LineChartZoomRange) => ReactNode;
+    /** Override the default "Zoom in" label on the confirm button. */
+    confirmLabel?: ReactNode;
+    /**
+     * Portal target for the floating range/confirm popover. Defaults to
+     * `document.body`. Pass a dialog/modal node to keep the popover inside the
+     * focus-trapped subtree — without this the portal escapes the focus context
+     * and tabbing from the confirm button lands outside the dialog.
+     */
+    container?: HTMLElement | null;
+}
+/**
+ * Enables Chrome DevTools-style drag-to-zoom on the chart plot. Two-phase:
+ *
+ *   1. The user drags on the plot → gray `<ReferenceArea>` follows the cursor,
+ *      and a floating popover shows the formatted range live.
+ *   2. The user releases → selection stays put, popover surfaces a "Zoom in"
+ *      button. Clicking it (or pressing Enter) fires `onZoomChange` with the
+ *      selected range. Escape, clicking outside the popover, or starting a new
+ *      drag dismisses without emitting.
+ *
+ * Mount once as a child of `<LineChartBody>` (anywhere — order does not matter
+ * since recharts picks `<ReferenceArea>` up by component type). Pair with a
+ * "Zoom out" affordance in your chart header that calls `setRange(null)`.
+ */
+export declare const LineChartZoomBrush: FC<LineChartZoomBrushProps>;

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

@@ -0,0 +1,104 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { ReferenceArea } from "recharts";
+import { lineChartZoomCursorPopoverClasses } from "./classes.js";
+import { useZoomPendingListeners } from "./hooks/useZoomPendingListeners.js";
+import { LineChartDataContext, LineChartZoomContext } from "./LineChartContext.js";
+import { LineChartZoomPopover } from "./LineChartZoomPopover.js";
+import { LineChartZoomPopoverConfirm } from "./LineChartZoomPopoverConfirm.js";
+import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
+import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
+const POPOVER_OFFSET_X = 12;
+const POPOVER_OFFSET_Y = 12;
+const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_formatRange, confirmLabel = 'Zoom in', container })=>{
+    const dataCtx = useContext(LineChartDataContext);
+    const zoomCtx = useContext(LineChartZoomContext);
+    const popoverRef = useRef(null);
+    const registerEnabled = zoomCtx?.registerEnabled;
+    useEffect(()=>{
+        if (disabled || !registerEnabled) return;
+        return registerEnabled();
+    }, [
+        disabled,
+        registerEnabled
+    ]);
+    const drag = zoomCtx?.drag ?? null;
+    const pending = zoomCtx?.pending ?? null;
+    const cancelPending = zoomCtx?.cancelPending;
+    const confirmZoom = zoomCtx?.confirmZoom;
+    const rootRef = zoomCtx?.rootRef;
+    useZoomPendingListeners({
+        enabled: null !== pending,
+        rootRef,
+        popoverRef,
+        onConfirm: confirmZoom,
+        onCancel: cancelPending
+    });
+    const range = useMemo(()=>{
+        if (drag && dataCtx) {
+            const lo = Math.min(drag.startIndex, drag.endIndex);
+            const hi = Math.max(drag.startIndex, drag.endIndex);
+            const fromDatum = dataCtx.data[lo];
+            const toDatum = dataCtx.data[hi];
+            if (!fromDatum || !toDatum) return null;
+            const from = fromDatum[dataCtx.xKey];
+            const to = toDatum[dataCtx.xKey];
+            if (null == from || null == to) return null;
+            return {
+                fromIndex: lo,
+                toIndex: hi,
+                from,
+                to
+            };
+        }
+        return pending?.range ?? null;
+    }, [
+        drag,
+        pending,
+        dataCtx
+    ]);
+    if (disabled || !dataCtx || !zoomCtx) return null;
+    const popoverPosition = drag ?? pending ?? null;
+    const isPending = null !== pending;
+    const popoverContent = range && popoverPosition ? /*#__PURE__*/ jsx("div", {
+        ref: popoverRef,
+        "data-slot": "line-chart-zoom-cursor-popover",
+        "data-zoom-state": isPending ? 'pending' : 'dragging',
+        className: lineChartZoomCursorPopoverClasses,
+        style: {
+            top: popoverPosition.clientY - POPOVER_OFFSET_Y,
+            left: popoverPosition.clientX + POPOVER_OFFSET_X,
+            transform: 'translateY(-100%)',
+            pointerEvents: isPending ? 'auto' : 'none'
+        },
+        onMouseDown: (e)=>e.stopPropagation(),
+        children: /*#__PURE__*/ jsxs(LineChartZoomPopover, {
+            children: [
+                /*#__PURE__*/ jsx(LineChartZoomPopoverRange, {
+                    children: formatRange(range)
+                }),
+                /*#__PURE__*/ jsx(LineChartZoomPopoverConfirm, {
+                    onClick: zoomCtx.confirmZoom,
+                    children: confirmLabel
+                })
+            ]
+        })
+    }) : null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            range ? /*#__PURE__*/ jsx(ReferenceArea, {
+                x1: range.from,
+                x2: range.to,
+                fill: "var(--color-states-primary-hover)",
+                fillOpacity: 1,
+                stroke: "var(--color-border-primary-light)",
+                strokeOpacity: 1,
+                ifOverflow: "visible"
+            }) : null,
+            popoverContent ? /*#__PURE__*/ createPortal(popoverContent, container ?? document.body) : null
+        ]
+    });
+};
+LineChartZoomBrush.displayName = 'LineChartZoomBrush';
+export { LineChartZoomBrush };

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

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface LineChartZoomPopoverProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const LineChartZoomPopover: FC<LineChartZoomPopoverProps>;

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartZoomPopoverClasses } from "./classes.js";
+const LineChartZoomPopover = ({ ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-zoom-popover",
+        role: "dialog",
+        "aria-modal": "false",
+        className: cn(lineChartZoomPopoverClasses, className),
+        children: children
+    });
+LineChartZoomPopover.displayName = 'LineChartZoomPopover';
+export { LineChartZoomPopover };

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

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+export interface LineChartZoomPopoverConfirmProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const LineChartZoomPopoverConfirm: FC<LineChartZoomPopoverConfirmProps>;

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartZoomPopoverConfirmClasses } from "./classes.js";
+const LineChartZoomPopoverConfirm = ({ ref, className, children, type = 'button', ...props })=>/*#__PURE__*/ jsx("button", {
+        ...props,
+        ref: ref,
+        type: type,
+        "data-slot": "line-chart-zoom-popover-confirm",
+        "aria-keyshortcuts": "Enter",
+        className: cn(lineChartZoomPopoverConfirmClasses, className),
+        children: children
+    });
+LineChartZoomPopoverConfirm.displayName = 'LineChartZoomPopoverConfirm';
+export { LineChartZoomPopoverConfirm };

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

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface LineChartZoomPopoverRangeProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const LineChartZoomPopoverRange: FC<LineChartZoomPopoverRangeProps>;

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartZoomPopoverRangeClasses } from "./classes.js";
+const LineChartZoomPopoverRange = ({ ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-zoom-popover-range",
+        className: cn(lineChartZoomPopoverRangeClasses, className),
+        children: children
+    });
+LineChartZoomPopoverRange.displayName = 'LineChartZoomPopoverRange';
+export { LineChartZoomPopoverRange };

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

@@ -0,0 +1,28 @@
+export declare const lineChartRootClasses: string;
+export declare const lineChartBodyClasses: string;
+export declare const lineChartBodyZoomEnabledClasses: string;
+export declare const lineChartZoomCursorPopoverClasses: string;
+export declare const lineChartLegendVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    align?: "end" | "start" | "center" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const lineChartLegendItemVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    dimmed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const lineChartHoverPopoverClasses: string;
+export declare const lineChartHoverPopoverTimestampClasses: string;
+export declare const lineChartHoverPopoverRowClasses: string;
+export declare const lineChartHoverPopoverRowDotClasses: string;
+export declare const lineChartHoverPopoverRowLabelClasses: string;
+export declare const lineChartHoverPopoverRowValueClasses: string;
+export declare const lineChartHoverPopoverDotClasses: string;
+export declare const lineChartZoomPopoverClasses: string;
+export declare const lineChartZoomPopoverRangeClasses: string;
+export declare const lineChartZoomPopoverConfirmClasses: string;
+export declare const lineChartTooltipCenterClasses = "-translate-y-1/2";
+export declare const lineChartEmptyRootClasses: string;
+export declare const lineChartEmptyMessageClasses: string;
+export declare const lineChartEmptyMessageTextClasses: string;

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

@@ -0,0 +1,95 @@
+import { cva } from "class-variance-authority";
+const lineChartRootClasses = "relative w-full flex flex-col min-h-0";
+const lineChartBodyClasses = "relative flex-1 min-h-0 min-w-0 [&_*]:outline-none";
+const lineChartBodyZoomEnabledClasses = "select-none [&_.recharts-wrapper]:cursor-crosshair!";
+const lineChartZoomCursorPopoverClasses = "fixed z-30 pointer-events-none";
+const lineChartLegendVariants = cva('flex', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-row flex-wrap items-center gap-6 pl-12 py-2',
+            vertical: 'flex-col gap-6 px-12 py-2 max-w-160'
+        },
+        align: {
+            start: '',
+            center: '',
+            end: ''
+        }
+    },
+    compoundVariants: [
+        {
+            orientation: 'horizontal',
+            align: 'start',
+            class: 'justify-start'
+        },
+        {
+            orientation: 'horizontal',
+            align: 'center',
+            class: 'justify-center'
+        },
+        {
+            orientation: 'horizontal',
+            align: 'end',
+            class: 'justify-end'
+        },
+        {
+            orientation: 'vertical',
+            align: 'start',
+            class: 'items-start'
+        },
+        {
+            orientation: 'vertical',
+            align: 'center',
+            class: 'items-center'
+        },
+        {
+            orientation: 'vertical',
+            align: 'end',
+            class: 'items-end'
+        }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        align: 'start'
+    }
+});
+const lineChartLegendItemVariants = cva("group/line-chart-legend-item relative flex items-center gap-4 px-4 py-2 rounded-4 transition-colors outline-none", {
+    variants: {
+        interactive: {
+            true: "cursor-pointer focus-visible:bg-states-primary-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-primary",
+            false: ''
+        },
+        active: {
+            true: 'bg-states-primary-hover',
+            false: 'hover:bg-states-primary-hover'
+        },
+        selected: {
+            true: '',
+            false: 'opacity-40'
+        },
+        dimmed: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        interactive: false,
+        active: false,
+        selected: true,
+        dimmed: false
+    }
+});
+const lineChartHoverPopoverClasses = "bg-bg-surface-2 border border-border-primary-light rounded-12 shadow-md px-12 py-8 min-w-160 flex flex-col gap-4 pointer-events-none";
+const lineChartHoverPopoverTimestampClasses = "text-xs font-medium text-text-primary";
+const lineChartHoverPopoverRowClasses = "relative h-16 w-full pl-12 flex items-center gap-8 text-xs font-mono text-text-primary";
+const lineChartHoverPopoverRowDotClasses = "absolute left-0 top-4";
+const lineChartHoverPopoverRowLabelClasses = "truncate min-w-0 font-normal";
+const lineChartHoverPopoverRowValueClasses = "ml-auto shrink-0 font-medium";
+const lineChartHoverPopoverDotClasses = "inline-block size-8 rounded-2";
+const lineChartZoomPopoverClasses = "bg-bg-surface-2 border border-border-primary-light rounded-12 shadow-md px-12 py-8 min-w-160 flex flex-col gap-8";
+const lineChartZoomPopoverRangeClasses = "text-xs font-medium text-text-primary whitespace-nowrap";
+const lineChartZoomPopoverConfirmClasses = "inline-flex items-center justify-center h-24 px-8 w-full rounded-8 bg-states-brand-default-alt text-text-brand text-sm font-medium transition-colors outline-none hover:bg-states-brand-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-brand";
+const lineChartTooltipCenterClasses = '-translate-y-1/2';
+const lineChartEmptyRootClasses = "relative w-full";
+const lineChartEmptyMessageClasses = "absolute top-0 left-0 right-0 flex items-center justify-center";
+const lineChartEmptyMessageTextClasses = "px-8 bg-bg-surface-1 text-xs font-mono text-text-secondary";
+export { lineChartBodyClasses, lineChartBodyZoomEnabledClasses, lineChartEmptyMessageClasses, lineChartEmptyMessageTextClasses, lineChartEmptyRootClasses, lineChartHoverPopoverClasses, lineChartHoverPopoverDotClasses, lineChartHoverPopoverRowClasses, lineChartHoverPopoverRowDotClasses, lineChartHoverPopoverRowLabelClasses, lineChartHoverPopoverRowValueClasses, lineChartHoverPopoverTimestampClasses, lineChartLegendItemVariants, lineChartLegendVariants, lineChartRootClasses, lineChartTooltipCenterClasses, lineChartZoomCursorPopoverClasses, lineChartZoomPopoverClasses, lineChartZoomPopoverConfirmClasses, lineChartZoomPopoverRangeClasses };

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

@@ -0,0 +1,25 @@
+export { CHART_PALETTE_FILL as LINE_STROKE_FILL, resolveChartColor as resolveSeriesColor, } from '../lib/chartPalette';
+export declare const LINE_STROKE_WIDTH = 2;
+export declare const LINE_DASH_DASHARRAY = "6 4";
+export declare const LINE_ACTIVE_DOT_RADIUS = 4;
+export declare const LINE_GRID_DASHARRAY = "4 4";
+export declare const LINE_ANIMATION_DURATION = 400;
+export declare const LINE_ANIMATION_BEGIN = 0;
+export declare const LINE_INACTIVE_OPACITY = 0.3;
+export declare const LINE_CARD_HEIGHT = 196;
+export declare const LINE_HEADER_HEIGHT = 32;
+export declare const LINE_X_LABEL_HEIGHT = 16;
+export declare const LINE_Y_LABEL_WIDTH = 38;
+export declare const LINE_DEFAULT_BODY_MARGIN: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const HOVER_POPOVER_TOP = 8;
+export declare const LINE_AXIS_TICK_TEXT_PROPS: {
+    readonly fill: "var(--color-text-secondary)";
+    readonly fontSize: 10;
+    readonly fontFamily: "var(--font-sans)";
+    readonly fontWeight: 400;
+};

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

@@ -0,0 +1,26 @@
+import { CHART_PALETTE_FILL, resolveChartColor } from "../lib/chartPalette.js";
+const LINE_STROKE_WIDTH = 2;
+const LINE_DASH_DASHARRAY = '6 4';
+const LINE_ACTIVE_DOT_RADIUS = 4;
+const LINE_GRID_DASHARRAY = '4 4';
+const LINE_ANIMATION_DURATION = 400;
+const LINE_ANIMATION_BEGIN = 0;
+const LINE_INACTIVE_OPACITY = 0.3;
+const LINE_CARD_HEIGHT = 196;
+const LINE_HEADER_HEIGHT = 32;
+const LINE_X_LABEL_HEIGHT = 16;
+const LINE_Y_LABEL_WIDTH = 38;
+const LINE_DEFAULT_BODY_MARGIN = {
+    top: 0,
+    right: 12,
+    bottom: 0,
+    left: 0
+};
+const HOVER_POPOVER_TOP = 8;
+const LINE_AXIS_TICK_TEXT_PROPS = {
+    fill: 'var(--color-text-secondary)',
+    fontSize: 10,
+    fontFamily: 'var(--font-sans)',
+    fontWeight: 400
+};
+export { HOVER_POPOVER_TOP, LINE_ACTIVE_DOT_RADIUS, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_AXIS_TICK_TEXT_PROPS, LINE_CARD_HEIGHT, LINE_DASH_DASHARRAY, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_INACTIVE_OPACITY, CHART_PALETTE_FILL as LINE_STROKE_FILL, LINE_STROKE_WIDTH, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH, resolveChartColor as resolveSeriesColor };

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

@@ -0,0 +1,5 @@
+export { useLineChartActiveKey } from './useLineChartActiveKey';
+export { useLineChartDataWarnings } from './useLineChartDataWarnings';
+export { useLineChartZoomState } from './useLineChartZoomState';
+export { useZoomDragListeners } from './useZoomDragListeners';
+export { useZoomPendingListeners } from './useZoomPendingListeners';

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

@@ -0,0 +1,6 @@
+import { useLineChartActiveKey } from "./useLineChartActiveKey.js";
+import { useLineChartDataWarnings } from "./useLineChartDataWarnings.js";
+import { useLineChartZoomState } from "./useLineChartZoomState.js";
+import { useZoomDragListeners } from "./useZoomDragListeners.js";
+import { useZoomPendingListeners } from "./useZoomPendingListeners.js";
+export { useLineChartActiveKey, useLineChartDataWarnings, useLineChartZoomState, useZoomDragListeners, useZoomPendingListeners };

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

@@ -0,0 +1,33 @@
+import type { LineChartSeries } from '../LineChartContext';
+interface UseLineChartActiveKeyResult {
+    /**
+     * Resolved active key after normalising stale values against the live
+     * `seriesByKey` map. `null` whenever the controlled value points at a key
+     * that no longer exists in `series`.
+     */
+    activeKey: string | null;
+    /**
+     * Setter that deduplicates per-pixel mousemove/hover events and forwards to
+     * the controlled callback. Use this instead of writing state directly so
+     * consumer callbacks don't fire with the same value frame after frame.
+     */
+    setActiveKey: (key: string | null) => void;
+}
+/**
+ * Controlled/uncontrolled active-series key with two safety nets:
+ *
+ * 1. If the controlled key points at a series that has disappeared (filter,
+ *    schema change, refresh) the hook pushes `null` back through
+ *    `onActiveKeyChange` so sibling charts stop highlighting a stale key.
+ * 2. The setter dedupes against a ref so per-pixel hover events don't keep
+ *    firing the callback after `useState` already bailed out.
+ *
+ * Refs are synced during render so parent-driven external resets flow through
+ * without a stale comparison.
+ */
+export declare const useLineChartActiveKey: ({ controlledActiveKey, onActiveKeyChange, seriesByKey, }: {
+    controlledActiveKey: string | null | undefined;
+    onActiveKeyChange: ((key: string | null) => void) | undefined;
+    seriesByKey: Map<string, LineChartSeries>;
+}) => UseLineChartActiveKeyResult;
+export {};

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

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useControlled } from "../../../../hooks/index.js";
+const useLineChartActiveKey = ({ controlledActiveKey, onActiveKeyChange, seriesByKey })=>{
+    const [activeKeyValue, setInternalActiveKey] = useControlled({
+        controlled: controlledActiveKey,
+        default: null
+    });
+    const rawActiveKey = activeKeyValue ?? null;
+    const activeKey = null !== rawActiveKey && seriesByKey.has(rawActiveKey) ? rawActiveKey : null;
+    useEffect(()=>{
+        if (null != controlledActiveKey && !seriesByKey.has(controlledActiveKey)) onActiveKeyChange?.(null);
+    }, [
+        controlledActiveKey,
+        seriesByKey,
+        onActiveKeyChange
+    ]);
+    const lastActiveKeyRef = useRef(void 0);
+    lastActiveKeyRef.current = activeKey;
+    const setActiveKey = useCallback((key)=>{
+        if (lastActiveKeyRef.current === key) return;
+        lastActiveKeyRef.current = key;
+        setInternalActiveKey(key);
+        onActiveKeyChange?.(key);
+    }, [
+        setInternalActiveKey,
+        onActiveKeyChange
+    ]);
+    return {
+        activeKey,
+        setActiveKey
+    };
+};
+export { useLineChartActiveKey };

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

@@ -0,0 +1,18 @@
+import type { LineChartDatum, LineChartSeries } from '../LineChartContext';
+/**
+ * Dev-only sanity checks. Surfaces three classes of caller mistake as
+ * `console.warn` so the chart fails loudly in development instead of silently
+ * rendering a broken plot:
+ *
+ * - `xKey` missing on datums (Recharts would draw gaps or break ordering)
+ * - `data` not sorted ascending by `xKey` (Recharts assumes an ordered domain)
+ * - `series[].key` not present on any datum (line renders empty)
+ *
+ * Production builds short-circuit before any iteration to avoid the per-render
+ * cost on large datasets.
+ */
+export declare const useLineChartDataWarnings: ({ data, series, xKey, }: {
+    data: LineChartDatum[];
+    series: LineChartSeries[];
+    xKey: string;
+}) => void;

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

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { warnLineChart } from "../lib/warn.js";
+const compareX = (a, b)=>{
+    if ('number' == typeof a && 'number' == typeof b) return a - b;
+    if ('string' == typeof a && 'string' == typeof b) return a < b ? -1 : a > b ? 1 : 0;
+    return 0;
+};
+const useLineChartDataWarnings = ({ data, series, xKey })=>{
+    useEffect(()=>{
+        if ('production' === process.env.NODE_ENV) return;
+        if (0 === data.length) return;
+        let xKeyMissingCount = 0;
+        for (const d of data){
+            const v = d[xKey];
+            if (null == v) xKeyMissingCount++;
+        }
+        if (xKeyMissingCount > 0) warnLineChart(`\`xKey="${xKey}"\` is missing on ${xKeyMissingCount} of ${data.length} datums. Recharts uses this key for the X axis; missing values will produce gaps or break ordering. Provide the key on every datum or pass a different \`xKey\`.`);
+        let unsortedAt = null;
+        for(let i = 1; i < data.length; i++){
+            const prev = data[i - 1]?.[xKey];
+            const curr = data[i]?.[xKey];
+            if (void 0 !== prev && void 0 !== curr && null !== prev && null !== curr) {
+                if (compareX(prev, curr) > 0) {
+                    unsortedAt = i;
+                    break;
+                }
+            }
+        }
+        if (null !== unsortedAt) warnLineChart(`\`data\` is not sorted ascending by \`xKey="${xKey}"\` (first inversion at index ${unsortedAt}). Recharts assumes an ordered X domain — unsorted data will draw the line backwards. Sort upstream.`);
+        const seenKeys = new Set();
+        for (const d of data){
+            for (const s of series){
+                if (seenKeys.has(s.key)) continue;
+                const v = d[s.key];
+                if (null != v) seenKeys.add(s.key);
+            }
+            if (seenKeys.size === series.length) break;
+        }
+        const missingSeries = series.filter((s)=>!seenKeys.has(s.key)).map((s)=>s.key);
+        if (missingSeries.length > 0) warnLineChart(`series whose \`key\` does not appear on any datum: ${missingSeries.map((k)=>`"${k}"`).join(', ')}. These lines will render empty. Drop the series or check the key spelling.`);
+    }, [
+        data,
+        series,
+        xKey
+    ]);
+};
+export { useLineChartDataWarnings };