@wallarm-org/design-system 0.35.1-rc-feature-AS-1005.1 → 0.36.0

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

@@ -0,0 +1,70 @@
+import { type HTMLAttributes, type ReactElement, type Ref } from 'react';
+import type { SyncMethod } from 'recharts/types/synchronisation/types';
+import { type TestableProps } from '../../../utils/testId';
+import { type LineChartDatum, type LineChartSeries, type LineChartZoomRange } from './LineChartContext';
+/**
+ * Generic over the datum shape so `xKey` and `series[].key` are checked at
+ * compile time against the actual data interface. When `T` is left at the
+ * default `LineChartDatum`, the constraints collapse to `string` and the API
+ * keeps its untyped form — the safety only kicks in when callers pass a
+ * concrete datum interface.
+ *
+ * ```ts
+ * interface RequestRow { timestamp: number; requests: number; errors: number }
+ *
+ * <LineChart<RequestRow>
+ *   data={rows}
+ *   xKey='timestamp'                                 // ✅ valid keyof T
+ *   series={[{ key: 'errors', label: 'Errors' }]}    // ✅ valid keyof T
+ * />
+ * <LineChart<RequestRow> data={rows} xKey='timetamp' /> // ❌ Type error
+ * ```
+ */
+export interface LineChartProps<T extends LineChartDatum = LineChartDatum> extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Long-form data array, one entry per X position. */
+    data: T[];
+    /** Schema describing each line drawn from `data`. */
+    series: LineChartSeries<Extract<keyof T, string>>[];
+    /**
+     * Key on each datum used as the X-axis value. Required — a silent fallback
+     * would hide key-name typos until the chart renders empty.
+     */
+    xKey: Extract<keyof T, string>;
+    /**
+     * Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart
+     * sync.
+     *
+     * **Heads-up:** if the controlled value points at a series key that no
+     * longer exists in `series` (filter, schema change, refresh), the chart
+     * pushes `null` back through `onActiveKeyChange` so sibling charts stop
+     * highlighting a stale key. If you wire `activeKey` to external state, the
+     * snap-to-null write will arrive as a normal state change — do not be
+     * surprised when your value resets after a series disappears.
+     */
+    activeKey?: string | null;
+    onActiveKeyChange?: (key: string | null) => void;
+    /** Controlled set of `series.key` values to hide from the plot. */
+    filteredKeys?: string[];
+    /** Fired after the user confirms a brush selection. */
+    onZoomChange?: (range: LineChartZoomRange | null) => void;
+    /**
+     * Charts that share a `syncId` synchronise their tooltip cursor and brush
+     * via recharts' built-in middleware — hovering one chart highlights the
+     * matching X on every sibling chart with the same id. Pair with `activeKey`
+     * + `onActiveKeyChange` if you also want the *series* highlight to sync.
+     */
+    syncId?: string | number;
+    /**
+     * How sibling `syncId` charts match X positions. Defaults to `'index'`
+     * (Recharts' default). Use `'value'` when the synced charts have different
+     * dataset lengths but share categorical X values.
+     *
+     * @see {@link https://recharts.github.io/en-US/examples/SynchronizedAreaChart/ Recharts synchronisation example}
+     */
+    syncMethod?: SyncMethod;
+}
+export declare function LineChart<T extends LineChartDatum = LineChartDatum>({ data, series, xKey, activeKey: controlledActiveKey, onActiveKeyChange, filteredKeys, onZoomChange, syncId, syncMethod, className, children, ref, 'data-testid': testId, ...props }: LineChartProps<T>): ReactElement;
+export declare namespace LineChart {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Chart } from "../Chart/Chart.js";
+import { ChartHeader } from "../Chart/ChartHeader.js";
+import { ChartTitle } from "../Chart/ChartTitle.js";
+import { formatChartHour } from "../lib/timeFormatters.js";
+import { LineChart } from "./LineChart.js";
+import { LineChartBody } from "./LineChartBody.js";
+import { LineChartGrid } from "./LineChartGrid.js";
+import { LineChartHoverPopoverDot } from "./LineChartHoverPopoverDot.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";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123142&m=dev';
+const figmaMultiNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7509-2354&m=dev';
+const sampleData = Array.from({
+    length: 24
+}, (_, i)=>{
+    const t = Date.UTC(2025, 0, 1, i, 0, 0);
+    const requests = Math.round(120 + 60 * Math.sin(i / 3));
+    const errors = Math.round(20 + 12 * Math.cos(i / 4));
+    const latency = Math.round(80 + 20 * Math.sin(i / 5));
+    return {
+        timestamp: t,
+        requests,
+        errors,
+        latency
+    };
+});
+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 formatXTick = (value)=>formatChartHour(value);
+const formatYTick = (value)=>Number(value).toLocaleString('en-US');
+code_connect.connect(LineChart, figmaNodeUrl, {
+    props: {
+        title: code_connect.string('Title'),
+        state: code_connect["enum"]('State', {
+            Default: 'default',
+            Hovered: 'hovered',
+            Zooming: 'zooming'
+        })
+    },
+    example: ({ title, state })=>/*#__PURE__*/ jsxs(Chart, {
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsx(LineChart, {
+                    data: sampleData,
+                    series: singleSeries,
+                    xKey: "timestamp",
+                    children: /*#__PURE__*/ jsxs(LineChartBody, {
+                        children: [
+                            /*#__PURE__*/ jsx(LineChartGrid, {}),
+                            /*#__PURE__*/ jsx(LineChartXAxis, {
+                                tickFormatter: formatXTick,
+                                minTickGap: 32
+                            }),
+                            /*#__PURE__*/ jsx(LineChartYAxis, {
+                                tickFormatter: formatYTick
+                            }),
+                            /*#__PURE__*/ jsx(LineChartLine, {
+                                seriesKey: "requests"
+                            }),
+                            /*#__PURE__*/ jsx(LineChartTooltip, {
+                                xTickFormatter: formatChartHour
+                            }),
+                            'zooming' === state && /*#__PURE__*/ jsx(LineChartZoomBrush, {})
+                        ]
+                    })
+                })
+            ]
+        })
+});
+code_connect.connect(LineChart, figmaMultiNodeUrl, {
+    props: {
+        title: code_connect.string('Title'),
+        state: code_connect["enum"]('State', {
+            Default: 'default',
+            Hovered: 'hovered',
+            Filtered: 'filtered'
+        })
+    },
+    example: ({ title, state })=>/*#__PURE__*/ jsxs(Chart, {
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsxs(LineChart, {
+                    data: sampleData,
+                    series: multiSeries,
+                    xKey: "timestamp",
+                    filteredKeys: 'filtered' === state ? [
+                        'latency'
+                    ] : [],
+                    children: [
+                        /*#__PURE__*/ jsx(LineChartLegend, {
+                            children: multiSeries.map((s)=>/*#__PURE__*/ jsxs(LineChartLegendItem, {
+                                    seriesKey: s.key,
+                                    children: [
+                                        /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
+                                            color: s.color
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs font-mono text-text-primary",
+                                            children: s.label
+                                        })
+                                    ]
+                                }, s.key))
+                        }),
+                        /*#__PURE__*/ jsxs(LineChartBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(LineChartGrid, {}),
+                                /*#__PURE__*/ jsx(LineChartXAxis, {
+                                    tickFormatter: formatXTick,
+                                    minTickGap: 32
+                                }),
+                                /*#__PURE__*/ jsx(LineChartYAxis, {
+                                    tickFormatter: formatYTick
+                                }),
+                                multiSeries.map((s)=>/*#__PURE__*/ jsx(LineChartLine, {
+                                        seriesKey: s.key
+                                    }, s.key)),
+                                /*#__PURE__*/ jsx(LineChartTooltip, {
+                                    xTickFormatter: formatChartHour
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});

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

@@ -0,0 +1,136 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from "react";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider } from "../../../utils/testId.js";
+import { lineChartRootClasses } from "./classes.js";
+import { useLineChartActiveKey } from "./hooks/useLineChartActiveKey.js";
+import { useLineChartDataWarnings } from "./hooks/useLineChartDataWarnings.js";
+import { useLineChartZoomState } from "./hooks/useLineChartZoomState.js";
+import { EMPTY_HIDDEN_SET, LineChartActiveContext, LineChartDataContext, LineChartSelectionContext, LineChartZoomContext } from "./LineChartContext.js";
+function LineChart({ data, series, xKey, activeKey: controlledActiveKey, onActiveKeyChange, filteredKeys, onZoomChange, syncId, syncMethod, className, children, ref, 'data-testid': testId, ...props }) {
+    const seriesByKey = useMemo(()=>{
+        const map = new Map();
+        for (const s of series)map.set(s.key, s);
+        return map;
+    }, [
+        series
+    ]);
+    useLineChartDataWarnings({
+        data,
+        series,
+        xKey
+    });
+    const { activeKey, setActiveKey } = useLineChartActiveKey({
+        controlledActiveKey,
+        onActiveKeyChange,
+        seriesByKey
+    });
+    const emitZoom = useCallback((range)=>{
+        onZoomChange?.(range);
+    }, [
+        onZoomChange
+    ]);
+    const zoom = useLineChartZoomState({
+        data,
+        xKey,
+        onZoomChange
+    });
+    const hiddenSet = useMemo(()=>{
+        if (!filteredKeys?.length) return EMPTY_HIDDEN_SET;
+        const set = new Set();
+        for (const key of filteredKeys)if (seriesByKey.has(key)) set.add(key);
+        return set.size > 0 ? set : EMPTY_HIDDEN_SET;
+    }, [
+        filteredKeys,
+        seriesByKey
+    ]);
+    const dataValue = useMemo(()=>({
+            data,
+            series,
+            seriesByKey,
+            xKey,
+            hiddenSet,
+            setActiveKey,
+            emitZoom,
+            syncId,
+            syncMethod
+        }), [
+        data,
+        series,
+        seriesByKey,
+        xKey,
+        hiddenSet,
+        setActiveKey,
+        emitZoom,
+        syncId,
+        syncMethod
+    ]);
+    const activeKeyContextValue = useMemo(()=>({
+            activeKey
+        }), [
+        activeKey
+    ]);
+    const selectionValue = useMemo(()=>({
+            hiddenSet
+        }), [
+        hiddenSet
+    ]);
+    const rootRef = useRef(null);
+    const setRootRef = useCallback((node)=>{
+        rootRef.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
+    const { enabled: zoomEnabled, drag: zoomDrag, pending: zoomPending, registerEnabled, startDrag, updateDrag, endDrag, cancelDrag, confirmZoom, cancelPending } = zoom;
+    const zoomContextValue = useMemo(()=>({
+            enabled: zoomEnabled,
+            drag: zoomDrag,
+            pending: zoomPending,
+            rootRef,
+            registerEnabled,
+            startDrag,
+            updateDrag,
+            endDrag,
+            cancelDrag,
+            confirmZoom,
+            cancelPending
+        }), [
+        zoomEnabled,
+        zoomDrag,
+        zoomPending,
+        registerEnabled,
+        startDrag,
+        updateDrag,
+        endDrag,
+        cancelDrag,
+        confirmZoom,
+        cancelPending
+    ]);
+    return /*#__PURE__*/ jsx(LineChartDataContext.Provider, {
+        value: dataValue,
+        children: /*#__PURE__*/ jsx(LineChartActiveContext.Provider, {
+            value: activeKeyContextValue,
+            children: /*#__PURE__*/ jsx(LineChartSelectionContext.Provider, {
+                value: selectionValue,
+                children: /*#__PURE__*/ jsx(LineChartZoomContext.Provider, {
+                    value: zoomContextValue,
+                    children: /*#__PURE__*/ jsx(TestIdProvider, {
+                        value: testId,
+                        children: /*#__PURE__*/ jsx("div", {
+                            ...props,
+                            ref: setRootRef,
+                            "data-slot": "line-chart",
+                            "data-testid": testId,
+                            className: cn(lineChartRootClasses, className),
+                            children: children
+                        })
+                    })
+                })
+            })
+        })
+    });
+}
+LineChart.displayName = 'LineChart';
+export { LineChart };

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

@@ -0,0 +1,12 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface LineChartBodyProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Recharts subcomponents — `<XAxis>`, `<YAxis>`, `<CartesianGrid>`, `<Line>`, `<Tooltip>`, `<Brush>`. */
+    children?: ReactNode;
+    /**
+     * Body height passed to recharts' `<ResponsiveContainer>`. Defaults to the
+     * Figma single-line plot height (`LINE_CARD_HEIGHT - LINE_HEADER_HEIGHT`).
+     */
+    height?: number;
+}
+export declare const LineChartBody: FC<LineChartBodyProps>;

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

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { LineChart, ResponsiveContainer } from "recharts";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { lineChartBodyClasses, lineChartBodyZoomEnabledClasses } from "./classes.js";
+import { LINE_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT } from "./constants.js";
+import { LineChartDataContext, LineChartZoomContext } from "./LineChartContext.js";
+const DEFAULT_BODY_HEIGHT = LINE_CARD_HEIGHT - LINE_HEADER_HEIGHT;
+const toTooltipIndex = (value)=>{
+    if ('number' == typeof value) return Number.isFinite(value) ? value : null;
+    if ('string' == typeof value) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+};
+const LineChartBody = ({ height = DEFAULT_BODY_HEIGHT, className, ref, children, ...props })=>{
+    const testId = useTestId('body');
+    const dataCtx = useContext(LineChartDataContext);
+    const zoomCtx = useContext(LineChartZoomContext);
+    const isZoomEnabled = zoomCtx?.enabled ?? false;
+    const isZoomDragging = zoomCtx?.drag != null;
+    const handleMouseDown = useCallback((state, event)=>{
+        if (!zoomCtx?.enabled) return;
+        const index = toTooltipIndex(state.activeTooltipIndex);
+        if (null === index) return;
+        event.preventDefault();
+        zoomCtx.startDrag(index, event.clientX, event.clientY);
+    }, [
+        zoomCtx
+    ]);
+    const handleMouseMove = useCallback((state, event)=>{
+        if (!zoomCtx?.drag) return;
+        const next = toTooltipIndex(state.activeTooltipIndex);
+        if (null === next) return;
+        zoomCtx.updateDrag(next, event.clientX, event.clientY);
+    }, [
+        zoomCtx
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-body",
+        "data-testid": testId,
+        "aria-hidden": "true",
+        "data-zoom-active": isZoomDragging ? 'true' : void 0,
+        className: cn(lineChartBodyClasses, isZoomEnabled && lineChartBodyZoomEnabledClasses, className),
+        children: /*#__PURE__*/ jsx(ResponsiveContainer, {
+            width: "100%",
+            height: height,
+            children: /*#__PURE__*/ jsx(LineChart, {
+                data: dataCtx?.data ?? [],
+                margin: LINE_DEFAULT_BODY_MARGIN,
+                accessibilityLayer: false,
+                syncId: dataCtx?.syncId,
+                syncMethod: dataCtx?.syncMethod,
+                onMouseDown: handleMouseDown,
+                onMouseMove: handleMouseMove,
+                children: children
+            })
+        })
+    });
+};
+LineChartBody.displayName = 'LineChartBody';
+export { LineChartBody };

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

@@ -0,0 +1,151 @@
+import { type RefObject } from 'react';
+import type { SyncMethod } from 'recharts/types/synchronisation/types';
+import type { ChartColor } from '../types';
+/**
+ * A single point on the X axis. Extra keys are series values.
+ *
+ * The loose default form is `Record<string, …>` — pass a concrete interface
+ * (e.g. `interface MyDatum { timestamp: number; requests: number }`) to gain
+ * compile-time safety on `xKey` and `series[].key`. See `LineChartProps<T>`.
+ */
+export type LineChartDatum = Record<string, number | string | null | undefined>;
+/**
+ * Series schema. `K` is the literal-string union of valid keys; defaults to
+ * `string` so untyped callers keep the loose form. When `LineChartProps<T>`
+ * is parameterised with a concrete `T`, `K` collapses to `Extract<keyof T,
+ * string>` and a typo in `key` becomes a compile error rather than a
+ * dev-mode `console.warn`.
+ */
+export interface LineChartSeries<K extends string = string> {
+    /**
+     * Stable identity. Used as the lookup key on each `LineChartDatum`, the join key
+     * for legend/line/tooltip sync, and the React reconciliation key. Must be unique
+     * within `series`.
+     */
+    key: K;
+    /** Visible label rendered by the legend and the tooltip rows. */
+    label: string;
+    /**
+     * Series colour. Either a built-in palette token (`'brand'`, `'red'`, …) or
+     * any CSS colour string (`'var(--color-violet-500)'`, `'#8b5cf6'`,
+     * `'oklch(…)'`). Drives both the line stroke and the legend/tooltip dot — a
+     * single value keeps the two surfaces in sync. Defaults to `'slate'`.
+     */
+    color?: ChartColor | (string & {});
+    /** Visual line style. Defaults to `'solid'`. */
+    variant?: 'solid' | 'dashed';
+}
+export interface LineChartZoomRange {
+    /** Inclusive index into `data`. */
+    fromIndex: number;
+    /** Inclusive index into `data`. */
+    toIndex: number;
+    /** The `xKey` value at `fromIndex`. */
+    from: number | string;
+    /** The `xKey` value at `toIndex`. */
+    to: number | string;
+}
+/**
+ * Legend's internal row vs column layout. Pair with the wrapping layout the
+ * consumer chooses: `'horizontal'` for top/bottom JSX-order placement,
+ * `'vertical'` when wrapping body+legend in an `<HStack>` for left/right.
+ */
+export type LineChartLegendOrientation = 'horizontal' | 'vertical';
+/** Static chart shape — recomputes only when data/series/filter changes. */
+export interface LineChartDataContextValue {
+    data: LineChartDatum[];
+    series: LineChartSeries[];
+    seriesByKey: Map<string, LineChartSeries>;
+    xKey: string;
+    hiddenSet: ReadonlySet<string>;
+    setActiveKey: (key: string | null) => void;
+    emitZoom: (range: LineChartZoomRange | null) => void;
+    /**
+     * Pair of charts that share a `syncId` get their tooltip cursor + brush
+     * synchronised by recharts' own redux middleware. `LineChartBody` forwards
+     * both values to `<RechartsLineChart>`; the chart itself does not read them.
+     */
+    syncId: string | number | undefined;
+    syncMethod: SyncMethod | undefined;
+}
+/**
+ * Active *series* — set by legend hover/focus. Drives line dimming and the
+ * legend item's `aria-current`/`data-active`. Cross-chart sync of the *cursor
+ * X* (tooltip + brush) is handled by recharts' built-in `syncId` mechanism on
+ * `<LineChart>` — only the series highlight needs custom controlled state, so
+ * the index has no equivalent context.
+ */
+export interface LineChartActiveContextValue {
+    activeKey: string | null;
+}
+/** Set of `series.key` values that should be hidden from the plot and tooltip. */
+export interface LineChartSelectionContextValue {
+    hiddenSet: ReadonlySet<string>;
+}
+/** In-progress zoom selection. Indices are inclusive into `data`. */
+export interface LineChartZoomDragState {
+    startIndex: number;
+    endIndex: number;
+    /** Viewport coords of the latest pointer position — drives the floating popover. */
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Released-but-unconfirmed zoom selection. The drag has ended, the gray
+ * selection rectangle stays, and the popover surfaces a "Zoom in" button for
+ * the user to confirm or dismiss. Position is locked at the cursor release.
+ */
+export interface LineChartZoomPendingState {
+    range: LineChartZoomRange;
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Zoom-drag state lives in its own context so the body re-renders on every
+ * mousemove frame without dragging the whole tree (static contexts like
+ * `LineChartDataContext` stay quiet). `enabled` flips when `LineChartZoomBrush`
+ * is mounted — the body uses it to decide whether to capture mousedown.
+ *
+ * The flow is two-phase: `drag` while the mouse button is held, then `pending`
+ * once it releases. `pending` is what the Figma confirm popover renders against
+ * — committing fires `onZoomChange`, dismissing just clears the state.
+ */
+export interface LineChartZoomContextValue {
+    enabled: boolean;
+    drag: LineChartZoomDragState | null;
+    pending: LineChartZoomPendingState | null;
+    /**
+     * Ref to the owning chart root. Scopes the pending-state Enter/Escape
+     * handler so it only reacts to keystrokes from within *this* chart, even
+     * when several charts share the page (e.g. cross-chart hover sync).
+     */
+    rootRef: RefObject<HTMLDivElement | null>;
+    /** Called by `LineChartZoomBrush` on mount to opt the chart into zoom mode. */
+    registerEnabled: () => () => void;
+    startDrag: (index: number, clientX: number, clientY: number) => void;
+    updateDrag: (index: number, clientX: number, clientY: number) => void;
+    /** Releases the drag — moves it into `pending` for the user to confirm. */
+    endDrag: () => void;
+    /** Discards the in-progress drag without emitting. */
+    cancelDrag: () => void;
+    /** Commits the pending selection as a zoom range and clears it. */
+    confirmZoom: () => void;
+    /** Dismisses the pending selection without emitting. */
+    cancelPending: () => void;
+}
+/** Per-legend-row context — published by `LineChartLegendItem` to its children. */
+export interface LineChartItemContextValue {
+    seriesKey: string;
+    selected: boolean;
+    interactive: boolean;
+    active: boolean;
+    color: ChartColor | string | undefined;
+    label: string | undefined;
+}
+export declare const EMPTY_HIDDEN_SET: ReadonlySet<string>;
+export declare const isHoverSyncTarget: (target: EventTarget | null | undefined) => boolean;
+export declare const LineChartDataContext: import("react").Context<LineChartDataContextValue | null>;
+export declare const LineChartActiveContext: import("react").Context<LineChartActiveContextValue>;
+export declare const LineChartSelectionContext: import("react").Context<LineChartSelectionContextValue>;
+export declare const LineChartZoomContext: import("react").Context<LineChartZoomContextValue | null>;
+export declare const LineChartItemContext: import("react").Context<LineChartItemContextValue | null>;

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

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+import { makeIsHoverSyncTarget } from "../lib/hoverSync.js";
+const EMPTY_HIDDEN_SET = new Set();
+const isHoverSyncTarget = makeIsHoverSyncTarget([
+    'line-chart-legend-item'
+]);
+const LineChartDataContext = createContext(null);
+const LineChartActiveContext = createContext({
+    activeKey: null
+});
+const LineChartSelectionContext = createContext({
+    hiddenSet: EMPTY_HIDDEN_SET
+});
+const LineChartZoomContext = createContext(null);
+const LineChartItemContext = createContext(null);
+export { EMPTY_HIDDEN_SET, LineChartActiveContext, LineChartDataContext, LineChartItemContext, LineChartSelectionContext, LineChartZoomContext, isHoverSyncTarget };

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

@@ -0,0 +1,15 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface LineChartEmptyProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Body height override. Defaults to the standard plot height. */
+    height?: number;
+    /**
+     * Empty-state message. Pass the copy you want to render (`"No data"`, a
+     * localised string, or richer JSX). Omit (or pass `null`) to render only
+     * the dashed grid frame — the idiom for loading skeletons. There is no
+     * default text.
+     */
+    children?: ReactNode;
+}
+export declare const LineChartEmpty: FC<LineChartEmptyProps>;